1
2
3
4
5
6

Example Pivot Control for Windows Phone 7

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

Creating a Windows Phone 7 Metro Style Pivot Application [Part 3]

This is part 3 - the final part - of how to create a Pivot style application for Windows Phone 7. Attached is the sample project and code for this example.

The screencast starts off in Blend and shows how to create the endless pivot menu across the top. After that the screencast dives into the code hooking up our new pivot menu and changing how the content area works. The last 15 minutes or so of the screencast is a bit long winded, but talks about issues you might run into when trying to use this code in a more feature rich application.

After using this method of creating a Pivot style application for a project for my employer, I've decided that hand rolling one of these things is way too much of a pain. I hope these videos will help those of you who can't wait for the real Pivot control release, but be aware that the devil is in the details for this approach - and there are a lot of little details. It's also worth noting that if I had to do it over again I may have made use of WriteableBitmaps to prevent some of the accidental interactions that can occur when you have interactive elements inside of a pivot page.

On a side note, while working on this screencast and trying to make use of the Pivot in an application I also attempted to create a standalone Pivot control. Unfortunately I could never get it quite stable enough, and after spending so much time on these screencasts I don't have any desire to revisit it and try to get it working - perhaps that will change if the real pivot control still hasn't arrived in another month or so. In the mean time, I've got some WP7 applications and games I want to get to work on.

Creating a Windows Phone 7 Metro Style Pivot Application [Part 2]


Note: It has been noted that this demo and code more closely follow how to create a Panorama style application than a Pivot style application. I hope to fix that in the next part to this series - sorry for the confusion.

This is part two of how to create a basic Windows Phone 7 application that follows the Pivot style of navigation (you can find part one here). Part two of this screencast is focused on using manipulation events to provide gesture support for the Pivot style of navigation.

(click here to go to Vimeo and watch in HD)

In the screencast I reference a few other posts on this same topic, you can check those out here:
[WP7] Create a panoramic view using Silverlight
Panoramic Navigation on Windows Phone 7 with No Code!

The code from this step of the app can be found here. Please leave any suggestions about the code and/or update it yourself - I may or may not be updating it going forward depending on other solutions that come about. I hope to continue similar screencasts over the coming weeks/months, and would definitely appreciate any feedback on how to improve these going forward.

Creating a Windows Phone 7 Metro Style Pivot Application [Part 1]

Note: It has been noted that this screencast and part 2 more closely follow how to create a Panorama style application than a Pivot style application. I hope to fix that in the next part to this series - sorry for the confusion.

A Screencast on Recent Changes to ImageWind.Net


It's been almost a month since I announced ImageWind.net, my current personal Silverlight project. I've really been enjoying working on Image Wind over the last several weeks and I wanted to put together a video showing off what Image Wind currently looks like.

A friend on Twitter turned me on to Screenr.com this week, and that is what I used to record this screencast. I would highly suggest checking out Screenr.com if you want to record something on your computer quick. It records the display and audio with no install (so long as you have Java installed) - really cool.

I'm trying to encourage people headed to PDC 2009 next week to post a bunch of pictures from their phones on Twitter so they can be watched in ImageWind. If you are going to post any pictures from PDC be sure to include "PDC" in the tweet text. Here is where you can find images posted with PDC in the text:
http://www.imagewind.net/index.html?search=pdc

I still have about 20-30 items on my TODO:: list for Image Wind - some of which are pretty big changes. I hope you are checking out ImageWind.net every once and a while and staying on top of the changes being made via the change log. You can also follow @ImageWind on Twitter to stay on top of current work and to see some interesting images discovered via ImageWind.