Script 15: TreeView in Studio for WinRT XAML

TreeView

Get a hierarchical view of your data items with ComponentOne TreeView™ for WinRT XAML (Beta). The familiar TreeView UI is now available for Windows 8 applications. Supports collapsible nodes, hierarchical templates, check box nodes, editing, and drag-and-drop operations (mouse only in Beta version).

• Customizable Nodes

Node headers are content elements, so they can host any type of element. Add images, check boxes, or whatever your application requires. Provide editing functionality using the customizable EditTemplate property.

• Show Connecting Lines

Show connected lines in C1TreeView by simply setting the ShowLines property. This gives the appearance of a classic windows treeview. Adjust the appearance of the lines with several simple properties (LineThickness/LineStroke).

• Hierarchical Templates

You can use different templates for different node types without having to subclass the C1TreeViewItem class.

• Drag-and-drop Nodes

C1TreeView supports drag-and-drop operations within the tree. Simply set the AllowDragDrop property to true and users will be able to reorder nodes within the tree by dragging them with the mouse. Drag-and-drop is only supported by keyboard and mouse in the beta version.

Getting Started in Treeeview

Step 1 of 3: Creating an Application with a C1TreeView Control

In this step, you'll begin in Visual Studio to create a WinRT XAML application using TreeView for WinRT XAML.

Complete the following steps:

1. In Visual Studio 2012 Select File | New | Project.

2. In the New Project dialog box, expand a language in the left pane, under the language select Windows Store, and in the templates list select Blank App (XAML). Enter a Name and click OK to create your project.

3. Open MainPage.xaml if it isn't already open, place the cursor between the and tags, and click once.

4. Navigate to the Toolbox and double-click the C1TreeView icon to add the treeview control to MainPage.xaml. The XAML markup will now look similar to the following:

   Xaml:C1TreeView

   </Xaml:C1TreeView>

Note that the C1.Xaml namespace and <Xaml:C1TreeView /> tag have been added to the project.

5. Give your grid a name by adding x:Name="Tree" to the Xaml:C1TreeView tag and add a closing tag so that it appears similar to the following:

   <Xaml:C1TreeView x:Name="Tree">

   </Xaml:C1TreeView>

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

You've successfully created a Windows Store application containing a C1TreeView control. In the next step, you will customize the appearance and behavior of the C1TreeView control.

Step 2 of 3: Adding C1TreeView Items to C1TreeView

This lesson will show you how to add static C1TreeView items to the C1TreeView control. To add static C1TreeViewItems to the C1TreeView control in the XAML, complete the following steps:

1. Add the C1TreeViewItem to create the top-level node called "Book List". Within the Xaml:C1TreeViewItem tag add Header="Book List". This will create a top-level node that at run time.

<Xaml:C1TreeViewItem Header="Book List">

        </Xaml:C1TreeViewItem>

2. Add two child C1TreeViewItems below the Xaml:C1TreeViewItem tag to create two child nodes beneath the Book List node and add Header="Language Books". In the second child node add Header="Security Books". Add another Xaml:C1TreeViewItem tag to create a new top level node that will hold two child nodes. Add two closing Xaml:C1TreeViewItem tags to close the Book List node and Classic Books node. You should have all of the following XAML markup now included in your MainPage.xaml:

<Xaml:C1TreeView x:Name="Tree"> <Xaml:C1TreeViewItem Header="Book List"> <Xaml:C1TreeViewItem Header="Language Books"/> <Xaml:C1TreeViewItem Header="Security Books"/> <Xaml:C1TreeViewItem Header="Classic Books"> <Xaml:C1TreeViewItem Header="Catch-22"/> <Xaml:C1TreeViewItem Header="The Great Gatsby"/> </Xaml:C1TreeViewItem> </Xaml:C1TreeViewItem> </Xaml:C1TreeView>

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

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.

Step 3 of 3: Customizing TreeView’s Appearance and Behavior

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

To customize TreeView for WinRT XAML, complete the following steps:

1. Place your cursor within the Xaml:C1TreeView tag. Within the Xaml: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:C1TreeView x:Name="Tree" SelectionMode="Extended">

2. Place your cursor within the first Xaml:C1TreeViewItem tag. Within the Xaml:C1TreeViewItem add IsExpanded="True" IsSelected="True". This will create a top-level node that appears selected and expanded at run time. The XAML markup appears as follows:

   <Xaml:C1TreeViewItem Header="Book List" IsExpanded="True" IsSelected="True">

3. Locate the tag that reads <Xaml:C1TreeViewItem Header="Language Books">. Add Foreground="Fuchsia" to the <Xaml:C1TreeViewItem Header="Language Books"> tag. This will make the "Classic Books" tree item fuchsia-colored. The XAML markup will resemble the following:

<Xaml:C1TreeViewItem Header="Language Books" Foreground="Fuchsia"/>

4. Markup should now look as follows:

<Xaml:C1TreeView x:Name="Tree" SelectionMode="Extended"> <Xaml:C1TreeViewItem Header="Book List" IsExpanded="True" IsSelected="True"> <Xaml:C1TreeViewItem Header="Language Books" Foreground="Fuchsia"/> <Xaml:C1TreeViewItem Header="Security Books"/> <Xaml:C1TreeViewItem Header="Classic Books"> <Xaml:C1TreeViewItem Header="Catch-22"/> <Xaml:C1TreeViewItem Header="The Great Gatsby"/> </Xaml:C1TreeViewItem> </Xaml:C1TreeViewItem> </Xaml:C1TreeView>

5. From the Debug menu, select Start Debugging to view how your application will appear at run time.

It will appear similar to the following image:

Observe the following behavioral and appearance changes for C1TreeView:

• The C1TreeView appears expanded.

• The first C1TreeViewItem appears selected.

• You can select multiple C1TreeViewItems holding down the CTRL or SHIFT keys while selecting items.

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

See this example in our documentation for WinRT XAML TreeView

Next: Blog Series (Part 16) Summary and Resources: Windows 8 Studio for WinRT XAML