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

The following example shows how to implement data binding to UXTreeView by specifying the member path properties.

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 you the how to bind hierarchical data using member path properties.

To bind the collection data, you set the CollectionMemberPath property to the object's member that represents a collection of items. You can also set the member properties through ItemContainerStyle in the case that the child item has different member properties.

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. Notice that the DisplayMemberPath in UXTreeView and ItemContainerStyle property has a different value, whic means that the DisplayMemberPath property for the child is different from its parent.

CompanySection.xaml
Copy Code 
<Intersoft:UXPage...
    xmlns:ViewModel="clr-namespace:CompanySection.ViewModels"
    >
    <Intersoft:UXPage.Resources>
        <ViewModel:CompanySectionViewModel x:Key="CompanySectionViewModel" />
    </Intersoft:UXPage.Resources>
    <Grid x:Name="LayoutRoot" DataContext="{StaticResource CompanySectionViewModel}">
        <Intersoft:UXTreeView ItemsSource="{Binding CompanySections}" DisplayMemberPath="Name" CollectionMemberPath="Employees">
            <Intersoft:UXTreeView.ItemContainerStyle>
                <Style TargetType="Intersoft:UXTreeViewItem">
                    <Setter Property="DisplayMemberPath" Value="EmployeeName" />
                    <Setter Property="CollectionMemberPath" Value="Employees" />
                </Style>
            </Intersoft:UXTreeView.ItemContainerStyle>
        </Intersoft:UXTreeView>
        </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