WinUI3中ListView绑定List<VisualStateGroup>作为ItemsSource报错原因咨询

错误原因 #

VisualStateGroup是UI元素体系的一部分，它已经属于UILayoutRoot的VisualTree。当你直接把它作为ListView的数据源项时，ListView的ItemContainer会尝试将这个VisualStateGroup纳入自己的VisualTree中，但一个UI元素不能同时属于两个不同的VisualTree，这就触发了“值不在预期范围内”的错误。

而你用字符串或手动添加字符串能正常工作，是因为字符串是纯数据对象，不属于任何VisualTree，不会有这个冲突。

解决方案 #

不要直接绑定VisualStateGroup对象，而是创建一个纯数据模型类，把需要展示的属性（比如Name）从VisualStateGroup复制到模型里，再绑定这个模型集合。

步骤1：创建数据模型类 #

public class VisualStateGroupModel
{
    public string Name { get; set; }
    // 如需展示其他属性，可在此添加对应字段
}

步骤2：转换VisualStateGroup到模型集合 #

修改后台代码，将原集合转换为模型集合：

public ObservableCollection<VisualStateGroupModel> LayoutRootVisualStateGroupList { get; set; }

public FooPage()
{
    // ...
    var originalGroups = VisualStateManager.GetVisualStateGroups(ShellPage.ViewModel.UILayoutRoot);
    LayoutRootVisualStateGroupList = new ObservableCollection<VisualStateGroupModel>(
        originalGroups.Select(g => new VisualStateGroupModel { Name = g.Name })
    );
}

步骤3：修改XAML绑定配置 #

更新DataTemplate的x:DataType和绑定路径，注意要在Page根元素添加项目命名空间引用（比如xmlns:local="clr-namespace:你的项目命名空间"）：

<Page.Resources>
    <DataTemplate x:Key="ListViewTemplate" x:DataType="local:VisualStateGroupModel">
        <TextBlock x:Name="groupName"  Text="{x:Bind Name}" Margin="0,5,0,5" />
    </DataTemplate>
</Page.Resources>

额外说明 #

这个问题和变更通知无关——你使用的ObservableCollection已经实现了正确的变更通知接口。核心矛盾是UI元素不能跨VisualTree复用，必须用纯数据模型作为绑定源。

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