Wpf/silverlight Use of hierarchicaldatatemplate templates

On a summary of the Wpf/silverlight Template, this article continues on an article, mainly introduces the use of Hierarchicaldatatemplate method. Hierarchicaldatatemplate inherits from DataTemplate, which is called "Hierarchical data Template", which is mainly applied to the data collection, and its typical application is data binding to the TreeView control. The next step is a demonstration under Silverlight 5. Recently, there is a program to sell herbal tea compared to the fire, called the Chinese sound, the inside of the tutor and its singer group is a hierarchical structure, we will use it to make an example.

First we need to prepare a hierarchical set of data that defines a singer class:

Singer Class

Then define a tutor class, the Mentor class has a property is the singer's collection, the code is as follows:

Tutor Class

Next, organize a hierarchical data collection of mentors and singers in code:

good sound level data collection

With the data collection, we can write our hierarchicaldatatemplate template in XAML, we define two templates, one teachertemplate represents the Mentor node, and one singertemplate represents the singer node, And the teachertemplate in the ItemTemplate designated as Singertemplate, the specific code is as follows:

<common:hierarchicaldatatemplate x:key= "Singertemplate" >                <stackpanel orientation= "Horizontal" Height = ">            <image source=" {Binding singerheader} "height=" "width=" "/> <textblock            text=" { Binding Singername} "margin=" 2,0,0,0 "verticalalignment=" Center "fontsize=" foreground= "Green"/> </                   stackpanel></common:hierarchicaldatatemplate>    <common:hierarchicaldatatemplate x:Key= " Teachertemplate "itemssource=" {Binding singerlist} "itemtemplate=" {StaticResource singertemplate} ">        < StackPanel orientation= "Horizontal" height= "> <image source=            " {Binding teacherheader} "height=" Width = "/>"            <textblock text= "{Binding teachername}" margin= "2,0,0,0" horizontalalignment= "Center"  Fontsize= "foreground=" Blue/>        </StackPanel></common:HierarchicalDataTemplate>

Under Silverlight, you need to add the following namespaces in your XAML code: xmlns:common= "Clr-namespace:system.windows;assembly=system.windows.controls"

After that, add a TreeView control to the main interface MainPage.xaml, adding a root node to the control, name Rootitem, and specify the ItemTemplate of that root node as the one we just wrote in the hierarchy template. Teachertemplate:

<sdk:treeview x:name= "Goodvoicetree" width= "$" grid.row= "1" grid.column= "0" horizontalalignment= "Stretch" Verticalcontentalignment= "Stretch" >    <sdk:treeviewitem x:name= "Rootitem" itemtemplate= "{StaticResource Teachertemplate} "isexpanded=" True ">         <sdk:TreeViewItem.HeaderTemplate>              <DataTemplate>                 <stackpanel orientation= "Horizontal" >                    <image source= "images/China Good Sound" png "height=" width= "24"/ >                    <textblock text= "China good Voice" margin= "2,0,0,0" verticalalignment= "Center" fontsize= "foreground=" "Red"/>                 </StackPanel>              </DataTemplate>         </sdk:TreeViewItem.HeaderTemplate>   </sdk: Treeviewitem></sdk:treeview>

Next, we bind our data collection for the tree control's root node Rootitem to show our tree controls:

This. Rootitem.itemssource = Goodvoice.goodvoicedata;

Running results such as:

In fact, in our actual development project some of the data hierarchy is fixed, such as the above example, fixed the instructor and the singer two levels, fixed level we can control the style of each layer is convenient (directly in the template of each layer can be produced). But there are a lot of times when the level of the data is not fixed, and we're going to do a simple demo:

First, define a TreeNode class that represents the data model for each layer:

TreeNode Code

Also organize a hierarchical collection of data in code:

Treenodedata

Hierarchical templates written in XAML:

<common:hierarchicaldatatemplate x:key= "Treenodetemplate" itemssource= "{Binding childnode}" >    < StackPanel orientation= "Horizontal" height= ">        <image source=" {Binding nodeimage} "height=" Width= "24 "/>        <textblock text=" {Binding NodeName} "margin=" 2,0,0,0 "horizontalalignment=" Center "  fontsize=" 12 " foreground= "Blue"/>    </StackPanel></common:HierarchicalDataTemplate>

Here we need to pay attention to a problem: we define a Boolean property in the TreeNode class IsOpen, that is, using this property to control the expansion of the node of our tree is closed state: True for the node expansion, False to represent the node closed. If we don't do this, after we bind the TreeView control, the initial state of the tree is closed, but this method is limited to WPF and Silverlight 5, SILVERLIGHT4 and the following versions are not a drop, do not know is not a Silverlight bug.

<sdk:treeview x:name= "Mytree" width= "$" grid.row= "1" grid.column= "1"  itemtemplate= "{StaticResource Treenodetemplate} "                                  horizontalalignment=" Stretch "verticalcontentalignment=" Stretch ">        <sdk: treeview.itemcontainerstyle>            <style targettype= "Sdk:treeviewitem" >                 <setter Property= " IsExpanded "value=" {Binding IsOpen} "/>            </Style>        </sdk:TreeView.ItemContainerStyle>           </sdk:TreeView>

Here we use the Itemcontainerstyle property of the TreeView mentioned in the previous section to bind the Isexpander properties of all TreeViewItem in the TreeView.

Also bind our data collection to our TreeView control:

This. Mytree.itemssource = treenodedata.treenodelist;

Since we set the IsOpen property of the root node and child node B in the data collection to true, the two nodes are expanded and run as follows:

At this point, using the Hierarchicaldatatemplate hierarchy template to bind the TreeView control under Silverlight, the demo is complete, as for how to get the data from the TreeView node, We can get in the Selecteditemchanged event in the TreeView control, there is no code, you can download the source see.

SOURCE download

Wpf/silverlight Use of hierarchicaldatatemplate templates (RPM)