AvaloniaUI ItemsControl如何实现多列布局并支持虚拟化？

可行实现方案 #

WPF原生的UniformGrid不支持虚拟化，而VirtualizingStackPanel仅支持单列，要同时实现多列布局和虚拟化，推荐两种方式：

方案1：使用第三方VirtualizingWrapPanel #

通过NuGet安装Extended.Wpf.Toolkit，该库提供的VirtualizingWrapPanel同时支持流式多列布局和虚拟化。修改后的代码如下：

<!-- 先添加命名空间 -->
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"

<ScrollViewer Height="800">
    <ItemsControl ItemsSource="{Binding Monitors}" 
                  VirtualizingStackPanel.IsVirtualizing="True"
                  VirtualizingStackPanel.VirtualizationMode="Recycling">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <!-- 替换为VirtualizingWrapPanel并指定列数 -->
                <xctk:VirtualizingWrapPanel Columns="4" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <!-- 保留原有ItemTemplate -->
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border Background="#102a43" CornerRadius="20" Margin="10 5 10 5">
                    <Grid ColumnDefinitions="125, 125, 75, 75">
                        <TextBlock Grid.Column="0" Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        <TextBlock Grid.Column="1" Text="78C" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        <TextBox Grid.Column="2" Text="-57C" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        <TextBox Grid.Column="3" Text="129C" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Grid>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>

方案2：自定义虚拟化网格面板 #

如果不想依赖第三方库，可以自行实现继承自VirtualizingPanel的自定义面板，重写MeasureOverride和ArrangeOverride方法，只加载可见区域内的项。该方式适合需要高度自定义布局逻辑的场景，但实现复杂度较高。

虚拟化核心要点 #

你之前的操作误区在于混淆了ItemsPanel（项容器布局面板）和ItemTemplate（单个项的UI模板）的职责，正确使用虚拟化需注意以下几点：

• 必须用支持虚拟化的面板：只有继承自VirtualizingPanel的容器（如VirtualizingStackPanel、VirtualizingWrapPanel）才能实现虚拟化，UniformGrid、普通WrapPanel这类面板会加载所有项，无虚拟化效果。
• 避免多余ScrollViewer嵌套：虚拟化需要面板获取准确的视口范围，如果外层额外嵌套ScrollViewer，会导致内部面板无法感知视口变化，虚拟化直接失效。若用ListView/ListBox，它们自带ScrollViewer，无需额外嵌套。
• 开启虚拟化开关：通过附加属性VirtualizingStackPanel.IsVirtualizing="True"启用虚拟化，VirtualizingStackPanel.VirtualizationMode="Recycling"可复用项容器，大幅提升性能（默认Standard模式会重复创建销毁容器）。
• 项尺寸需可预测：虚拟化面板需要计算可见区域能容纳的项数量，因此每个Item的尺寸要固定或可被面板正确计算，动态变化的尺寸会导致虚拟化逻辑出错。
• 可选替换为ListView/ListBox：这两个控件默认使用VirtualizingStackPanel作为ItemsPanel，自带ScrollViewer，虚拟化配置更省心，只需替换ItemsPanel为VirtualizingWrapPanel即可实现多列虚拟化。

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