WinUI3渲染大量CheckBox触发XamlParseException异常求助

问题原因 #

这个异常的核心是大量CheckBox控件一次性初始化时，默认的AnimatedIcon资源加载超出了XAML解析的处理阈值。WinUI3的CheckBox默认使用AnimatedIcon实现勾选状态的动画效果，当你一次性渲染100个列表项、每个项包含24个CheckBox时，总共有2400个带动画资源的控件需要同时初始化，短时间内大量动画资源加载会导致XAML解析器在赋值AnimatedIcon.Source时失败，抛出XamlParseException。

Button控件默认没有绑定这类动画资源，30个列表项对应的720个CheckBox则处于XAML解析的资源处理阈值内，因此不会触发异常。

解决方案 #

1. 禁用CheckBox动画，改用静态图标 #

直接关闭CheckBox默认动画或替换为静态图标，减少单个控件的资源开销：

<CheckBox UseSystemFocusVisuals="False">
    <CheckBox.Template>
        <ControlTemplate TargetType="CheckBox">
            <Grid>
                <!-- 用静态FontIcon替代AnimatedIcon -->
                <FontIcon x:Name="CheckGlyph" 
                          Glyph="&#xE73E;" 
                          Opacity="0" 
                          Foreground="{ThemeResource CheckBoxForegroundChecked}"/>
                <FontIcon x:Name="IndeterminateGlyph" 
                          Glyph="&#xE73C;" 
                          Opacity="0" 
                          Foreground="{ThemeResource CheckBoxForegroundChecked}"/>
                <ContentPresenter Margin="12,0,0,0" 
                                  Content="{TemplateBinding Content}" 
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="CheckGlyph" Property="Opacity" Value="1"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="{x:Null}">
                    <Setter TargetName="IndeterminateGlyph" Property="Opacity" Value="1"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </CheckBox.Template>
</CheckBox>

2. 开启ItemsRepeater的虚拟化 #

ItemsRepeater默认不开启虚拟化，需配合ScrollViewer和虚拟化面板，仅渲染可见区域的控件，从根源减少一次性初始化的控件数量：

<ScrollViewer Height="400">
    <ItemsRepeater ItemsSource="{x:Bind ViewModel.Collection}">
        <ItemsRepeater.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsStackPanel VirtualizingStackPanel.VirtualizationMode="Recycling"/>
            </ItemsPanelTemplate>
        </ItemsRepeater.ItemsPanel>
        <DataTemplate x:DataType="x:Int32">
            <StackPanel Orientation="Horizontal">
                <!-- 你的CheckBox列表 -->
            </StackPanel>
        </DataTemplate>
    </ItemsRepeater>
</ScrollViewer>

开启虚拟化后，无论集合有多少项，只会渲染当前可见区域的列表项，控件数量大幅减少，避免资源过载。

3. 分批加载集合数据 #

如果不需要一次性展示所有数据，可分批初始化集合，比如先加载30项，用户滚动到底部再加载更多：

// 建议改用ObservableCollection，添加数据时自动通知UI更新
public ObservableCollection<int> Collection { get; set; } = new();

public ViewModelConstructor()
{
    // 加载第一批数据
    LoadBatch(30);
}

private void LoadBatch(int count)
{
    for (int i = 0; i < count; i++)
    {
        Collection.Add(0);
    }
}

// 绑定ScrollViewer的ViewChanged事件，滚动到底部时触发加载
private void ScrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
    var scrollViewer = sender as ScrollViewer;
    if (scrollViewer != null && scrollViewer.VerticalOffset >= scrollViewer.ScrollableHeight - 10)
    {
        LoadBatch(30);
    }
}

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