Step 2 of 3: Adding C1TreeView Items to C1TreeView

This lesson will show you how to add static C1TreeView items to the C1TreeView control in the XAML markup and in the code behind file.

In XAML

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

1.   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>

2.   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"/>

3.   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 all of the following XAML markup now included in your MainWindow.xaml file:

<Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml">

    <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>

</Window>

4.   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 C1TreeView items to the C1TreeView control in the code behind file instead, add the following code in the Code Editor:

•      Visual Basic

Imports C1.WPF

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

•      C#

using C1.WPF;

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);

}

In this step, you added several C1TreeView items to the C1TreeView control. In the next step, you will customize the behavior and appearance of the C1TreeView control.