Next we are going to add C1OutlookItems to the C1OutlookBar. We'll add two items, an Inbox folder and a Tasks folder.

1. In the XAML markup, place your cursor between the <c1:C1OutlookBar></c1:C1OutlookBar> tags and press ENTER.
2. Add a C1OutlookItem control within these tags with Header="Inbox" using the following XAML markup:

   <c1:C1OutlookItem Header="Inbox"> </c1:C1OutlookItem>
   
   

3. Next we'll add a C1TreeView containing folders that will appear in the C1OutlookBar. Add the following XAML within the <c1:C1OutlookItem> tags:

   XAML

   Copy Code

   <c1:C1TreeView x:Name="contacts" BorderThickness="0" > <c1:C1TreeViewItem Header="Inbox" IsExpanded="True"> <c1:C1TreeViewItem > <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <TextBlock Text="Folder1"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> <c1:C1TreeViewItem > <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <TextBlock Text="Folder2"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> </c1:C1TreeViewItem> </c1:C1TreeView>

4. Let's add another C1OutlookItem with a C1TreeView to display a Tasks folder. Add the following XAML markup after the closing </c1:C1OutlookItem> tag.

   XAML

   Copy Code

   <c1:C1OutlookItem x:Name="selectedItem" Header="Tasks" > <c1:C1TreeView x:Name="tasks" BorderThickness="0" > <c1:C1TreeViewItem Header="My Tasks" IsExpanded="True"> <c1:C1TreeViewItem > <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <TextBlock Text="To-Do List"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> <c1:C1TreeViewItem > <c1:C1TreeViewItem.Header> <StackPanel Orientation="Horizontal"> <TextBlock Text="Tasks"/> </StackPanel> </c1:C1TreeViewItem.Header> </c1:C1TreeViewItem> </c1:C1TreeViewItem> </c1:C1TreeView> </c1:C1OutlookItem>

In the next step you will run the application.

Copyright (c) GrapeCity, inc. All rights reserved.