Adding Segmented Buttons to the Navigation Bar

By default, C1ViewPort's NavigationBarType property is set to TitleBar, which allows the navigation bar to hold header text, a left button, and a right button. Instead of using the traditional navigation bar, however, you can add segmented buttons to the navigation bar by setting the NavigationBarType property to SegmentedButtons and then adding the C1SegmentedButtons control to the navigation bar in Source view.

Complete the following steps:

1.   Click the Design tab to enter Design view.

2.   From the Toolbox, double-click the ScriptManager icon to add the control to your project.

3.   From the Toolbox, double-click the C1ViewPort icon to add the control to your project.

4.   Click C1ViewPort's smart tag () to open the C1ViewPort Tasks menu.

5.   In the C1ViewPort Tasks menu, click the NavigationBarType drop-down arrow and select SegmentedButtons.

Setting this property will prevent the default elements – header, right button, and left button – from appearing, but you will still have to add the segmented buttons in Source view.

6.   Click the Source tab to enter Source view.

7.   Register the C1SegmentedButtons namespace by locating the <%@ Register Assembly> tag for the C1ViewPort control and then placing the following tag beneath it:

<%@ Register assembly="C1.Web.iPhone.3, Version=3.5.20091.76, Culture=neutral, PublicKeyToken=9b75583953471eea" namespace="C1.Web.iPhone.C1SegmentedButtons" tagprefix="SegmentedButtonsN" %>

8.   Create the segmented buttons by placing the following markup between the <cc1:C1ViewPort> and </cc1:C1ViewPort> tags:

<SegmentedButtons>

    <Buttons>

        <SegmentedButtonsN:C1SegmentedButton runat="server" ID="Button1" Text="Button1" />

        <SegmentedButtonsN:C1SegmentedButton runat="server" ID="Button2" Text="Button2" />

    </Buttons>

</SegmentedButtons>

9.   Open the project and observe that the navigation bar now holds two segmented buttons. The result will resemble the following: