Intersoft ClientUI Documentation
How-to: Bind Hierarchical Data to UXTreeView using HierarchicalDataTemplate (MVVM)
Intersoft ClientUI 8 > ClientUI Controls > Control Library > Navigation Controls Overview > UXTreeView > How-to: Bind Hierarchical Data to UXTreeView using HierarchicalDataTemplate (MVVM)

The UXTreeView and UXTreeViewItem support HierarchicalDataTemplate to flexibly display a hierarchical data. This example shows how to implement data binding to UXTreeView by using HierarchicalDataTemplate.

Example

Description

UXTreeView is a control that displays hierarchical data. You can display hierarchical data in UXTreeView by using either HierarchicalDataTemplate or specifying member path properties. This example shows how to bind hierarchical data using HierarchicalDataTemplate.

To create the data template, first, you declare the template in the ascending order and then specify the ItemsSource property of the HierarchicalDataTemplate to the data source for the child nodes. Next, you set the ItemTemplate property of the parent HierarchicalDataTemplate to the particular template that defines the structure for the child nodes.

This following example uses two HierarchicalDataTemplate resources. The first template applies to the lowest nodes in the tree and the second template applies to the items that contain those nodes.

Code

The following example shows the code listing for the CompanySection and Employee model. The CompanySection class generally contains simple properties that describe a company section object, such as Name and Employees property. The Employee class also has simple properties that describe an employee object, such as Name property. You can place this model in the Models folder in your Silverlight application.

CompanySection.cs (Model)
Copy Code 
public class CompanySection : ModelBase
{
    private string _name;
    private ObservableCollection<Employee> _employees;

    public string Name
    {
        get { return this._name; }
        set
        {
            if (this._name != value)
            {
                this._name = value;
                OnPropertyChanged("Name");
            }
        }
    }

    public ObservableCollection<Employee> Employees
    {
        get { return this._employees; }
        set
        {
            if (this._employees != value)
            {
                this._employees = value;
                OnPropertyChanged("Employees");
            }
        }
    }

    public CompanySection()
    {
        this.Employees = new ObservableCollection<Employee>();
    }

    public CompanySection(XElement x)
        : this()
    {
        this._name = x.Element("Name").Value.ToString();
        if (x.Elements("Employees").Count() > 0)
        {
            var employees = from a in x.Elements("Employees").Elements("Employee")
                            select new Employee(a);
            foreach (Employee item in employees)
            {
                this.Employees.Add(item);
            }
        }
    }
}
Employee.cs (Model)
Copy Code 
public class Employee : ModelBase
{
    private string _employeeName;
    public string EmployeeName
    {
        get { return this._employeeName; }
        set
        {
            if (this._employeeName != value)
            {
                this._employeeName = value;
                OnPropertyChanged("EmployeeName");
            }
        }
    }

    public Employee()
    { 
        
    }

    public Employee(XElement x)
        : this()
    {
        this._employeeName = x.Element("Name").Value.ToString();
    }
}

The following example shows the code listing for both the View and the ViewModel that describes the View respectively.

CompanySection.xaml
Copy Code 
<Intersoft:UXPage...    
    xmlns:ViewModel="clr-namespace:SLNavigationPane.ViewModels"
    >
    <Intersoft:UXPage.Resources>
        <ViewModel:CompanySectionViewModel x:Key="CompanySectionViewModel" />
    </Intersoft:UXPage.Resources>
    <Grid x:Name="LayoutRoot" DataContext="{StaticResource CompanySectionViewModel}">
        <Grid.Resources>
            <Intersoft:HierarchicalDataTemplate x:Key="EmployeeTemplate">
                <TextBlock Text="{Binding EmployeeName}" />
            </Intersoft:HierarchicalDataTemplate>
            <Intersoft:HierarchicalDataTemplate x:Key="SectionTemplate" ItemsSource="{Binding Employees}" ItemTemplate="{StaticResource EmployeeTemplate}">
                <TextBlock Text="{Binding Name}" />
            </Intersoft:HierarchicalDataTemplate>
        </Grid.Resources>
        <Intersoft:UXTreeView ItemsSource="{Binding CompanySections}" ItemTemplate="{StaticResource SectionTemplate}" />
        </Grid>
</Intersoft:UXPage>
CompanySectionViewModel.cs
Copy Code 
public class CompanySectionViewModel : ViewModelBase
{
    private ObservableCollection<CompanySection> _companySections;
    public ObservableCollection<CompanySection> CompanySections
    {
        get { return this._companySections; }
        set
        {
            if (this._companySections != value)
            {
                this._companySections = value;
                OnPropertyChanged("CompanySections");
            }
        }
    }

    public CompanySectionViewModel()
    {
        this.CompanySections = new ObservableCollection<CompanySection>();
        this.LoadSections();
    }

    private void LoadSections()
    {
        StreamResourceInfo resource = System.Windows.Application.GetResourceStream(
                new Uri("SLNavigationPane;component/Assets/Data/CompanySection.xml", UriKind.Relative));
        XDocument doc = XDocument.Load(resource.Stream);
        var sections = from x in doc.Elements("CompanySections").Elements("CompanySection")
                        select new CompanySection(x);
        foreach (CompanySection item in sections)
        {
            this.CompanySections.Add(item);
        }
        resource.Stream.Close();
    }
}
For more information on implementing MVVM design pattern, please see MVVM Pattern Overview.
See Also
UXTreeView Class
UXTreeViewItem Class

Concepts

UXTreeView
MVVM Pattern Overview