TreeView添加多重嵌套绑定示例

This commit is contained in:
ImLuJian
2023-07-15 11:20:42 +08:00
parent e3bf028b7f
commit 816af5a7b1
2 changed files with 106 additions and 40 deletions

View File

@@ -4,6 +4,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:models="using:Semi.Avalonia.Demo.Pages"
xmlns:vm="clr-namespace:Semi.Avalonia.Demo.Pages"
d:DesignHeight="450"
d:DesignWidth="800"
@@ -11,46 +12,69 @@
x:DataType="vm:TreeViewVm"
mc:Ignorable="d">
<StackPanel HorizontalAlignment="Left">
<TreeView>
<TreeViewItem Header="Level 1">
<TreeViewItem Header="Level 2" />
<TreeViewItem Header="Level 2" />
<TreeViewItem Header="Level 2" />
<TreeViewItem Header="Level 2" />
<TreeViewItem Header="Level 2">
<TreeViewItem Header="Level 3" />
<TreeViewItem Header="Level 3" />
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel>
<TextBlock>Layer 1</TextBlock>
<TextBlock>Layer 2</TextBlock>
<TextBlock>Layer 3</TextBlock>
</StackPanel>
</TreeViewItem.Header>
<TreeViewItem Header="Level 4" />
<TreeViewItem Header="Level 4" />
<TreeViewItem Header="Level 4" />
<TreeViewItem Header="Level 4" />
<TreeViewItem Header="Level 4" />
<TreeViewItem Header="Level 4" />
<Border Theme="{StaticResource CardBorder}">
<TreeView>
<TreeViewItem Header="Level 1">
<TreeViewItem Header="Level 2" />
<TreeViewItem Header="Level 2" />
<TreeViewItem Header="Level 2" />
<TreeViewItem Header="Level 2" />
<TreeViewItem Header="Level 2">
<TreeViewItem Header="Level 3" />
<TreeViewItem Header="Level 3" />
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel>
<TextBlock>Layer 1</TextBlock>
<TextBlock>Layer 2</TextBlock>
<TextBlock>Layer 3</TextBlock>
</StackPanel>
</TreeViewItem.Header>
<TreeViewItem Header="Level 4" />
<TreeViewItem Header="Level 4" />
<TreeViewItem Header="Level 4" />
<TreeViewItem Header="Level 4" />
<TreeViewItem Header="Level 4" />
<TreeViewItem Header="Level 4" />
</TreeViewItem>
<TreeViewItem Header="Level 3" />
<TreeViewItem Header="Level 3" />
<TreeViewItem Header="Level 3" />
<TreeViewItem Header="Level 3" />
<TreeViewItem Header="Level 3" />
<TreeViewItem Header="Level 3" />
<TreeViewItem Header="Level 3" />
</TreeViewItem>
<TreeViewItem Header="Level 3" />
<TreeViewItem Header="Level 3" />
<TreeViewItem Header="Level 3" />
<TreeViewItem Header="Level 3" />
<TreeViewItem Header="Level 3" />
<TreeViewItem Header="Level 3" />
<TreeViewItem Header="Level 3" />
</TreeViewItem>
</TreeViewItem>
</TreeView>
<TreeView ItemsSource="{Binding Items}">
<TreeView.ItemTemplate>
<TreeDataTemplate ItemsSource="{Binding Items}">
<TextBlock Text="{Binding Name}" />
</TreeDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
</TreeView>
</Border>
<Border Theme="{StaticResource CardBorder}">
<TreeView Margin="0,10" ItemsSource="{Binding Items}">
<TreeView.ItemTemplate>
<TreeDataTemplate ItemsSource="{Binding Items}">
<TextBlock Text="{Binding Name}" />
</TreeDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
</Border>
<Border Theme="{StaticResource CardBorder}">
<TreeView ItemsSource="{Binding MultipleLevelItems}">
<TreeView.DataTemplates>
<TreeDataTemplate DataType="models:FirstItem" ItemsSource="{Binding SecondItems}">
<TextBlock Text="{Binding Name}" />
</TreeDataTemplate>
<TreeDataTemplate DataType="models:SecondItem" ItemsSource="{Binding ThirdItemItems}">
<TextBlock Text="{Binding Name}" />
</TreeDataTemplate>
<TreeDataTemplate DataType="models:ThirdItem">
<TextBlock Text="{Binding Name}" />
</TreeDataTemplate>
</TreeView.DataTemplates>
</TreeView>
</Border>
</StackPanel>
</UserControl>