WPF WrapPanel with Fill

This article is translated (with Google Translate support).

Original author: Eric Ouellet

Original title: WPF - WrapPanel with Fill

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

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

Introduction

I realized that many people need the same layout container as I do: a WrapPanel that can fill the blank space on the right (with Orientation=Horizontal, site owner note: note that it does not necessarily fill on the far left or far right, it could be in the middle) with one or more child controls. I decided to write a reusable control that does the job in both directions.

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

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

Sample Code Screenshot

Background

There are several Q&A on StackOverflow, but no truly simple solution that works when there are multiple rows. Also, I wanted to create a control (container) that can be easily reused anywhere. I started from Microsoft's code and modified it to provide the desired behavior.

Using the Code

You can use the DLL or simply copy the source code (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>

Limitations (Improvement Methods)

• Consider setting MaxWidth for the control defined as fill (or MaxHeight when Orientation is Vertical).
• The fill width is always the same for each child control (when multiple child controls are defined as "fill". It would be nice to use the same "proportional" definition as GridLength in a Grid. For example, the Width of a RowDefinition).
• Adding HorizontalContentAlignment and VerticalContentAlignment would make the control more complete. It would be useful when we need to align controls to the right or center instead of the left. I found a good solution on StackOverflow from DTig.

Ideally, a combination of each improvement in a solution would be great.

History

• 2015-05-12, First version
• 2015-05-13, Made the code cleaner, fixed some errors in the hints and added screenshots
• 2015-05-22, Clarified limitations. Slightly improved the text.

License

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

Site Owner's Addition

The best use effect of this article's feature is as mentioned earlier: copy the container code into your own project and then use it.

The site owner has also added this container to the Dotnet9WPFCotnrols package, with the following code:

    <Window
    /** omitted */
    xmlns:dotnet9="https://dotnet9.com"
    /** omitted */
    >
    /** omitted */
    <GroupBox Header="WrapPanelFill">
        <StackPanel Orientation="Vertical">
            <Image
                Width="300"
                Height="300"
                Source="Images/Swift.png" />
            <dotnet9:WrapPanelFill>
                <Button Content="Feedback" Style="{StaticResource Styles.ButtonDemo}" />
                <TextBlock dotnet9:WrapPanelFill.UseToFill="True" />
                <Button Content="Like" Style="{StaticResource Styles.ButtonDemo}" />
                <Button Content="Not Interested" Style="{StaticResource Styles.ButtonDemo}" />
            </dotnet9:WrapPanelFill>
        </StackPanel>
    </GroupBox>
</Window>

Similar to the previous code, a TextBlock is used as a blank filler. The runtime effect is as follows:

Finally, here are the sources for all the code in this article:

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