WPF-帶填充的 WrapPanel

本文來自翻譯（谷歌翻譯加持）。

原文作者： 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，可以用一個或多個子控制項填滿右邊空白空間（Orientation=Horizontal，站長注：注意了哦，不一定填滿的是在最左邊，也不一定是最右邊，可以是中間哦）。我決定撰寫一個可重複使用的控制項來在兩個方向上完成這項工作。

該程式碼包含一個小展示，您可以在其中輕鬆查看它是否符合您的需要。

注意：我非常感謝回饋。如果您不喜歡程式碼，請告訴我原因。我希望它可以幫助任何人。

範例程式碼截圖

背景

StackOverflow 上有幾個問答，但沒有真正簡單的解決方案可以在多行時起作用。另外，我想做一個可以在任何地方輕鬆重複使用的控制項（容器）。我從微軟的程式碼開始修改它以提供所需的行為。

使用程式碼

您可以使用 DLL 或僅將原始碼（只有一個 .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，澄清限制。稍微改進一下文字。

協議

本文以及任何相關的原始碼和檔案均已獲得程式碼專案開放許可證 (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