Basic Library for WPF and Silverlight | ComponentOne
WPF and Silverlight Edition Basic Library / TreeView / TreeView Elements
In This Topic
    TreeView Elements
    In This Topic

    The C1TreeView class is a StackPanel with two elements:

    C1TreeViewItems can be added to the C1TreeView control as static items defined either in the XAML or in the code behind or can be defined on your page or user control by using any of the following methods:

     

    Each node in the Tree is represented by a name/value pair, defined by the text and value properties of treenode, respectively. The text of a node is rendered, whereas the value of a node is not rendered and is typically used as additional data for handling postback events.

    A static menu is the simplest way to create the treeview structure.

    To display static C1TreeViewItems using XAML syntax, first nest opening and closing <c1:C1TreeViewItem > tags between opening and closing tags of the C1TreeView control. Next, create the treeview structure by nesting <c1:C1TreeViewItem> elements between opening and closing <c1:C1TreeViewItem> tags. Each <c1:C1TreeViewItem> element represents a node in the control and maps to a C1TreeViewItem object.

    Declarative syntax can be used to define the C1TreeViewItems inline on your page.

    For example:

    XAML
    Copy Code 
    <Grid x:Name="LayoutRoot"> 
   <c1:C1TreeView x:Name="Tree"> 
       <c1:C1TreeViewItem Header="Book List" IsExpanded="True" IsSelected="True">
           <c1:C1TreeViewItem Header="Language Books"/>
           <c1:C1TreeViewItem Header="Security Books"/>
           <c1:C1TreeViewItem Header="Classic Books">
               <c1:C1TreeViewItem Header="Catch-22"/>
               <c1:C1TreeViewItem Header="The Great Gatsby"/>
           </c1:C1TreeViewItem>
       </c1:C1TreeViewItem>
   </c1:C1TreeView>
</Grid>

    Dynamic tree views can be created on the server side or client side. When creating dynamic tree view on the server side, use a constructor to dynamically create a new instance of the C1TreeView class. For example:

    Visual Basic
    Copy Code 
    Public Sub New()
    InitializeComponent() 
    InitializeTreeView()
End Sub
Private Sub InitializeTreeView()
   ' Remove items that were added at design time
    Tree.Items.Clear()       
    Dim booklist As New C1TreeViewItem()
    booklist.Header = "Book List"
    Tree.Items.Add(booklist)
    ' Adding child items
    Dim language As New C1TreeViewItem()
    language.Header = "Language Books"
    booklist.Items.Add(language)         
    ' Adding child items
    Dim security As New C1TreeViewItem()
    security.Header = "Security Books"
    booklist.Items.Add(security)          
    ' Adding child items
    Dim classic As New C1TreeViewItem()
    classic.Header = "Classic Books"
    booklist.Items.Add(classic)
    'Add checkbox
    classic.Header = New CheckBox()         
    ' Adding child items
    Dim subclassic As New C1TreeViewItem()
    subclassic.Header = "Catch-22"
    classic.Items.Add(subclassic)
    Dim subclassic2 As New C1TreeViewItem()
    subclassic2.Header = "The Great Gatsby"
    classic.Items.Add(subclassic2)
End Sub

     

    C#
    Copy Code 
    public MainPage()
  {
      InitializeComponent();
      InitializeTreeView();       
  }
 void InitializeTreeView()
 {
   // Remove items that were added at design time
   Tree.Items.Clear();         
   C1TreeViewItem booklist = new C1TreeViewItem();
   booklist.Header = "Book List";
   Tree.Items.Add(booklist);
   // Adding child items
   C1TreeViewItem language = new C1TreeViewItem();
   language.Header = "Language Books";
   booklist.Items.Add( language );
   // Adding child items
   C1TreeViewItem security = new C1TreeViewItem();
   security.Header = "Security Books";
   booklist.Items.Add(security);
  // Adding child items
  C1TreeViewItem classic = new C1TreeViewItem();
  classic.Header = "Classic Books";
  booklist.Items.Add(classic);
  //Add checkbox
  classic.Header = new CheckBox();
  // Adding child items
  C1TreeViewItem subclassic = new C1TreeViewItem();
  subclassic.Header = "Catch-22";
  classic.Items.Add(subclassic);
  C1TreeViewItem subclassic2 = new C1TreeViewItem();
  subclassic2.Header = "The Great Gatsby";
  classic.Items.Add(subclassic2);     
 }

    TreeView items can be created from a hierarchal datasource control such as an XMLDataSource or SiteMapDataSource. This allows you to update the treeview items without having to edit code.

    When using multi-level data as ItemsSource for the C1TreeView, you need to specify a C1HierarchicalDataTemplate for the items.

    The template will tell the C1TreeView where to find the next level of data, this is done through the "ItemsSource" property of the C1HierarchicalDataTemplate.

     Adding Images

    You can add images to a node by grabbing its first child (the header), casting that to a StackPanel, and inserting an image element at whatever position you prefer. For example:

    Code
    Copy Code 
    StackPanel nodeHeader = TreeNode.Children[0] as StackPanel;
nodeHeader.Children.Insert(0, myImage);