If you have more tabs on your C1TabStrip 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 C1TabStrip control by setting the ScrollMode and ScrollButtonAlign properties.
For more information on tabstrip scrolling, see Tabstrip Scrolling.
In Design View
Complete the following steps:
1. Click C1TabStrip's
smart tag (
) to open the
C1TabStrip Tasks menu and then select TabStrip Designer.
The C1TabStrip Designer Form appears.
2. Use the Add Child
Item button 
to add five tabs to your C1TabStrip.
3. In the treeview, select C1TabStrip1 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, C1Tab4 and C1Tab5, would appear in a second row beneath tabs C1Tab1,C1Tab2,and C1Tab3.
5. With C1TabStrip still selected, expand the node next to ScrollSettings to reveal a list of its properties. 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 TwoSides.
6. Press OK and run the program. Observe that you can click the buttons to scroll through the tabstrip.
In Source View
Complete the following steps:
1. Click C1TabStrip's
smart tag () to open the
C1TabStrip Tasks menu and then select TabStrip Designer.
The C1TabStrip Designer Form appears.
2. Use the Add Child
Item button to add five tabs to your C1TabStrip
control.
3. Click OK to close the C1TabStrip Designer Form.
4. Click the Source tab to enter Source view and add the following property settings to the <cc1:C1TabStrip> tag:
• Width="150px"
• ScrollMode="Buttons"
• ScrollButtonAlign="TwoSides"
After you've set the properties, your tag should resemble the following:
<cc1:C1TabStrip ID="C1TabStrip1" runat="server" VisualStyle="Office2007Blue" VisualStylePath="~/VisualStyles" Width="150px" ScrollMode="Buttons" ScrollButtonAlign="TwoSides">
5. Run the project and observe that there are now two translucent buttons on your tabstrip. Click those buttons to scroll through your tabstrip.
In Code
Complete the following steps:
1. Click C1TabStrip's
smart tag () to open the
C1TabStrip Tasks menu and then select TabStrip Designer.
The C1TabStrip Designer Form appears.
2. Use the Add Child
Item button to add five tabs to your C1TabStrip.
3. Click OK to close the C1TabStrip Designer Form.
4. In the Solution Explorer window, right click on 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:
C1TabStrip1.Width = 150
• C#
C1TabStrip1.Width = 150;
7. Set the ScrollMode property to Buttons:
C1TabStrip1.ScrollSettings.ScrollMode = ScrollMode.Buttons
• C#
C1TabStrip1.ScrollSettings.ScrollMode = ScrollMode.Buttons;
8. Set the ScrollButtonAlign property to TwoSides:
C1TabStrip1.ScrollSettings.ScrollButtonAlign = ScrollButtonAlign.TwoSides
• C#
C1TabStrip1.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.
|
