Overlapping Tabs on a Tabstrip

You can control the overlapping of tabs by setting the TabStripOverlap property and the TabStripOverlapDirection property (for more information, see Tab Overlapping). In this topic, you’ll set the TabStripOverlap property and TabStripOverlapDirection properties in design view, in XAML, and in code. This topic assumes that you have added a C1TabControl with at least three tabs to your project (see Adding a Tab to the C1TabControl Control).

In Design View

Complete the following steps:

1.   Select the C1TabControl control.

2.   In the Properties window, set the following properties:

•      Set the TabStripOverlap property to “12”.

•      Set the TabStripOverlapDirection property to Left.

In XAML

Add TabStripOverlap=”12” and TabStripOverlapDirection=”Left” to the <c1:C1TabControl> tab so that the markup resembles the following:

<c1:C1TabControl HorizontalAlignment="Left" VerticalAlignment="Top" Height="156" Width="226" TabStripOverlap="12" TabStripOverlapDirection="Left">

In Code

Complete the following steps:

1.   Enter Code view and add the following code beneath the InitializeComponent() method:

•      Visual Basic

C1TabControl1.TabStripOverlap = 12
C1TabControl1.TabStripOverlapDirection = C1.Silverlight. C1TabPanelOverlapDirection.Left

•      C#

c1TabControl1.TabStripOverlap = 12;
C1TabControl1.TabStripOverlapDirection = C1.Silverlight. c1TabPanelOverlapDirection.Left;

2.   Run the program.

 This Topic Illustrates the Following:

The following image depicts the result of this topic.