Step 2 of 3: Adding C1TabControl to the Application

In the last step, you created a Windows Store project. In this step, you'll add a C1TabControl to the application.

Complete the following steps:

Place the cursor between the <Grid> and </Grid> tags in MainPage.xaml, and click once.
Add the following markup within the <Grid> and </Grid> tags:

Markup	Copy Code
<C1:C1TabControl x:Name="tabControl" TabStripOverlapDirection="Left" TabStripOverlap="8" TabItemShape="Sloped" TabItemClose="InEachTab" TabStripPlacement="Bottom" TabStripMenuVisibility="Visible"> </C1:C1TabControl>

Markup

Copy Code

<C1:C1TabControl x:Name="tabControl" TabStripOverlapDirection="Left"  TabStripOverlap="8" TabItemShape="Sloped" TabItemClose="InEachTab" TabStripPlacement="Bottom" TabStripMenuVisibility="Visible">
</C1:C1TabControl>

This markup adds a C1TabControl to the project. This sets the following properties:

The TabStripOverlapDirection property is set to Left and TabStripOverlap is set to 8 indicating the overlapping allowed between the tabs.
The TabItemClose property is set to InEachTab. This will add close buttons to each tab.
The TabItemShape property is set to Sloped. This will change the shape of the tab items so that they resemble tabs on an office folder.
The TabStripMenuVisibility property is set to Visible.
The TabStripPlacement property is set to Bottom. This will place the tabstrip at the bottom of the control.

You’ll also need to add C1TabItems within the C1TabControl.

Add the following markup within the <C1:C1TabControl> and </C1:C1TabControl> tags:

Markup	Copy Code
<C1:C1TabItem Header="Notes" CanUserPin="True"> <RichEditBox HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="1330"/> </C1:C1TabItem> <C1:C1TabItem Header="Tasks"> <RichEditBox HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="1330"/> </C1:C1TabItem> <C1:C1TabItem Header="Reminders"> <RichEditBox HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="1330"/> </C1:C1TabItem> <C1:C1TabItem Header="Topics" CanUserPin="True"> <RichEditBox HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="1330"/> </C1:C1TabItem>

Markup

Copy Code

<C1:C1TabItem Header="Notes" CanUserPin="True">
    <RichEditBox HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="1330"/>
</C1:C1TabItem>
<C1:C1TabItem Header="Tasks">
    <RichEditBox HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="1330"/>
</C1:C1TabItem>
<C1:C1TabItem Header="Reminders">
    <RichEditBox HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="1330"/>
</C1:C1TabItem>
<C1:C1TabItem Header="Topics" CanUserPin="True">
    <RichEditBox HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="1330"/>
</C1:C1TabItem>

This adds C1TabItems, each containing a RichEditBox. Note that in two of the C1TabItems, CanUserPin is set to True allowing the tabs to be pinned at run time.

In this step, you added and customized the C1TabControl control. In the next step, you will run the program and observe what you've accomplished during this quick start.