Working With Pivot Control in Windows Phone 7

Introduction

In this article we are going to see how to use the Pivot Control in Windows Phone 7 Application. In our earlier article we have seen the rich looking Panorama control to build a rich user interface. Using Pivot control we can easily maintain pages or the data views without having much need of loading multiple pages. We can easily filter large data sets into multiple pages. With this control we can slide back and forth and provide the end user with the related data's in a much easier view using any of the available controls.

Pivot control is the base application control and inside that we will be having a Pivotitem control where we can have multiple items inside a Pivot control. Its recommended to have one pivot control with in the page and can have multiple Pivotitems. Pivot Control is layered into 2 layers, with each layer contain a Grid inside as the layout root

Pivot Headers - This layer is for showing the header title.
Pivot Items - This layer is for showing single Pivotitem to show data.

Let us jump start to see the step by step process on how to create a Pivot control for Windows Phone 7 using Visual Studio 2010.

Steps

Open Visual Studio 2010 and create a new Silverlight for Windows Phone 7 project with a valid project name as shown in the screen below.



We can see the windows phone 7 interface with the Pivot Control added as shown in the screen below.



If we can see the XAML code we can see the pivot control added by default with default pivot items. We can delete the pivot items inside the pivot control and we can see the empty Pivot control. We will customize by adding our own PivotItems, let us do the same design which we did for the Panorama sample. If we can see the difference we don't have option to change the background. Once we add the default Pivot Items we can see the screen looks like below.



Now we need to add some controls to each of the items to show some information to the end users. To add the controls just we can drag and drop from the tool box or by directly wiring on to the XAML Code. Let us do some customization to get a good user experience with the controls as shown in the XAML Code below. Once we are done with our code we can see the screen looks like below.

XAML Code

<controls:Pivot Title="F5DEBUG WP7 TUTORIALS">
    <controls:PivotItem Header="Post">
        <Grid>
            <Image Height="174" Source="f5.jpg" HorizontalAlignment="Left" Margin="78,47,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="254" />
            <TextBlock Height="164" HorizontalAlignment="Left" Margin="29,301,0,0" TextWrapping="Wrap" Name="textBlock1" Text="This is the F5debug blog posts sections, You can get the latest
post updates here!!!" VerticalAlignment="Top" Width="369" />
        </Grid>
    </controls:PivotItem>
    <controls:PivotItem Header="Ebook">
        <Grid>
            <Image Height="310" Source="ssis-cover-page.jpg" HorizontalAlignment="Left" Margin="79,25,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="258" />
            <TextBlock Height="120" TextWrapping="Wrap" HorizontalAlignment="Left" Margin="31,409,0,0" Name="textBlock2" Text="SQL Server Integration Services (SSIS) – Step by Step Tutorial Version 2.0" VerticalAlignment="Top" Width="372" />
        </Grid>
    </controls:PivotItem>
    <controls:PivotItem Header="Comments">
        <Grid>
            <TextBlock Height="206" FontSize="40" HorizontalAlignment="Left" Margin="82,121,0,0" TextWrapping="Wrap" Name="textBlock3" Text="F5debug Comments Section" VerticalAlignment="Top" Width="273" />
        </Grid>
    </controls:PivotItem>
</controls:Pivot>



Now we are done with our design and the coding section, to test our application press F5 directly from the keyboard or Build and Execute from the Visual Studio IDE tool bar and we can see the pivot control application loaded into the Windows Phone 7 Emulator as shown in the screen below.



Now we can directly click on the header title or scroll it horizontally to navigate to the second pivot item as shown in the screen below.



Conclusion

So in this article we have seen how to use the pivot control from scratch and design a nice user interface something looks similar to the Panorama control but with some difference which we have seen in the output.