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.

Please Vote for my Mix 2010 Session!

Developing Without Limitations

The voting for the Open Call entries for Mix 2010 sessions is now open, and I would love to have your vote! The title of the session is Developing Without Limitations, although if I had to rename it I would probably rename it something like 'Developing Outside the Box'. You can expect this session to cover a handful of topics I've briefly covered on this blog including Thinking Outside the Box - Using Programatic Animations in Silverlight and Street Fighter Style UI Compositing With Prism - mostly we'll be tackling new ways to approach new UI's in Silverlight and WPF.

Here is the session abstract:

As developers, we do well working within the comfortable framework of the technology platforms that are available to us. But with new platforms like WPF and Silverlight, developers need to learn how to think outside the box when it comes to creating engaging and cutting edge experiences. How can we use new presentation layer technologies to create more engaging applications? How can we as developers help move away from the traditional battleship grey applications and create more modern, engaging, and interactive applications?

Drawing on Roger’s recent experience leveraging Silverlight technology, this presentation provides insights on how developers can learn to think without limitations. You’ll also gain a deeper understanding of how strategy, creative and technology can work together to maximize the potential of the digital medium.

While you're voting, check out my coworker's session Lighting Up With Blend, and thanks for your consideration!

Street Fighter Style UI Compositing With Prism

If you're into Silverlight or WPF, then you've undoubtedly heard the nonstop clamoring over Composite Application Guidance for WPF and Silverlight - aka Prism. I have a list of things in Evernote that I'd love to write about Prism, but I figured I would write about something I actually felt like typing up instead - something I tend to call Street Fighter style compositing in Prism.

Recap on UI Compositing in Prism

You already know one of the bigger parts of Prism is the UI compositing it supports. Regions are defined in the Shell.xaml and you inject modules into them. The idea being that you can add, remove, and swap out sections of your application dynamically. It's one of many great technologies in Prism.

Sample Stock Trader application using UI compositing

Prism documentation highlighting defined regions

Street Fighter Style Compositing in Prism

Having done a few Prism applications, I've found that the composite UI support in Prism is really snazzy, but I've also found that I don't tend to use it the way that most Prism examples show it off. While I will frequently define region areas like shown in the example above, I will just as frequently use regions for layering - kinda like how they did it in Street Fighter.

If you've played Street Fighter before then surely you've noticed that the UI is made up of layers on top of layers. The bottom layer is the static stage background, a layer on top of that might be the animated characters in the background, the layer above that may be where the fighters are shown, above that a layer for projectiles, above that a layer for health bars and high scores, and a layer above that for the menu - which is currently hidden.

If you're going to try and do this kind of layering with regions in Prism then one thing to keep handy is how to create a Prism region whose contents will not specify a specific size, but will scale to fit the entire region. You'll want this code snippet for such a region:

<!-- image popup area -->
<ItemsControl cal:RegionManager.RegionName="ImagePresentationRegion">

The reason I find myself using this style of composition is that it allows a lot more flexibility if you're not creating a rigid desktop style layout. Using full window overlays will make it easy to place modules into the region centered horizontally and vertically - popup menus or loading status windows for example. There are some really neat things you can do with this kind of layering, especially with perceived depth - but that's not really the point of this article.

A Quick Example

Regions used in ImageWind.net alongside its current appearance

To use Image Wind as an example, here is a rough outline of the regions used (from back to front):

  • background layer
  • image side scrolling layer
  • title region (upper left)
  • controller region (lower left)
  • full size image display popup layer
  • popup dialog / loading layer (various modules displayed in center)
  • beta badge and service error region (upper right)

Wrap up
The main point of this article wasn't to show the cool stuff you can do with layering, or to cover when you might want to do layering within the same region versus in different regions, etc. The point of this article was really just to make sure that the composite UI in Prism isn't always thought of in such a rigid way. Oh, and to coin the term 'Street Fighter' style compositing.

A rough outline of the region layout from another recent project