Skip to main content Skip to footer

Using CheckBox in ComponentOne TreeView Control

ComponentOne Studio for Silverlight includes a very useful control, C1TreeView, which can be used to create a hierarchical structure for data in nodes format. TreeView1 We can create template for hierarchical nodes in C1TreeView and put other controls in it. In this blog, we would be discussing how we can create a template for C1TreeView node and put a CheckBox and a TextBox in it. Implementation To start with, create a new Silverlight project and place a C1TreeView control on 'MainPage. Xaml' of MainPage of the project as follows:


<UserControl x:Class="CheckBoxTreeView_CS.MainPage"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
    mc:Ignorable="d"  
    d:DesignHeight="300" d:DesignWidth="400" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml">  
    <Grid x:Name="LayoutRoot" Background="White">  
        <c1:C1TreeView x:Name="C1TreeView1" BorderBrush="#FF8FB4CC">  
        </c1:C1TreeView>       
    </Grid>  
</UserControl>  

Next, we need to create a template for C1TreeView hierarchical nodes under UserControl.Resources.


<UserControl.Resources>  
<c1:C1HierarchicalDataTemplate x:Key="nodeTemplate" ItemsSource="{Binding Children}">  
<StackPanel Orientation="Horizontal">  
<CheckBox Name="CheckBox1"/>  
<TextBlock Text="TextBox" />  
</StackPanel>  
</c1:C1HierarchicalDataTemplate>  
</UserControl.Resources>  

Now, we have to provide this template to C1TreeView. To do this, simply give the template name as ItemTemplate for C1TreeView.


<c1:C1TreeView x:Name="C1TreeView1" BorderBrush="#FF8FB4CC" ItemTemplate="{StaticResource nodeTemplate}">  
</c1:C1TreeView>  

By this time, no items will be shown in C1TreeView as there is no data or values. We may bind TextBox and CheckBox used in ItemTemplate to some property. The C1TreeView after filling up the nodes with data will look like: C1TreeViewWithCheckBox A working sample, which demonstrates how exactly we can show data in C1TreeView item template when it is in bound mode, has been attached. The sample also demonstrate how we can get the items checked and unchecked status along with their parent node(if any). Download Sample

MESCIUS inc.

comments powered by Disqus