Wrappanel 孩子在调整窗口大小时不拉伸

Question

我是使用 WPF 的初学者并尝试创建响应式应用程序。我阅读了许多关于 WPF 中响应式设计可能性的博客和网站。现在我尝试创建一个示例表单。请查看下图以在我的表单中查找元素结构。

在这张图片中，第一个红框布局是最大化窗口，第二个是调整大小或小屏幕布局

红框是主容器网格，必须列（列定义）

蓝框是主网格的两个孩子（第一个蓝框是网格，第二个是包装面板）

第二个蓝色框旁边的绿色框是环绕面板的子元素。

我尝试在调整窗口大小时更改包装面板内容，如上图。我的意思是 wrappanel 方向是水平的，如果右侧没有可用的空间，则子内容以换行符排列。

请看下面的示例代码。

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

在我的代码换行面板中包含两个子元素，它没有填满换行面板的可用空间。

Answer 1

您必须决定：要么拉伸孩子，要么需要 WrapPanel。这些是相互排斥的选项。 WrapPanel 的主要目的是如果子项不适合当前行，则将其转移到下一行（列）。如果每个孩子水平（垂直）拉伸到极限，那么每一行将始终有一个孩子，WrapPanel 的功能将失去意义。如果您需要拉伸孩子，您应该使用 Grid 或 UniformGrid。下面是一个带有 Grid 的代码示例，其中孩子被拉伸：

<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 是 WrapPanel 和 Grid 的混合体。这是 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>

考虑 UniformGrid 的 Rows="1"。 UniformGrid 的行数是固定的。 WrapPanel 可能有不同的行数。