WPF：如何实现ItemsControl中子控件的行列布局？

这个问题我之前也碰到过，核心原因其实很直白：当你把Grid设为ItemsPanel时，每个Item对应的容器（比如ContentPresenter或者ListViewItem）只是被直接添加到Grid中，但Grid不会自动为它们分配行和列位置——如果不手动指定Grid.Row和Grid.Column属性，所有元素都会默认使用0,0这个位置，自然就挤在一起了。

下面是两种针对性的解决方案，你可以根据自己的场景选择：

方案1：固定列数（或行数）的网格布局（最常用） #

如果你的网格列数是固定的（比如3列），可以利用ItemsControl.AlternationIndex结合值转换器来自动计算每个Item的行和列位置：

步骤1：创建索引转行列的转换器 #

这个转换器会根据Item的索引和固定列数，算出它应该在第几行第几列：

public class GridPositionConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values.Length != 2 || !(values[0] is int index) || !(values[1] is int columnCount))
            return 0;

        if (parameter?.ToString() == "Row")
            return index / columnCount; // 行号 = 索引 / 列数（整数除法）
        else
            return index % columnCount; // 列号 = 索引 % 列数
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

步骤2：在XAML中配置ItemsControl/ListView #

这里以ItemsControl为例，如果你用ListView，只需要把ContentPresenter换成ListViewItem即可：

<ItemsControl ItemsSource="{Binding YourItemCollection}"
              AlternationCount="{Binding YourItemCollection.Count}"> <!-- 设为Item总数确保每个Item有唯一索引 -->
    <ItemsControl.Resources>
        <local:GridPositionConverter x:Key="GridPositionConverter"/>
    </ItemsControl.Resources>

    <!-- 定义带行列的Grid作为ItemsPanel -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/> <!-- 固定3列 -->
                </Grid.ColumnDefinitions>
                <!-- 这里可以先加几个默认行，或者后面动态生成 -->
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- 给每个Item容器设置Grid.Row和Grid.Column -->
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <!-- 绑定列号 -->
            <Setter Property="Grid.Column">
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource GridPositionConverter}">
                        <Binding Path="(ItemsControl.AlternationIndex)" RelativeSource="{RelativeSource Self}"/>
                        <Binding Source="3"/> <!-- 这里填你的固定列数 -->
                    </MultiBinding>
                </Setter.Value>
            </Setter>
            <!-- 绑定行号 -->
            <Setter Property="Grid.Row">
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource GridPositionConverter}" ConverterParameter="Row">
                        <Binding Path="(ItemsControl.AlternationIndex)" RelativeSource="{RelativeSource Self}"/>
                        <Binding Source="3"/> <!-- 这里填你的固定列数 -->
                    </MultiBinding>
                </Setter.Value>
            </Setter>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

方案2：动态生成RowDefinitions（如果行数不固定） #

如果你的Item数量不确定，需要动态生成对应的行，可以在后台代码中根据Item总数和列数来添加RowDefinition：

比如在Loaded事件中处理：

private void ItemsControl_Loaded(object sender, RoutedEventArgs e)
{
    var itemsControl = sender as ItemsControl;
    if (itemsControl == null || itemsControl.Items.Count == 0) return;

    const int ColumnCount = 3; // 你的固定列数
    int requiredRows = (int)Math.Ceiling((double)itemsControl.Items.Count / ColumnCount);

    // 获取ItemsPanel中的Grid
    var grid = itemsControl.ItemsPanel.LoadContent() as Grid;
    if (grid == null) return;

    // 清空现有行，添加需要的行
    grid.RowDefinitions.Clear();
    for (int i = 0; i < requiredRows; i++)
    {
        grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    }
}

额外提醒：如果只是简单网格布局，试试UniformGrid #

如果你的需求只是让子元素自动按行列排列，不需要复杂的RowDefinition/ColumnDefinition设置（比如不等高宽），可以直接用UniformGrid作为ItemsPanel，它会自动分配行列，代码更简单：

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <UniformGrid Columns="3"/> <!-- 自动根据Item数量生成行 -->
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

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