Floating FB popout byF5debug

Learn Windows Phone 7 Development in 31 Days – Day 10 – Working with Pivot Control in WP7

 

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        [more]

  • 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.

clip_image002

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

clip_image004

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.

clip_image006

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:

01

<controls:Pivot Title="F5DEBUG WP7 TUTORIALS">

02

 

03

<controls:PivotItem Header="Post">

04

<Grid>

05

<Image Height="174" Source="f5.jpg" HorizontalAlignment="Left" Margin="78,47,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="254" />

06

<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" />

07

</Grid>

08

</controls:PivotItem>

09

 

10

<controls:PivotItem Header="Ebook">

11

<Grid>

12

<Image Height="310" Source="ssis-cover-page.jpg" HorizontalAlignment="Left" Margin="79,25,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="258" />

13

<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" />

14

</Grid>

15

</controls:PivotItem>

16

 

17

<controls:PivotItem Header="Comments">

18

<Grid>

19

<TextBlock Height="206" FontSize="40" HorizontalAlignment="Left" Margin="82,121,0,0" TextWrapping="Wrap" Name="textBlock3" Text="F5debug Comments Section" VerticalAlignment="Top" Width="273" />

20

</Grid>

21

</controls:PivotItem>

22

 

23

</controls:Pivot>

clip_image008

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.

clip_image010

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.

clip_image012

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.

About Author: Karthikeyan Anbarasan, Microsoft MVP (Most Valuable Professional) in ASP.NET/IIS Architecture. He is the Founder and Chief Editor of the www.f5debug.net website and has authored books on Windows Phone and Business Intelligence(SSIS). He is also a Passionate Speaker and a Blogger on Microsoft Technologies.

You can Join Me On: Facebook, Twitter, Google Plus, LinkedIn

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Recent Posts

Random Posts

Most Viewed

URL Shortner

Create your own short urls!!!

Site Counter

free counters

Disclaimer

This is a personal weblog. The opinions expressed here represent my own and not those of my employer. For accuracy and official reference refer to MSDN/ TechNet. I have documented my personal experience on this blog.

Protected by Copyscape Web Plagiarism Finder

Site Meter