Wrappanel children 在调整 window 大小时不拉伸

Question

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

在此图像中，第一个红框布局已最大化 window，第二个是调整大小或小屏幕布局

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

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

第二个蓝色框内的绿色框是包装面板的child元素。

我尝试在调整 window 大小时需要像上图一样更改环绕面板内容。我的意思是 wrappanel 方向是水平的，如果 space 在右侧不可用，child 内容会换行。

请看下面的示例代码。

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

在我的代码包装面板中包含两个 child 元素，它没有填充可用的包装面板 space。

Answer 1

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

<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 可能有不同的行数。

Wrappanel children 在调整 window 大小时不拉伸

Wrappanel children not streching while resize the window

.net

c#

wpf

responsive-design