1. 程式人生 > 實用技巧 >TrreView 遞迴繫結資料來源

TrreView 遞迴繫結資料來源

效果如圖

資料結構

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;

示例程式碼

示例程式碼

參考資料

WPF下遞迴生成樹形資料繫結到TreeView上