ComponentOne Basic Library for UWP
Step 2 of 3: Adding C1TabControl to the Application
UWP Edition Basic Library > TabControl for UWP > TabControl for UWP Quick Start > Step 2 of 3: Adding C1TabControl to the Application

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

Complete the following steps:

  1. Place the cursor between the <Grid> and </Grid> tags in MainPage.xaml, and click once.
  2. 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>

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

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

  1. 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>

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.

See Also