Intersoft ClientUI Documentation
How-to: Bind UXTreeView CheckedItems Property to UXListBox
See Also Send Feedback
Intersoft ClientUI 7 > ClientUI Controls > Control Library > Navigation Controls Overview > UXTreeView > How-to: Bind UXTreeView CheckedItems Property to UXListBox

Glossary Item Box

This example shows how to bind UXTreeView CheckedItems property to UXListBox control.

Example

Description

UXTreeView includes powerful checkbox capability which allows you to easily capture checked items from the user input. You can enable this feature by simply setting the CheckBoxVisibility property to Visible., then access the CheckedItems property to obtain the checked items. Note that the CheckedItems only includes leaf items.

The following example shows how to display the checked items to a UXListBox by binding the CheckedItems property to UXListBox's ItemsSource property.

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 contains 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 CheckedItems property is bind to UXListBox ItemsSource property.

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>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Intersoft:UXTreeView x:Name="TreeView" ItemsSource="{Binding CompanySections}" ItemTemplate="{StaticResource SectionTemplate}" 
                              CheckBoxVisibility="Visible" />
        <Intersoft:UXListBox ItemsSource="{Binding ElementName=TreeView, Path=CheckedItems}" 
                             DisplayMemberPath="EmployeeName" Grid.Column="1">            
        </Intersoft:UXListBox>
        </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

©2012. All Rights Reserved.