Creating Multiple Tabstrip Rows

ComponentOne TabControl for ASP.NET AJAX: TabControl for ASP.NET AJAX Task-Based Help > Customizing the Appearance of a C1TabControl > Creating Multiple Tabstrip Rows

You can create multiple tabstrip rows on a C1TabControl control using the ForceNewLine property. Whenever you set a tab's ForceNewLine property to True, a new row will be created on the tabstrip. This topic illustrates how to create three rows of tabs on a C1TabControl control. For more information on multiple tabstrip rows, see Multiple Tabstrip Rows.

In Design View

Complete the following steps:

1. Click C1TabControl's smart tag () to open the C1TabControl Tasks menu and select TabControl Designer.

The C1TabControl Designer Form appears.

2. Use the Add Child Item button to add five tabs to the C1TabControl.

3. Select Tab03 and set its ForceNewLine property to True.

4. Select Tab05 and set its ForceNewLine property to True.

5. Press OK and then run the project.

Observe that Tab03 and Tab04 are placed located in a row beneath Tab01 and Tab02, while Tab05 sits below Tab03 on a row of its own.

In Source View

Complete the following steps:

1. In Design view, add a C1TabControl to your Web project.

2. Switch to Source view and add C1TabPages to your C1TabControl by placing the following markup between the <cc1:C1TabControl> tags:

<cc1:C1TabPage ID="C1TabPage1" runat="server" Text="C1TabPage1">

</cc1:C1TabPage>

<cc1:C1TabPage ID="C1TabPage2" runat="server" Text="C1TabPage2">

</cc1:C1TabPage>

<cc1:C1TabPage ID="C1TabPage3" runat="server" Text="C1TabPage3">

</cc1:C1TabPage>

<cc1:C1TabPage ID="C1TabPage4" runat="server" Text="C1TabPage4">

</cc1:C1TabPage>

<cc1:C1TabPage ID="C1TabPage5" runat="server" Text="C1TabPage5">

</cc1:C1TabPage>

</TabPages>

3. Add ForceNewLine="True" to the <cc1:C1Tab> tags for Tab03 and Tab05. After you add the XHTML to those tags, they will resemble the following:

Tab03 - <cc1:C1TabPages runat="server" ForceNewLine="True" Text="TabPage03">

Tab05 - <cc1:C1TabPages runat="server" ForceNewLine="True" Text="TabPage05">

In Code

Complete the following steps:

1. In Design view, add a C1TabControl to your Web project.

2. Switch to the code editor and import the following namespace into your project:

• Visual Basic

Imports C1.Web.UI.Controls.C1TabControl

• C#

using C1.Web.UI.Controls.C1TabControl;

3. Create five C1TabPages by adding the following code to the Page_Load event:

• Visual Basic

Dim C1TabPage01 As C1TabPage = New C1TabPage()

Dim C1TabPage02 As C1TabPage = New C1TabPage()

Dim C1TabPage03 As C1TabPage = New C1TabPage()

Dim C1TabPage04 As C1TabPage = New C1TabPage()

Dim C1TabPage05 As C1TabPage = New C1TabPage()

• C#

C1TabPage C1TabPage01 = new C1TabPage();

C1TabPage C1TabPage02 = new C1TabPage();

C1TabPage C1TabPage03 = new C1TabPage();

C1TabPage C1TabPage04 = new C1TabPage();

C1TabPage C1TabPage05 = new C1TabPage();

4. Set the Text properties of the new tabs:

• Visual Basic

C1TabPage01.Text = "TabPage01"

C1TabPage02.Text = "TabPage02"

C1TabPage03.Text = "TabPage03"

C1TabPage04.Text = "TabPage04"

C1TabPage05.Text = "TabPage05"

• C#

C1TabPage01.Text = "TabPage01";

C1TabPage02.Text = "TabPage02";

C1TabPage03.Text = "TabPage03";

C1TabPage04.Text = "TabPage04";

C1TabPage05.Text = "TabPage05";

5. Add the new C1TabPages to the C1TabControl control:

• Visual Basic

Me.C1TabControl1.Controls.Add(C1TabPage01)

Me.C1TabControl1.Controls.Add(C1TabPage02)

Me.C1TabControl1.Controls.Add(C1TabPage03)

Me.C1TabControl1.Controls.Add(C1TabPage04)

Me.C1TabControl1.Controls.Add(C1TabPage05)

• C#

this.C1TabControl1.Controls.Add(C1TabPage01);

this.C1TabControl1.Controls.Add(C1TabPage02);

this.C1TabControl1.Controls.Add(C1TabPage03);

this.C1TabControl1.Controls.Add(C1TabPage04);

this.C1TabControl1.Controls.Add(C1TabPage05);

6. Set the ForceNewLine properties of C1TabPage03 and C1TabPage05 to True:

• Visual Basic

C1TabPage03.ForceNewLine = True

C1TabPage05.ForceNewLine = True

• C#

C1TabPage03.ForceNewLine = true;

C1TabPage05.ForceNewLine = true;

7. Run the program.

This Topic Illustrates the Following:

In this topic, you have added new tab pages to a C1TabControl control and used the ForceNewLine property to create multiple rows on your tab control. The final result will resemble the following image: