WPF and Silverlight Edition Basic Library

Step 2 of 3: Adding C1TreeViewItems

In this step, you will see two different ways to add C1TreeViewItems to the C1TreeView control: in XAML markup and in code.

In XAML

To add static C1TreeViewItems to the C1TreeView control in the XAML:

Add the C1TreeViewItem to create the top-level node called "Book List". Within the <c1:C1TreeViewItem> tag add Header=”Book List". This will create a top-level node that at run time. The XAML markup appears as follows:

<c1:C1TreeViewItem Header="Book List"></c1:C1TreeViewItem>

Add two child C1TreeViewItems between the <c1:C1TreeViewItem Header="Book List"></c1:C1TreeViewItem> tags to create two child nodes beneath the Book List node. The XAML markup appears as follows:

<c1:C1TreeViewItem Header="Language Books"/>
<c1:C1TreeViewItem Header="Security Books"/>

Add another <c1:C1TreeViewItem> tag to create a new top level node that will hold two child nodes. The XAML markup appears as follows:

<c1:C1TreeViewItem Header="Classic Books">
  <c1:C1TreeViewItem Header="Catch-22"/>
  <c1:C1TreeViewItem Header="The Great Gatsby"/>
</c1:C1TreeViewItem>

You should have the following XAML markup now included in your file:

<Grid>
  <c1:C1TreeView Name="Tree" >
     <c1:C1TreeViewItem Header="Book List">
        <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>

Run the project and notice that the Book node is not expanded. You can expand it by clicking on the arrow image.

In Code

To add static C1TreeViewItems to the C1TreeView control in the code behind file instead, add the following code in the Code Editor:

Class MainWindow
    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)
        ' 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
End Class

public MainWindow()
{
    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);
    // 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);
}