TrreView 遞迴繫結資料來源
阿新 • • 發佈:2020-10-29
效果如圖
資料結構
public class DisplayViewModel
{
public string Name { get; set; }
public List<DisplayViewModel> Children { get; set; }
}
前端TreeView通過ItemTemplate
為其子級設定樣式
<TreeView x:Name="treeView"> <TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Children}"> <StackPanel> <TextBlock VerticalAlignment="Center" FontSize="18" Text="{Binding Name}" Margin="2,0,0,0"></TextBlock> </StackPanel> </HierarchicalDataTemplate> </TreeView.ItemTemplate> </TreeView>
設定資料來源
List<DisplayViewModel> vm = new List<DisplayViewModel>(); DisplayViewModel oneData = new DisplayViewModel() { Name="1", Children=new List<DisplayViewModel>()}; oneData.Children.Add(new DisplayViewModel() { Name = "1-1", Children = new List<DisplayViewModel>() { new DisplayViewModel(){Name="1-1-1",Children=new List<DisplayViewModel>()} } }); oneData.Children.Add(new DisplayViewModel() { Name = "1-2", Children = new List<DisplayViewModel>() { new DisplayViewModel(){Name="1-2-1",Children=new List<DisplayViewModel>() { new DisplayViewModel(){Name="1-2-1-2",Children=new List<DisplayViewModel>()} } } } }); vm.Add(oneData); vm.Add(new DisplayViewModel() { Name = "2", Children = new List<DisplayViewModel>() }); treeView.ItemsSource = vm;