编辑 2: 根据 Peter Duniho 的建议,我正在用一个更简单的示例替换我的问题的原始文本和对我原始代码的引用。
我正在开发一个 WinUI 3 应用程序。主窗口有一个TreeView
,其层次结构如下:顶层项目的类型为CarMake
,每个项目CarMake
可以有 0 个或多CarModel
个子项。该窗口有一个ObservableCollection<CarMake>
名为的属性Cars
,它是顶层CarMake
s 的源,每个窗口都有CarMake
一个ObservableCollection<CarModel>
属性,它CarModels
是其子级的源TreeView
。
CarMakeView
下面分别是和CarModelView
类型的 XAML 定义:
<StackPanel Orientation="Horizontal"
Padding="12"
x:Class="Cars.View.CarMakeView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock Text="{x:Bind CarMake.Name}" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal"
x:Class="Cars.View.CarModelView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock Text="{x:Bind Path=CarModel.Name}" />
</StackPanel>
CarMake.cs
和CarModel.cs
:
namespace Cars.Model
{
public class CarMake
{
public string? Name { get; set; }
public ObservableCollection<CarModel> CarModels { get; set; } = new();
}
}
namespace Cars.Model
{
public class CarModel
{
public string? Name { get; set; }
}
}
这是MainWindow
.
<Window
<!-- imports etc. -->
>
<Grid>
<Grid.Resources>
<DataTemplate x:Key="CarMakeTemplate" x:DataType="model:CarMake">
<TreeViewItem ItemsSource="{x:Bind CarModels}">
<viewModel:CarMakeView CarMake="{Binding}"/>
</TreeViewItem>
</DataTemplate>
<DataTemplate x:Key="CarModelTemplate" x:DataType="model:CarModel">
<TreeViewItem>
<viewModel:CarModelView CarModel="{Binding}"/>
</TreeViewItem>
</DataTemplate>
<utility:CarItemSelector
x:Key="CarItemSelector"
CarMakeTemplate="{StaticResource CarMakeTemplate}"
CarModelTemplate="{StaticResource CarModelTemplate}" />
</Grid.Resources>
<TextBlock/>
<TreeView Grid.Row="1" ItemsSource="{x:Bind Cars}"
ItemTemplateSelector="{StaticResource CarItemSelector}">
</TreeView>
</Grid>
</Window>
最后是MainWindow
. 请注意,我Cars
使用硬编码的集合初始化属性CarMake
,每个集合都有关联CarModel
的 s。这定义了我们希望在 UI 中看到的数据层次结构:
public sealed partial class MainWindow : Window
{
public ObservableCollection<CarMake> Cars { get; set; } =
new ()
{
new CarMake { Name = "Chevrolet", CarModels = { new CarModel { Name = "Camaro" }, new CarModel { Name = "Blazer" }, new CarModel { Name = "Beretta" } } },
new CarMake { Name = "Land Rover", CarModels = { new CarModel { Name = "Discovery" }, new CarModel { Name = "LR3" }, new CarModel { Name = "Range Rover" } } },
new CarMake { Name = "Quadra", CarModels = { new CarModel { Name = "Turbo-R 740" }, new CarModel { Name = "Type-66 Avenger" }} },
new CarMake { Name = "Powell Motors", CarModels = { new CarModel { Name = "The Homer" }}}
};
public MainWindow()
{
this.InitializeComponent();
}
}
这是我所期望的:在 UI 中,汽车模型应该出现在汽车的视觉子代中,它们在代码中被分配给它们。因此,例如,“The Homer”,并且只有“The Homer”,应该出现在“Powell Motors”的孩子中。
问题是:启动应用程序并展开和折叠至少一个汽车制造商项目后,汽车模型开始显示在错误的汽车制造商下方。例如,“The Homer”汽车模型可能出现在“Chevrolet”下,而不是“Powell Motors”下。每当一个顶级汽车制造项目被折叠然后展开时,它下面就会出现一组全新的汽车模型,显然是从它的邻居那里随机采购的。这几乎就像 UI 框架只是在玩弄CarModel
s 并将它们粘贴在任何CarMake
感觉之下,而不是尊重由数据定义的层次结构。
我想知道的是:我需要更改什么以便汽车型号名称仅出现在 UI 中指定的父级下?另外,我想了解导致此问题的原因。
我知道 WinUI 3 现在绝对是最前沿的,所以我的一部分希望它是框架中的一个错误,而不是我做过的事情。我试图包含我认为与问题相关的所有代码,但如果问题出在其他地方,这里有一个指向 GitHub 存储库的链接——它非常少,只有足够的代码来说明问题,并且只需几秒钟即可构建在 Visual Studio 中。