If you have more tabs on the C1TabControl control than you would like to show at one time, you can enable tab scrolling. This topic illustrates how to enable scrolling on a horizontal C1TabControl by setting the ScrollMode and ScrollButtonAlign properties in Design view, Source view, and in code.
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 your C1TabControl.
Treeview appears as follows:
3. In treeview, select C1TabControl1 to reveal its list of properties.
4. Locate the Width property and type "150px" into its text box.
If you were to run the program now, the last two tabs in the series, C1TabPage4 and C1TabPage5, would appear in second row beneath tabs C1TabPage1, C1TabPage2, and C1TabPage3.
5. With C1TabControl still selected, expand the node next to ScrollSettings to reveal a list of its properties and set the following:
• Click the drop-down arrow next to ScrollMode and select a mode. For this example, select Buttons.
• Click the drop-down arrow next to ScrollButtonAlign and select an alignment. For this example, select Two Sides.
6. Press OK and run the program. Observe that the tabs all appear in one row and that you can now scroll through the tabstrip.
In Source View
Complete the following steps:
1. Click C1TabControl's
smart tag () to
open the C1TabControl Tasks menu and then select C1TabControl
Designer.
The C1TabControl Designer Form appears.
2. Use the Add Child
Item button to add five tab pages to the C1TabControl.
3. Click OK to close the C1TabControl Designer Form.
4. Click the Source tab to enter Source view and add the following property settings to the <cc1:C1TabControl> tag:
• Width="150px"
• ScrollMode="Buttons"
• ScrollButtonAlign="TwoSides"
After you've set the properties, your markup will resemble the following:
<cc1:C1TabControl ID="C1TabConrol1" runat="server" VisualStyle="Office2007Blue" VisualStylePath="~/VisualStyles" Width="150px" ScrollMode="Buttons" ScrollButtonAlign="TwoSides">
5. Run the project and observe that there are two translucent buttons on your tabstrip. Click those buttons to scroll through your tabstrip.
In Code
Complete the following steps:
1. Click C1TabControl's
smart tag () to
open the C1TabControl Tasks menu and then select C1TabControl
Designer.
The C1TabControl Designer Form appears.
2. Use the Add Child
Item button to add five tabs to your C1TabControl.
3. Click OK to close the C1TabControl Designer Form.
4. In the Solution Explorer window, right click Default.aspx and select View Code to access the code editor.
5. Import the following namespace into your project:
Imports C1.Web.UI.Controls
• C#
using C1.Web.UI.Controls;
6. Add the following code to the Page_Load event to set the Width property to 150px:
C1TabControl1.Width = 150
• C#
C1TabControl1.Width = 150;
7. Set the ScrollMode property to Buttons:
C1TabControl1.ScrollSettings.ScrollMode = ScrollMode.Buttons
• C#
C1TabControl1.ScrollSettings.ScrollMode = ScrollMode.Buttons;
8. Set the ScrollButtonAlign property to TwoSides:
C1TabControl1.ScrollSettings.ScrollButtonAlign = ScrollButtonAlign.TwoSides
• C#
C1TabControl1.ScrollSettings.ScrollButtonAlign = ScrollButtonAlign.TwoSides;
9. Run the program and observe that there are two translucent buttons on your tabstrip. Click those buttons to scroll through your tabstrip.
|
