WPF DataGrid 无法查看超过容器高度的图片

在 WPF 项目中，我使用 DataGrid 展示包含图片的数据。

但是实际使用时发现，鼠标滚轮滚动并不顺畅，尤其是图片较多时，滚动体验比较差。

后来我放弃使用 DataGrid，改成 ScrollViewer + ItemsControl，问题就解决了。

问题

原来的界面使用 DataGrid 展示数据：

<DataGrid ItemsSource="{Binding Items}"
          AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="名称"
                            Binding="{Binding Name}" />

        <DataGridTemplateColumn Header="图片">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding Image}"
                           Width="120"
                           Height="90" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

这种方式在数据量较小时没有明显问题，但是实际操作时，鼠标滚轮的体验并不理想。

对于图片浏览这种场景，DataGrid 本身也不是最合适的控件。

解决方案

如果界面主要是展示图片，而不是展示一个真正的二维表格，可以考虑使用：

ScrollViewer
    └── ItemsControl
            └── 图片列表

例如：

<ScrollViewer VerticalScrollBarVisibility="Auto"
              HorizontalScrollBarVisibility="Disabled">

    <ItemsControl ItemsSource="{Binding Items}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border Margin="8">
                    <Image Source="{Binding Image}"
                           Width="160"
                           Height="120"
                           Stretch="Uniform" />
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

</ScrollViewer>

这样图片会自动排列，并且整个区域由 ScrollViewer 负责滚动。

如果图片较多，就可以自然地使用鼠标滚轮上下浏览。

为什么这样更合适？

DataGrid 更适合：

• 行和列组成的数据
• 编辑、排序、筛选
• 表格形式的数据展示

而图片浏览更接近：

一个可以滚动的图片集合。

因此使用 ItemsControl + WrapPanel + ScrollViewer 会更加简单，也更符合这个场景。

如果只需要纵向列表

如果不需要图片自动换行，也可以简单地使用 ItemsControl + StackPanel：

<ScrollViewer VerticalScrollBarVisibility="Auto">
    <ItemsControl ItemsSource="{Binding Items}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</ScrollViewer>

总结

这次的问题让我发现：

不要为了展示数据而强行使用 DataGrid。

如果数据本身更接近图片、卡片或者普通内容列表，那么 ScrollViewer + ItemsControl 往往是更合适的选择。

对于我的这个场景，换成 ScrollViewer 后，鼠标滚轮的使用体验明显更自然。