如何实现幻灯片查看器网格布局：全显图片且无空白？

我之前做图片网格布局的时候也踩过UniformGrid的这个坑——默认的行列分配逻辑确实会在空间足够的情况下，硬把项分到多余的行里，留下难看的空白。针对你的幻灯片查看器需求，这里有两个实用的解决方案，都能实现「无滚动、自适应窗口、填满空间无空白」的效果：

默认UniformGrid的行列计算逻辑是尽量让行列数接近，但不会优先尝试用最少的行/列来容纳所有项。我们可以重写它的MeasureOverride方法，自定义一套更智能的分配逻辑：

1. 先计算当前窗口宽度下最多能容纳多少列（基于项的最小尺寸）
2. 根据总项数算出需要的行数，验证这些行是否能在窗口高度内放下
3. 如果高度超出，就减少列数重新计算，直到找到最合适的行列组合

以下是具体的代码实现：

public class SmartUniformGrid : UniformGrid
{
    protected override Size MeasureOverride(Size constraint)
    {
        int itemCount = InternalChildren.Count;
        if (itemCount == 0)
            return base.MeasureOverride(constraint);

        // 获取单个项的最小期望尺寸
        UIElement firstItem = InternalChildren[0];
        firstItem.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
        Size minItemSize = firstItem.DesiredSize;

        int optimalColumns = 1;
        // 先尽可能增加列数，直到列宽总和超过可用宽度
        while ((optimalColumns + 1) * minItemSize.Width <= constraint.Width)
        {
            optimalColumns++;
        }

        // 计算对应需要的行数
        int requiredRows = (int)Math.Ceiling((double)itemCount / optimalColumns);

        // 如果行数对应的总高度超出可用空间，就减少列数重新计算
        while (requiredRows * minItemSize.Height > constraint.Height && optimalColumns > 1)
        {
            optimalColumns--;
            requiredRows = (int)Math.Ceiling((double)itemCount / optimalColumns);
        }

        // 设置最终的行列数
        Columns = optimalColumns;
        Rows = requiredRows;

        return base.MeasureOverride(constraint);
    }
}

在XAML中直接使用这个自定义控件即可：

<ListBox ItemsSource="{Binding YourImageCollection}">
    <ListBox.ItemPanel>
        <ItemsPanelTemplate>
            <local:SmartUniformGrid />
        </ItemsPanelTemplate>
    </ListBox.ItemPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}" Stretch="UniformToFill" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

如果不想自定义控件，也可以用WrapPanel配合绑定逻辑来实现。核心思路是动态计算每个项的尺寸，让它们刚好填满WrapPanel的可用空间：

首先在ViewModel中添加计算逻辑：

public int ImageCount { get; set; } // 你的图片总数
public double ContainerWidth { get; set; } // ListBox的实际宽度
public double MinItemWidth { get; set; } = 150; // 图片项的最小宽度

public int CurrentColumns => Math.Max(1, (int)(ContainerWidth / MinItemWidth));
public double ItemSize => ContainerWidth / CurrentColumns; // 保持正方形，可按需调整高度比例

然后在XAML中绑定尺寸：

<ListBox ItemsSource="{Binding YourImageCollection}" 
         Width="{Binding ContainerWidth}"
         SizeChanged="ListBox_SizeChanged">
    <ListBox.ItemPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListBox.ItemPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"
                   Width="{Binding DataContext.ItemSize, RelativeSource={RelativeSource AncestorType=ListBox}}"
                   Height="{Binding DataContext.ItemSize, RelativeSource={RelativeSource AncestorType=ListBox}}"
                   Stretch="UniformToFill" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

最后在窗口尺寸变化时更新容器宽度，触发绑定刷新：

private void ListBox_SizeChanged(object sender, SizeChangedEventArgs e)
{
    var listBox = sender as ListBox;
    YourViewModel.ContainerWidth = listBox.ActualWidth;
    YourViewModel.OnPropertyChanged(nameof(YourViewModel.CurrentColumns));
    YourViewModel.OnPropertyChanged(nameof(YourViewModel.ItemSize));
}

两个方案都建议把图片的Stretch属性设为UniformToFill，既保证填满项的空间，又不会让图片变形。自定义控件方案更简洁，适合纯XAML场景；WrapPanel方案则更灵活，适合需要额外尺寸逻辑的场景。

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