zhaoyushun1999/Semi.Avalonia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TreeView添加多重嵌套绑定示例

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
demo/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml
View File

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

44
demo/Semi.Avalonia.Demo/Pages/TreeViewDemo.axaml.cs
View File

@ -19,6 +19,8 @@ public class TreeViewVm : ObservableObject
{ {
public ObservableCollection<TreeViewItemVm> Items { get; set; } public ObservableCollection<TreeViewItemVm> Items { get; set; }
public ObservableCollection<FirstItem>? MultipleLevelItems { get; set; }
public TreeViewVm() public TreeViewVm()
{ {
Items = new ObservableCollection<TreeViewItemVm>() Items = new ObservableCollection<TreeViewItemVm>()
@ -33,6 +35,25 @@ public class TreeViewVm : ObservableObject
}, },
}, },
}; };
MultipleLevelItems = new();
for (int i = 1; i < 6; i++)
{
FirstItem firstItem = new FirstItem { Id = i, Name = $"FirstItem {i}" };
firstItem.SecondItems = new();
for (int j = 1; j < 6; j++)
{
SecondItem secondItem = new SecondItem { Id = j, Name = $"SecondItem {j}" };
secondItem.ThirdItemItems = new();
for (int k = 1; k < 6; k++)
{
ThirdItem thirdItem = new ThirdItem { Id = k, Name = $"ThirdItem {k}" };
secondItem.ThirdItemItems.Add(thirdItem);
}
firstItem.SecondItems.Add(secondItem);
}
MultipleLevelItems.Add(firstItem);
}
} }
} }
@ -41,4 +62,25 @@ public partial class TreeViewItemVm : ObservableObject
public ObservableCollection<TreeViewItemVm> Items { get; set; } public ObservableCollection<TreeViewItemVm> Items { get; set; }
public string Name { get; set; } public string Name { get; set; }
public string Id { get; set; } public string Id { get; set; }
} }
public class ItemBase
{
public int Id { get; set; }
public string? Name { get; set; }
}
public class FirstItem : ItemBase
{
public ObservableCollection<SecondItem>? SecondItems { get; set; }
}
public class SecondItem : ItemBase
{
public ObservableCollection<ThirdItem>? ThirdItemItems { get; set; }
}
public class ThirdItem : ItemBase
{
}