Example Pivot Control for Windows Phone 7
Submitted by smartyP on Thu, 04/08/2010 - 18:21I know I said I was done trying to recreate the Pivot control, but I'm happy to be able to share a standalone Pivot control that I've been working on. Keep in mind that a real Pivot control from Microsoft should eventually be released, so this control is not intended to be used in your final production code.
First, download the attached SmartyPantsPivotLibrary_Release1.zip, extract it, and add a reference in your project to SmartyPantsPivotLibrary.dll. Next, add a reference in your MainPage.xaml to the library like this:
xmlns:spcoding="clr-namespace:SmartyPantsPivotLibrary;assembly=SmartyPantsPivotLibrary"
Next, add an instance of the PivotControl inside of the ContentGrid in your MainPage.xaml:
<Grid x:Name="ContentGrid" Grid.Row="1">
<spcoding:PivotControl>
<spcoding:PivotControl.PivotPages>
<spcoding:PivotPage PageTitle="main">
<spcoding:PivotPage.Content>
<TextBlock>main section goes here</TextBlock>
</spcoding:PivotPage.Content>
</spcoding:PivotPage>
<spcoding:PivotPage PageTitle="options">
<spcoding:PivotPage.Content>
<TextBlock>options section goes here</TextBlock>
</spcoding:PivotPage.Content>
</spcoding:PivotPage>
<spcoding:PivotPage PageTitle="about">
<spcoding:PivotPage.Content>
<StackPanel Orientation="Vertical">
<TextBlock>about section goes here</TextBlock>
</StackPanel>
</spcoding:PivotPage.Content>
</spcoding:PivotPage>
</spcoding:PivotControl.PivotPages>
</spcoding:PivotControl>
</Grid>
As you can see by the XAML definition above, you are basically adding a PivotControl, and then populating PivotPages with multiple PivotPage entries. A PivotPage is defined as having a PageTitle property (what appears across the pivot menu across the top) and a Content property (what shows up in the main content area for each pivot page).
One other thing you may want to use are two events that tell you when the pivot pages are being dragged around - by listening to these events you can make sure the user doesn't accidentally click on something while changing pages (more on this in the video below):
MainPivot.PivotPageMoving += (s, e) => { _ignoreClicks = true; };
MainPivot.PivotPageDoneMoving += (s, e) => { _ignoreClicks = false; };
Below is a quick video showing how to use the control and discussing a bit more about it, you'll find the example project attached to this post:
As a side note, I have been unable to get this control to work in a large project I had already been working on - for some reason an unhandled Application level exception occurs after changing pages from time to time - unfortunately the exception provides no details and the call stack only shows internal methods. So, this control is provided AS IS - I won't really know how well this works until others try and use it. I also am not committed to maintaining this control, but if you improve on the code and would like to have the code posted updated please feel free to let me know.