Wrappanel children not streching while resize the window

Question

I am a beginner in using WPF and try to create a responsive application. I read many blogs and websites about the responsive design possibilities in WPF. Now I try to create a sample form. Please see the below image to find element structure in my form.

In this image first red box layout was maximized window and the second one was the resized or small screen layout

Red box is main container grid and it have to column (column definition)

Blue Boxes are two children of the main grid ( first blue box is a grid and second is wrappanel )

Green boxes in side the second blue box are the child elements of the wrap panel.

I am try to when I resize the window I need to change wrap panel contents like above image. I mean wrappanel orientation is horizontal, child contents are arranged in newline if the space not available on the right side.

please see the sample code below.

<Window x:Class="ResponsiveWPFApp.Responsive"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:ResponsiveWPFApp"
    mc:Ignorable="d"
    Title="Responsive" Height="450" Width="800">
<Grid>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200*"/>
            <ColumnDefinition Width="400*"/>
        </Grid.ColumnDefinitions>
        <Grid Background="Yellow">

        </Grid>
        <WrapPanel x:Name="wrPanel" Background="Aqua" Grid.Column="1" Orientation="Horizontal" ItemWidth="Auto">
            <WrapPanel.Children>
                <Grid x:Name="gd1" Height="400" Width="Auto" HorizontalAlignment="Stretch" Background="Black" >
                    <TextBlock>terdf</TextBlock>
                </Grid>
                <Grid x:Name="gd2" Height="400" Width="Auto"  Background="Green" >
                    <TextBlock >sdfdf</TextBlock>
                </Grid>
            </WrapPanel.Children>
        </WrapPanel>
    </Grid>
</Grid>
</Window>

In my code wrap panel contains two child elements, it's not filled the wrap panel available space.

Answer 1

You must decide: either you need to stretch the children, or you need WrapPanel. These are mutually exclusive options. The main purpose of the WrapPanel is to transfer the children to the next line (column) if they do not fit in the current line. If each child is stretched horizontally (vertically) to the limit, then each line will always have one child, and the functionality of the WrapPanel will lose its meaning. If you need to stretch children, you should use a Grid or UniformGrid. Here is an example of code with Grid in which children are stretched:

<Window x:Class="ResponsiveWPFApp.Responsive"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ResponsiveWPFApp"
        mc:Ignorable="d"
        Title="Responsive" Height="450" Width="800">
    <Grid>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200*"/>
                <ColumnDefinition Width="400*"/>
            </Grid.ColumnDefinitions>
            <Grid Background="Yellow">

            </Grid>
            <Grid x:Name="grid" Background="Aqua" Grid.Column="1" VerticalAlignment="Top" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid Grid.Column="0"  x:Name="gd1" Height="400" HorizontalAlignment="Stretch" Background="Black" >
                    <TextBlock>terdf</TextBlock>
                </Grid>
                <Grid Grid.Column="1" x:Name="gd2" Height="400" Background="Green" >
                    <TextBlock >sdfdf</TextBlock>
                </Grid>
            </Grid>
        </Grid>
    </Grid>
</Window>

UniformGrid is a hybrid WrapPanel and Grid. Here is code snipet with UniformGrid:

<Window x:Class="ResponsiveWPFApp.Responsive"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ResponsiveWPFApp"
        mc:Ignorable="d"
        Title="Responsive" Height="450" Width="800">
    <Grid>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200*"/>
                <ColumnDefinition Width="400*"/>
            </Grid.ColumnDefinitions>
            <Grid Background="Yellow">

            </Grid>
            <UniformGrid x:Name="grid" Background="Aqua" Grid.Column="1" Rows="1" VerticalAlignment="Top" >
                <Grid x:Name="gd1" Height="400" HorizontalAlignment="Stretch" Background="Black" >
                    <TextBlock>terdf</TextBlock>
                </Grid>
                <Grid x:Name="gd2" Height="400" Background="Green" >
                    <TextBlock >sdfdf</TextBlock>
                </Grid>
            </UniformGrid>
        </Grid>
    </Grid>
</Window>

Take account on Rows="1" for the UniformGrid. Number of Rows is fixed for the UniformGrid. WrapPanel may have different number of rows.