The following quick start guide is intended to get you up and running with C1TreeView. In this quick start, you'll start in Visual Studio to create a new project, add a C1TreeView control to your application, add C1TreeViewItems and customize the control.

Create an Application with C1TreeView control

1. In Visual Studio, select File | New | Project.
2. In the New Project dialog box, select WPF Application.
3. Enter a Name and Location for your project and click OK to create the new application.
4. In the XAML window of the project, place the cursor between the <Grid></Grid> tag, navigate to the Toolbox and double-click the C1TreeView icon to add the TreeView control.
   Observe, <c1:C1TreeView></c1:C1TreeView> tags get added to the project and looks like the following.

   XAML	Copy Code
   <Grid> <c1:C1TreeView></c1:C1TreeView> </Grid>

5. Give your grid a name by adding x:Name="Tree" to the <c1:C1TreeView> tag so that it appears similar to the following:

   XAML	Copy Code
   <c1:C1TreeView Name="Tree">

   By giving the control a unique identifier, you'll be able to access the C1TreeView control in code.

You've successfully created a WPF application containing a C1TreeView control. In the next step, you will add C1TreeViewItems to the C1TreeView control.

Add TreeView Items

In this step, we share 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:

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

   XAML	Copy Code
   <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:

   XAML	Copy Code
   <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:

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

   Include the following XAML markup in your file:

   XAML	Copy Code
   <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>

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

Customize the C1TreeView Control

In the previous step you worked in Visual Studio to create C1TreeViewItems in XAML. In this step you'll customize the C1TreeView control's appearance and behavior in Visual Studio using XAML code.

1. Place your cursor within the <c1:C1TreeView> tag.

   Within the <c1:C1TreeView> tag add SelectionMode="Extended". This will create a top-level node that you will be able to select multiple tree items by holding the shift and control keys. The XAML markup appears as follows:

   XAML	Copy Code
   <c1:C1TreeView x:Name="Tree" SelectionMode="Extended">

2. Place your cursor within the first <c1:C1TreeViewItem> tag.

   Within the <c1:C1TreeViewItem> add the tag IsExpanded="True" and IsSelected="True". This will create a top-level node that appears selected and expanded at run time. The XAML markup appears as follows:

   XAML	Copy Code
   <c1:C1TreeViewItem Header="Book List" IsExpanded="True" IsSelected="True">

3. Locate the tag that reads <c1:C1TreeViewItem Header=" Language Books">. Within the <c1:C1TreeViewItem Header=" Language Books"> add Foreground="Fuchsia" Background="LightPink". This will add a light pink background to the “Classic Books” tree item and a fuchsia color to the text. The XAML markup will resemble the following:

   XAML	Copy Code
   <c1:C1TreeViewItem Header="Language Books" Foreground="Fuchsia"/>

4. From the Debug menu, select Start Debugging to view how your application will appear at run time. Observe the following behavioral and appearance changes for C1TreeView:

   

   • The C1TreeView appears expanded.
   • The first C1TreeViewItem appears selected.
   • The second C1TreeViewItem has fuchsia colored text.

Congratulations!
You have successfully completed the TreeView for WPF quick start. In this quick start, you've created and customized a TreeView for WPF application, added static C1TreeViewItems, and observed several of the control's run-time features.