WP7 Design Templates

Do yourself a favour.  Don’t write another line of WP7 XAML without the WP7 Design Templates.

Wp7 Design Template ScreenWe WP7 devs have been complaining since the CTP that although there is documentation for the Phone’s UI, it is almost impossible for most developers to create apps that are consistent.  Sure we can make things that look much like what you see in native phone apps but there are always subtle (and not so subtle) differences.

The SDK has a few built-in resources for colors and fonts, and some basic control themes that rather crudely approximate native look and feel, but there is little help when it comes to margins, padding phone sizes and layout styles.  Developing apps that adhere to the guidance and maintain the look and feel of the native OS has been a pain in the ass. 

The problem has been make slightly easier by the release of the Windows Phone 7 UX Guide application by the Expression Blend team.  This is a project (which is itself a WP7 app) which includes some default layouts for common scenarios.

It includes default layouts and templates for:

  • Buttons
  • Check Boxes
  • List Views
  • Toggle Switch (Silverlight WP7 Toolkit)
  • Dialog Boxes
  • Context Menu (Silverlight WP7 Toolkit)
  • Slider

It doesn’t really help for any of those projects you already have UI for.  But if you are starting a new piece of UI it is simply a matter of copy and pasting the XAML of the layout you want to replicate into your project.  Then you can start customizing it as required.

This code is super helpful.  If you are going for the native look and feel then these examples are definitely your best starting place.  But bear in mind you do not have to make your app follow the default UI.  It’s okay to be different but the thing is it is an all or nothing game.  Either your app follows the UI guidelines or it should look completely different.

This CodePlex project is a good start by Microsoft to make it easier to create apps that follow the native UI (exactly, not just kind of the same), but it’s not complete and not really a long-term solution.  Using “copy and paste” inheritance is not usually a good idea.  When the next version of these templates get posted to CodePlex there is not going to be any way of updating existing projects. 

There are still plenty of things that need to just be a part of the framework (either as Blend assets, libraries or part of the API), like animations.  It is impossible to mimic some of the native animations currently in Silverlight.  Something as simple as the page flip animations are extremely hard to replicate – and before you say it, yes I know how to do a page flip animation.  It is making it feel exactly the native one that is hard. 

Even though the Design Templates haven’t shipped with Blend (and they really should have) they are still a good starting point, so go download them now.

The “Windows Phone 7 Disaster” Disaster

I came across this InfoWorld article in my journeys across the web which I thought was rather laughable.  With a title like “Windows Phone 7 a ‘disaster’ says Infoworld after developer demo” you know are in for a straight down the line, honest report straight off the bat.  Bear in mind that the author of the article was Galen Gruman, a reporter who is described as someone who “likes to offer an authoritarian opinion about tech subjects, but rarely has any clue what he’s talking about.” 

Now the article is clearly flamebait (or clickbait) and written with the express intent in being incedary and stirring up controversy.  That seems to be a modus operandi of Mr. Gruman (see articles such as “iPad Pre-Orders: For Idiots Only” for example).  The problem is that, by his own admission, the guy hasn’t actually even used real phone and is going purely on what he has seen in a presentation. 

Aside from the bogus conclusion that he makes there are a number of factual error in the report.

Microsoft has just released a beta SDK for its mobile Silverlight tools, so developers can only now start investigating Windows Phone 7’s capabilities

In actual fact the CTP of all the developer tools has been available since the MIX10 conference back in March.

The big tiles quickly eat up screen real estate (about four fit), so you don’t get the compact access to apps that all the other major mobile operating systems provide

Gruman again is completely missing the point of what the titles do and mean.  The tiles are not application icons as they are in other devices.  They are not there to launch apps.  They’re there to provide information.  The whole point is that you get the information without having to launch the apps.  You can debate whether or not they do this effectively but it seems Gruman has missed the point entirely.

It does not support multitasking except for Microsoft’s own first-party apps … when you switch applications, they shut down — just like the iPhone did until iOS 4 was released this spring.

True, however lets not forget that the iPhone even in iOS4 doesn’t support full multitasking either (only audio, voip and location apps can truly multitask).  Other apps have to rely on “Fast app switching” and “Push notifications” which the Windows Phone 7 does. 

Also, am I the only one who sees the irony in the fact that Gruman knocks the WP7 for its lack of multitasking yet is also the author of an article only 4 months ago titled: “Why the IPhone doesn’t need multitasking“?

Windows Phone 7 is a pale imitation of the 2007-era iPhone.

Personal opinions as to is paleness aside, how does it technically compare to the 2007 iPhone?  Well the original iPhone didn’t have a 3G connectivity, a camera flash, a compass, video capability, GPS and even for that matter AppStore. These are the major evolutions in smartphones since the 2007 iPhone, and they are each clear and present in Windows Phone 7.  Again Gruman is completely unjustified.  Even more so if you want to consider things that WP7 will have which the iPhone doesn’t such as external storage and the potential for hardware support for 4G.  Not to knock Apple I’m just pointing out the inanity of Grumans argument.

Apple’s iPhone is the top smart phone when it comes to data usage such as via the Web and apps, and Google’s Android is close on its heels. The iPhone is well-established and entrenched, and Android is fast becoming so. Microsoft is nowhere, having essentially pulled out of the mobile market.

Wrong on two counts.  Firstly the iPhone is not the top smart phone when it comes to data usage, not by a long stretch.  Secondly according to the latest comScore ratings Microsoft actually has a bigger smart phone market share that Google (granted Google is on the way up and Microsoft on the way down but as it stands now Windows Phones actually have a bigger market share than Android – in the US anyway).

 The Windows Phone 7 does have issues, of that there is no doubt but the simple truth is that no-one can tell at this stage whether this platform is going to be successful.   It has a lot going for it.  To my mind it’s  only real problem is the that phone isn’t finished and isn’t going to be finished when it is released.  It will be functional for sure, it will work, but it will also be missing a lot of features.  

The real story, that Gruman completely missed in his effort to be controversial, is not which features the phone missing, but will the features that are there be compelling enough to draw users in and keep them?  This is exactly the fine line that Apple walked when it released the first iPhone which was also unfinished (it didn’t even have an app store, remember?).  In Apple’s case what was there was enough that compelling to pull the phone through.  The big question is: is the same true for Microsoft?

Creating a Windows Phone 7 Application Bar

The Application Bar is the almost like a toolbar in a Windows Phone 7 application.

The Application Bar provides a place for developers to display up to four
of the most common application tasks and views as icon buttons.

— Windows Phone 7 Design and Interaction Guide

Windows Phone 7 Application Bar  

As you would expect its easy enough to add one of these to your page with the following XAML: 

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True">
            <shell:ApplicationBar.Buttons>
                <shell:ApplicationBarIconButton IconUri="/images/button1.png" Text="Recent" />
                <shell:ApplicationBarIconButton IconUri="/images/button2.png" Text="Nearest" />
            </shell:ApplicationBar.Buttons>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

This assumes that you’ve imported the Microsoft.Phone.Controls namespace as phone, using the following: 

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

ApplicationBar is not a Silverlight Control

That the Application Bar is part of the Phone OS, it is not a Silverlight control – or more correctly it’s not a FrameworkElement. This has a couple of implications.

Firstly the resource images used by the control must have their Build Action set to Content not Resource as is usually the case with Silverlight resources. This is because it is the OS that is displaying the bar not your application, so the icons need to be compiled as resources for the OS to access them.

Build Action set to Content

Secondly, as it is an OS control Expression Blend won’t know what to do with it either. A place holder will show up in Blend but you won’t see your customisations and won’t be able to set design time properties on it.

Thirdly it has no Silverlight means no dependency properties. No dependency properties means no binding goodness. You’re on your own with the XAML there. If you need to make it dynamic (such as localising the language) you need to write come code to update it.

Default Icons

A set of 64 Application Bar icons are included in the WP7 SDK (find them in c:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons. Note however that they provide 32 dark and 32 light versions of the same icons. Only the white icons should be used in the Application Bar. If you want to create your own icons the Microsoft Design Templates for Windows Phone 7 have some guidance on the format. They should be 48x48px, have a white foreground colour and use the Segoe WP SemiBold font for any characters (although text only icons are not allowed). Bear in mind that the white circle around the icon is added automatically by the OS, you don’t have to include it in your icon.

Application Bar Menu

Adding menu items to the bar is done in exactly the same way, except you’re adding ApplicationBarMenuItems to the MenuItems collection on the ApplicationBar.

Official WP7 Pivot and Panorama Controls On Their Way

Of course one of the most compelling and unique aspects of the Metro UI on Windows Phone 7 is that nifty Panorama, where the UI surface a virtual canvas which is divided into columns.  The phone screen provides a viewport onto one column at a time.
Windows Phone Panorama

Games Hub using a Panorama

Microsoft call this the Panorama effect (unsuprisingly) and discuss it in some length in the WP7 Design and Interaction Guide:

“Panorama applications are a part of the core Windows Phone OS 7.0
visual experience. Unlike standard applications that are designed to fit
within the confines of the phone screen, these applications offer a unique
way to view controls, data, and services by using a long horizontal canvas
that extends beyond the confines of the screen. These inherently dynami
applications use layered animations and content so that layers smoothly
pan at different speeds, similar to parallax effects.”

Thats sounds great.  How do I go about creating this effect in my application?

You can’t!  Ah…fallen at the first hurdle.  To quote the Design and Interaction Guide again:

Microsoft will provide a control and design template to support
building Panoramas at a later date. Microsoft recommends that designers
and developers wait to implement Panoramas until final guidance is
available

Well yes this is only a CTP, so I guess we just have to wait…..or at build it ourselves.  Unprisingly a few people have done just that:       

While these all ostensibly solve the problem they all do suffer from the same drawback.  They are a best a temporary solution. 

But why?  If they work why do we need to bother with the official Microsoft version when it comes out? 

Well the truth is while they are all broadly similar to each other and to the built in Panoramas, there are subtle differences between each of these implementations.  They don’t neccessarily all scroll at the same speed.  The columns aren’t exactly the same widths.  The title text margins aren’t exactly the same. The thing is if the Panorama is going to such a pervasive UI paradigm it has to be consistently implemented everywhere – in the OS and in apps – right down to the little docking animations and the speed and sensitivity of the scrolling.   These may sound like small things but it all adds up to give the user a consistent experience and make the UI feel familiar and intuitive.       

Following Microsoft’s advice to just not implement Panoramas until later just isn’t practical.  We’re developing applications now – we can just leave out something so fundametal to our UI designs – so for now any of the above solutions are workable.  I would suggest using one of the 2 ready built open source controls as a) they are easy enough get started with and b) are not likely to be too far removed from the final version that Microsoft ships.

But please, for the love of God, don’t forget to switch to the official version when it comes out.  And not just because it’s better to use the supported version but because, as I mentioned, the Panorama experience needs to look and work consistenly across the wider environment, including in your application.

UPDATE 24/06/2010:

Windows Phone Beta 1 has dropped but alas the panorama and pivot controls didn’t make it.  It looks like they are coming in the next few weeks, presumably in the form of an out-of-band download, or maybe they are planning on open sourcing it on CodePlex.

Bing Maps Nerfed in WP7 April CTP

I downloaded the April CTP Windows Phone 7 tools, eager to test out an idea I had for some geolocation action.  Installed Bing Maps Silverlight Control and fired up VS2010 and…cue sad trombone

A first chance exception of type 'System.IO.FileLoadException' occurred in mscorlib.dll

Brandon Wilson from the WP7 team posted the details but it turns out there is a bug the latest bits where by the WinPhone OS will only load assemblies signed with a Windows Phone Certificate – i.e. are part of the Windows Phone 7 SDK.   As Bing Maps is part of the Silverlight SDK it won’t load.  Game over.

There is a work around, which involves hacking the Bing Maps assemblies and removing the certificate from them.  Brandon has a PowerShell script for doing this.   It creates a copy of the Silverlight assemblies and strips the certs from them so the WP7 will load them.  You then have to reference the hacked assemblies instead of the real ones.

Unfortunately this didn’t work for me.  I’m not sure why.  Probably there is some assembly along the chain that still has a cert but I don’t really have the time to work it out.  Alas my goelocation genius idea will have to wait another day (or until the next CTP refresh).

Tim Heuer also has some info.

Charles Petzold is giving away his WP7 book for free

I’m a big fan of Charels Petzold.  I caught his pre-conferrence session on WPF at PDC back in 2009 and I really enjoyed it.  Also he has an uncanny resemblence to Terry Pratchett.

Photo of Terry Pratchet Photo Charles Petzold

Pratchett and Petzold (but which one is which? – and no cheating by looking at the T-Shirt)

For those who don’t know Petzold wrote the defacto standard on programming the win32 API – Programming Windows.  He also wrote one of the first useful WPF programming books – Application = Code + Markup.

Anyway he has set about writing a book for programming Window Phone 7 Series  and more interestingly he is giving it away for free.   I for one can’t wait.

Windows Phone 7 Series Announced

Windows Phone 7 SeriesHave you ever had to accept an insult from someone only to think of the perfect come back 3 hours later.    Well that must kinda be how Microsoft is feeling round about now.  About 3 years ago Apple slapped Microsoft (and the rest of the phone industry) across the face with the IPhone saying “Yo’ Mamma needs a smart phone!” (or in fact “We have a smart phone that your mother could actually use.  She should try it. We think she’d like it”). 

What was Microsoft’s witty response at the jibe at the time? To release Windows Mobile 6 a month later and storm off in a huff.  Well it seems like for the past 3 years they’ve been quietly steaming in the corner, trying to come up with a suitable retort.  And it looks like they have one with the long rumoured “Zune Phone” which was announced a few says ago – or to give it its correct name the “Windows Phone 7 Series” – trips off the tongue don’t it?

Ok, so never let it be said that Microsoft are always the first guest at the party, but hey, better late than never.  In fact entering a market late, yet going on to claim a significant share is Microsoft’s modus operandi and it has worked out fairly well for them in the past – consider the XBOX, Dynamics CRM, Internet Explorer and even Windows itself (and DOS before that for that matter).  They weren’t the first with any of these products but still hold significant market share.  That said it that strategy doesn’t always work.  And the problem is that the best example of this is the Zune itself.

There is no word on the release date (before holiday 2010 is all they’re saying) or what the final phones will look like.  We do know that unlike Apple, Microsoft will not be making the physical devices.  The setup will be more like Android in that respect. 

From the developers point of view more info will be coming at this years MIX10 Conference.