WPF技术问题：如何实现网格控件自适应页面宽度并自动换行？

需求：希望在WPF中实现网格控件的项并排显示，当内容到达窗口边界时自动换行。目前仅能实现项垂直排列，或手动设置列数（如4列）来让项并排。

原XAML代码 #

<Page x:Class="StoreManagment.Manager.EmployeesView"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  xmlns:local="clr-namespace:StoreManagment.Manager"
  mc:Ignorable="d" 
  d:DesignHeight="450" d:DesignWidth="800"
  Title="EmployeesView" Background="White">

<ScrollViewer >
<Grid >
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <StackPanel >
        <Label Content="Mitarbeiter" FontSize="20" />
        <StackPanel Orientation="Horizontal" Margin="10,0,0,0">

            <Button Content="Alle" Name="AlleButton" Style="{StaticResource FilterButton}" Click="AlleButton_Click"/>
            <Button Content="Angestellte" Name="AngestellteButton" Style="{StaticResource FilterButton}"/>
            <Button Content="Auszubildende" Name="AuszubildendeButton" Style="{StaticResource FilterButton}"/>
            <Button Content="Abteilungsleiter" Name="AbteilungsleiterButton" Style="{StaticResource FilterButton}"/>


        </StackPanel>
    </StackPanel>

    <Button Name="AddEmployeeButton" Content="Mitarbeiter Hinzufügen" Grid.Column="1" VerticalAlignment="Center"  HorizontalAlignment="Left" Margin="100,0,0,0" Width="150" Height="20" Style="{StaticResource FilterButton}" Click="AddEmployeeButton_Click" />
    
        <ItemsControl Grid.Row="1"  Grid.ColumnSpan="1" HorizontalAlignment="Center" ItemsSource="{Binding employeesList}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="1"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate >
                    <Border BorderThickness="1" BorderBrush="DarkOrange" Height="110" Margin="20,0,0,0">
                        <Grid Margin="5,15,0,0">

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>

                            <StackPanel Grid.Column="0">
                                <Label Content="Id:" />
                                <Label Content="Vorname:" />
                                <Label Content="Nachname:" />
                            </StackPanel>

                            <StackPanel Grid.Column="1" Grid.Row="1">
                                <Label FontWeight="SemiBold" Content="{Binding Id}" />
                                <Label FontWeight="SemiBold" Content="{Binding Vorname}" />
                                <Label FontWeight="SemiBold" Content="{Binding Nachname}" />
                            </StackPanel>
                        </Grid>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</ScrollViewer>
</Page>

当前效果 #

解决方案 #

核心是把ItemsControl的ItemsPanel从UniformGrid替换为WrapPanel，WrapPanel会根据容器的可用宽度自动排列子元素，横向排列时到达边界自动换行，完美适配需求。

修改后的ItemsControl部分代码：

<ItemsControl Grid.Row="1" Grid.ColumnSpan="2" ItemsSource="{Binding employeesList}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- 使用WrapPanel替代UniformGrid，默认Orientation是Horizontal，自动换行 -->
            <WrapPanel HorizontalAlignment="Left" Margin="10"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- 保持原ItemTemplate不变，可给Border添加固定Width保证项大小一致 -->
    <ItemsControl.ItemTemplate>
        <DataTemplate >
            <Border BorderThickness="1" BorderBrush="DarkOrange" Height="110" Width="250" Margin="10">
                <Grid Margin="5,15,0,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <StackPanel Grid.Column="0">
                        <Label Content="Id:" />
                        <Label Content="Vorname:" />
                        <Label Content="Nachname:" />
                    </StackPanel>
                    <StackPanel Grid.Column="1">
                        <Label FontWeight="SemiBold" Content="{Binding Id}" />
                        <Label FontWeight="SemiBold" Content="{Binding Vorname}" />
                        <Label FontWeight="SemiBold" Content="{Binding Nachname}" />
                    </StackPanel>
                </Grid>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

关键说明 #

1. 替换面板：WrapPanel无需指定列数，会自动根据容器宽度调整每行显示的项数，窗口宽度变化时也会实时重新排列。
2. 调整布局属性：给WrapPanel设置HorizontalAlignment="Left"让项从左侧开始排列，添加Margin避免贴边；给每个项的Border设置固定Width，保证每个项大小一致，排列更整齐。
3. 修正列跨度：原代码中Grid.ColumnSpan="1"限制了ItemsControl只占第一列，改为Grid.ColumnSpan="2"让它占用整个窗口宽度，确保有足够空间排列更多项。

内容的提问来源于stack exchange，提问作者user22498067