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.