WPF-WrapPanel with padding

This article comes from translation (Google Translate Plus).

Original author: Eric Ouellet

Original title: WPF - WrapPanel with Fill

Original link: www.codeproject.com/Tips/990854/WPF-WrapPanel-with-Fill

Original example code: www.codeproject.com/KB/static/990854/WpfWrapPanelWithFill.zip

introduced

我意识到很多人都需要和我一样的布局容器：一个 WrapPanel，可以用一个或多个子控件填充右边空白空间(Orientation=Horizontal，站长注：注意了哦，不一定填充的是在最左边，也不一定是最右边，可以是中间哦)。我决定编写一个可重复使用的控件来在两个方向上完成这项工作。

The code includes a small demonstration where you can easily see if it meets your needs.

** Note: I appreciate the feedback very much. If you don't like the code, please tell me why. I hope it can help anyone. **

Sample code screenshots

background

There are several Q & A on StackOverflow, but there is no really simple solution that works when multiple lines are used. In addition, I wanted to make a control (container) that could be easily reused anywhere. I started with Microsoft's code and modified it to provide the required behavior.

use code

You can use DLLs or just copy the source code (with only one.cs file) into your own library.

Usage is as follows:

<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>

Restrictions (improvement methods)

• 为定义为填充的控件考虑设置 MaxWidth属性（或当 Orientation是Vertical时设置MaxHeight）。
• The fill width for each child control is always the same (when more child controls are defined as "fill". It would be nice to use "GridLength" in "Grid" to define the same "scale". For example,"Width" of RowDefinition).
• 添加HorizontalContentAlignement 和VerticalContentAlignement 使控件更加完整。 当我们需要在右侧或中心而不是左侧对齐控件时，它很有用。 我在 StackOverflow 的 DTig 找到了一个很好的解决方案。

Ideally, it would be a combination of every improvement in a solution, which would be nice.

history

• 2015-05-12, first edition
• 2015-05-13, made the code more concise, fixed some errors in the prompts and added screenshots
• 2015-05-22 Clarify restrictions. Improve the text slightly.

agreement

This article and any associated source code and files are licensed under the Code Project Open License (CPOL)

Add by webmaster

The best effect of this article is as mentioned above: copy the container code into your own project and use it.

站长也将该容器添加到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作为空白填充，运行效果如下：

Finally, I will give all the code sources in this article:

• Original example code: www.codeproject.com/KB/static/990854/WpfWrapPanelWithFill.zip
• Dotnet9WPFControls package: www.nuget.org/packages/Dotnet9WPFControls/0.1.0-preview.3
• Dotnet9WPFControls source code: github.com/dotnet9/Dotnet9WPFControls
• Example code at the end of the text: github.com/dotnet9/TerminalMACS.ManagerForWPF/blob/master/src/Demo/WpfThemeDemo/MainWindow.xaml