1
2
3
4
5
6

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.

Preview of My Current Windows Phone 7 Pivot Work

I got some feedback after part 1 and part 2 of how to create a Pivot style for your Windows Phone 7 application - what I had created had a few issues. First, the pivot menu items across the top of the screen is supposed to be an endless scrolling menu. Second, there wasn't supposed to be an overlay of each pivot page on the edge like there is in the Panorama style.

I took a closer look at exactly how the Pivot control should look and interact. In the process I noticed that the Zune HD's pivot menu is actually different - it doesn't have an endless menu across the top. I also noticed that the menu on my AT&T U-Verse box uses the pivot style as well (not surprising, it runs on a Microsoft Media Room) - and it doesn't endlessly repeat either. The only way I could try and figure out exactly how it should look was by looking at the hacked ROM that showed up on the web right after MIX.

Above is a video of my current Pivot app (on right) working very closely to what can be found in the Photos application in the hacked WP7 ROM (on left). This was built by modifying the code from Creating a Windows Phone 7 Metro Style Pivot Application [Part 2]. I was hoping to get the code posted before heading out of town, but there is still some tweaking left to do - I will be posting a part 3 sometime next week.

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.

Metro Icons for Windows Phone 7

During the Windows Phone UI and Design Language session at Mix, the presenters talked about the Metro styled icons, and how applications of similar type should make use of the standard set of icons if possible. I had been hoping these icons would be released with the SDK, but I couldn't find them anywhere. It never struck me to just take them out of the powerpoint deck posted online (thanks for the suggestion Josh).

Windows Phone 7 Tools Are Here, Time to Get Crackin'

I just got back from 5 days in Vegas for Mix 2010 (where I was a top 5 tweeter). Hopefully by now you've watched the first day's keynote and seen some of the awesomeness unveiled. If not, I'd highly suggest checking it out for demos of Netflix, Four Square, graphic.ly, and other apps running on Windows Phone 7. You'll probably want to check out the sessions on the marketplace, the 'Metro' design, etc. but once you're done you'll probably want to get crackin' writing apps for Windows Phone 7, so I threw together a grab bag of handy links to get you started:

Windows Phone Developer Blog
Windows Phone 7 Series Forum
Community Resources for Windows Phone Development

Videos of MIX10 Windows Phone sessions
Windows Phone 7 Series UI Design & Interaction Guide
Free ebook: Programming Windows Phone 7 Series (DRAFT Preview)
Developing applications and games for Windows Phone 7 Series
Install checklist for Silverlight 4 RC, Blend 4 Beta and Windows Phone Developer tools from MIX10

While not directly related to Windows Phone 7 development, these other recent links can come in real handy when developing for Windows Phone 7 Series:
.toolbox - a cute site teaching basic design concepts
Silverlight Training Course (Silverlight 4)
Visual Studio 2010 XAML Editor IntelliSense Presenter Extension

It should go without saying, but my primary focus going forward right now is Silverlight development on Windows Phone 7 - I am sure I'll be posting quite a bit on it in the coming months.

Recent Presentation at the Atlanta Silverlight Meetup

image courtesy of @ideakitchn

Last week I got the opportunity to present at the Atlanta Silverlight Meetup. I presented a talk entitled 'Thinking Outside the Battleship Gray Box' primarily focused on UI manipulations. Here was the synopsis:

As developers, we’ve grown accustomed to the confines of the technology platforms available to us. With new platforms like WPF and Silverlight, developers must change their perceived limitations and learn how to think outside the box to create engaging experiences. How can we use new presentation layer technologies to create more engaging applications and break away from the traditional battleship gray windows application?

The talk made reference to my posts Thinking Outside the Box - Using Programatic Animations in Silverlight and Street Fighter Style UI Compositing With Prism. You can find a screencast recording from the event below.