Next we are going to add a C1DockTabControl with C1DockTabItem.

1. In the XAML markup, place your cursor between the <c1:C1DockControl></c1:C1DockControl> tags and press ENTER.
2. Add a C1DockTabControl within these tags using the following XAML markup:

    

   XAML	Copy Code
   <c1:C1DockTabControl Dock="Left"> <c1:C1DockTabItem Header="Toolbox"> <TextBlock Text="Here is your Toolbox." /> </c1:C1DockTabItem> </c1:C1DockTabControl>

               

   This XAML also includes a C1DockTabItem labeled Toolbox. If you run the application now, the C1DockTabControl will look similar to the following:

    

   

    

   Let's add another C1DockTabItem and C1DockTabControl to show how you can select tabs and dock or float the C1DockTabControl when you run the application.

3. Add XAML for another C1DockTabItem and a C1DockTabControl after the closing </c1:C1DockTabItem> tag, so the full XAML for C1DockControl will look like the following:

   XAML

   Copy Code

   <c1:C1DockControl> <c1:C1DockTabControl Dock="Left"> <c1:C1DockTabItem Header="Toolbox"> <TextBlock Text="Here is the Toolbox." /> </c1:C1DockTabItem> <c1:C1DockTabItem Header="Project"> <TextBlock Text="Tree of files" /> </c1:C1DockTabItem> </c1:C1DockTabControl> <c1:C1DockTabControl DockWidth="500" ShowHeader="False"> <c1:C1DockTabItem Header="myfile.ext"> <TextBlock Text="This is the text of myfile.ext" /> </c1:C1DockTabItem> </c1:C1DockTabControl> </c1:C1DockControl>

           

   In the next step you will run the application and change the docking mode for windows.