How to resolve the application of binding hierarchical data to WPF

There are multiple types of hierarchical data in actual project applications. WPF provides a good data binding mechanism. The ListBox and TreeView controls are used most frequently.

I. Differences between ListBox and TreeView controls
1. ListBox displays single-level data sets. TreeView can display single-level and multi-level data sets;
2. You can use ListBox to display good data display results on the UI Layer, and sort, group, and filter data sets;
3. The TreeView is displayed as a multi-level dataset in a tree structure. The Templete and Style attributes can also define a good data display effect;

Ii. ListBox control example
1. Bind data to The ListBox group:
Use the ListBox. GridStyle label to define the HeaderTemplate attribute to define the appearance of the group header:

Copy codeThe Code is as follows:
<ListBox ItemSource = "{Binding Path = Data}">
<ListBox. GridStyle>
<GroupStyle. HeaderTemplate>
<DataTemplate>
<Stackpanel>
<Image Source = "xxx.jpg"/>
<Label Content = "C:"/>
<Stackpanel>
</DataTemplate>
</GroupStyle. HeaderTemplate>
</ListBox. GridStyle>
......
</ListBox>

In this way, you can create a file manager similar to WINDOWS:

2. Some experiences in Listbox:
/1 if you want to implement a nice interface effect similar to WINDOWS and group it, you need to customize the GroupStyle style. Otherwise, WPF will use the built-in GroupStyle. You can also reference the GroupStyle. Default static attribute.
/2 ListBox can only define one layer of Data Structure, and use ListBox again in items in ListBox. The ItemSource in ListBox does not inherit the data set in the Item source in the previous ListBox, the following data sets are available:Copy codeThe Code is as follows: public List <Groups> groups = new List <Groups> (); groups. Add (new Group );........

Copy codeThe Code is as follows: public class Group {
Public int Id {get; set ;}
Public string Name {get; set ;}
Private List <Box> boxes = new List <Box> ();
Public List <Box> Boxes {
Get {return boxes ;}
}
}

The ItemSource Binding List <Groups> data set of Listbox. If the ListBox Binding List <Box> In the Item is set, The ListBox in the Item cannot obtain the List <Box> data set;

3. TreeView control example
1. Use TreeView to bind a multi-layer data set as shown in the preceding data set:Copy codeThe Code is as follows:
<TreeView x: Name = "maintree" FocusVisualStyle = "{x: Null}" ItemsSource = "{Binding Groups}">
<TreeView. ItemContainerStyle>
<Style TargetType = "{x: Type TreeViewItem}">
<Setter Property = "IsExpanded" Value = "{Binding IsExpanded, Mode = TwoWay}"/>
<Setter Property = "IsSelected" Value = "{Binding IsSelected, Mode = TwoWay}"/>
<Setter Property = "FontWeight" Value = "Normal"/>
<Style. Triggers>
<Trigger Property = "IsSelected" Value = "True">
<Setter Property = "FontWeight" Value = "Bold"/>
</Trigger>
</Style. Triggers>
</Style>
</TreeView. ItemContainerStyle>
<TreeView. Resources>
<HierarchicalDataTemplate DataType = "{x: Type m: GroupVO}" ItemsSource = "{Binding Boxes}">
<StackPanel Orientation = "Horizontal">
<Label Content = "{Binding Path = FriendlyName}"> </Label>
<CheckBox VerticalAlignment = "Center" IsChecked = "{Binding Path = IsSelected}"> </CheckBox>
</StackPanel>
</HierarchicalDataTemplate>

<DataTemplate DataType = "{x: Type m: BoxVO}">
<Grid Margin = "0, 5, 10" MouseDown = "maintree_MouseDown" Loaded = "Grid_Loaded">
<Grid. RowDefinitions>
<RowDefinition> </RowDefinition>
</Grid. RowDefinitions>
<Grid. ColumnDefinitions>
<ColumnDefinition Width = "*"> </ColumnDefinition>
<ColumnDefinition Width = "6 *"> </ColumnDefinition>
</Grid. ColumnDefinitions>
<Image Source = "/Resources/Images/shgbit.png" Width = "50" verticalignment = "Top" Grid. column = "0" Grid. row = "0"> </Image>
<Label Grid. rowSpan = "2" Grid. row = "0" Grid. column = "0" Margin = "5, 5, 0, 0" Content = "{Binding Path = FriendlyName}"> </Label>
</DataTemplate>
</TreeView. Resources>
</TreeView>

The HierarchicalDataTemplate attribute is a hierarchical data template that inherits the hierarchical structure of the data set. HierarchicalDataTemplate must be used to represent the hierarchical dependency of the tree.
TwoWay is used to bind data to a property. When the source data or target is changed, the data of the other party is updated. A typical application in Hierarchy Tree Representation is to use CheckBox to select subnodes and transfer the status in the unselected node.