WPF - パディング付き WrapPanel

本文は翻訳（Google翻訳による）です。

原文著者： Eric Ouellet

原文タイトル：WPF - WrapPanel with Fill

原文リンク：https://www.codeproject.com/Tips/990854/WPF-WrapPanel-with-Fill

原文サンプルコード：https://www.codeproject.com/KB/static/990854/WpfWrapPanelWithFill.zip

紹介

多くの人が私と同じレイアウトコンテナを必要としていることに気づきました。つまり、WrapPanelで、右側の空きスペースを1つ以上の子コントロールで埋めるものです（Orientation=Horizontal、サイト管理者注：必ずしも左端や右端ではなく、中央の場合もあります）。私はこの機能を両方向で行う再利用可能なコントロールを作成することにしました。

このコードには小さなデモが含まれており、ニーズに合うかどうかを簡単に確認できます。

注意：フィードバックをいただければ幸いです。コードが気に入らない場合は、その理由をお聞かせください。誰かの助けになることを願っています。

サンプルコードのスクリーンショット

背景

StackOverflowにはいくつかのQAがありますが、複数行で機能する真に簡単な解決策はありません。また、どこでも簡単に再利用できるコントロール（コンテナ）を作りたいと思いました。Microsoftのコードから始めて、必要な動作を提供するように修正しました。

コードの使用

DLLを使用するか、ソースコード（1つの.csファイルのみ）を自分のライブラリにコピーできます。

使用方法は以下の通りです：

<Window x:Class="WpfWrapPanelWithFillTestApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:wrapPanelWithFill="clr-namespace:WrapPanelWithFill;assembly=WrapPanelWithFill"
        Title="MainWindow" Height="400" Width="800">

  <wrapPanelWithFill:WrapPanelFill Grid.Row="2" Grid.Column="6" Orientation="Vertical">
    <TextBlock Text="Path: " TextWrapping="Wrap"></TextBlock>
    <TextBox MinWidth="120" wrapPanelWithFill:WrapPanelFill.UseToFill="True">*</TextBox>
    <Button>Browse...</Button>
  </wrapPanelWithFill:WrapPanelFill>

</Window>

制限（改善方法）

• 埋め込みとして定義されたコントロールには MaxWidth プロパティ（Orientation が Vertical の場合は MaxHeight）を設定することを検討してください。
• 各子コントロールの埋め込み幅は常に同じです（複数の子コントロールが「埋め込み」として定義されている場合。Grid で GridLength を使った「比率」定義と同じようにできると良いでしょう。例えば RowDefinition の Width）。
• HorizontalContentAlignment と VerticalContentAlignment を追加して、コントロールをより完全にします。コントロールを「右側」や「中央」に配置する必要がある場合に便利です。私は StackOverflow の DTig で良い解決策を見つけました。

理想的には、これら各改善を組み合わせたソリューションがあると良いでしょう。

履歴

• 2015-05-12、初版
• 2015-05-13、コードをより簡潔にし、ヒントの誤りを修正し、スクリーンショットを追加
• 2015-05-22、制限を明確化。テキストを若干改善。

ライセンス

本記事および関連するソースコードとファイルは、Code Project Open License (CPOL) の下でライセンスされています。

サイト管理者追記

この機能の最適な利用方法は前述の通りで、コンテナコードを自分のプロジェクトにコピーして使用することです。

サイト管理者はこのコンテナを Dotnet9WPFCotnrols パッケージにも追加しました。コードは以下の通りです：

    <Window
    /**省略 */
    xmlns:dotnet9="https://dotnet9.com"
    /**省略 */
    >
    /**省略 */
    <GroupBox Header="WrapPanelFill">
        <StackPanel Orientation="Vertical">
            <Image
                Width="300"
                Height="300"
                Source="Images/Swift.png" />
            <dotnet9:WrapPanelFill>
                <Button Content="フィードバック" Style="{StaticResource Styles.ButtonDemo}" />
                <TextBlock dotnet9:WrapPanelFill.UseToFill="True" />
                <Button Content="好き" Style="{StaticResource Styles.ButtonDemo}" />
                <Button Content="興味なし" Style="{StaticResource Styles.ButtonDemo}" />
            </dotnet9:WrapPanelFill>
        </StackPanel>
    </GroupBox>
</Window>

前述のコードと同様に、TextBlock を空白の埋め込みとして使用しています。実行結果は以下の通りです：

最後に、この記事の全コードの出典を以下に示します：

• 原文サンプルコード：https://www.codeproject.com/KB/static/990854/WpfWrapPanelWithFill.zip
• Dotnet9WPFControls パッケージ：https://www.nuget.org/packages/Dotnet9WPFControls/0.1.0-preview.3
• Dotnet9WPFControls ソースコード：https://github.com/dotnet9/Dotnet9WPFControls
• 文末サンプルコード：https://github.com/dotnet9/TerminalMACS.ManagerForWPF/blob/master/src/Demo/WpfThemeDemo/MainWindow.xaml