I can’t believe that it has almost been a year since we launched the Windows Phone 7 developer tools at Mix 2010. Developers have built some awesome apps for the platform. Some independent developers (one man shops) are having great success.
Getting started developing Windows Phone apps is very easy. The tools are awesome and free and there is great content available to get started. That being said, many of the developers I meet wanted to see a “behind the scene” look at building an app. So I want to create this blog series to describe what it take to create what I think is a nice app. I am going to cover design, locations services, accessing external data, application lifecycle and certification process.
The App
Before we go any further, bellow is the app I am going to dissect. The concept is very straight forward. It shows a list of local gas prices. It tries to locate the user but it also allows users to search by a different zipcode. It also provides a detailed view of the station with a map and other gas grade prices. It also provides users with the option to add stations to a “favorites” list.
App UI Design
This is one of the areas where the Windows Phone platform really shines. It is actually very hard to create an ugly WP7 app. The platform provides some great templates and an awesome design language / guidelines we call Metro. I will call out some of these specific guidelines through this series but here are the four main principals that guides Metro: (To get an in-depth tutorial on Metro visit this site.)
Motion is what brings the interface to life. Transitions are just as important as graphical design. By developing a consistent set of motions or animations, a system is created that provides context for usability, extra dimension and depth and improves the perceived performance of the whole interface.
Content not Chrome is one of the more unique principles of Metro. By removing all notions of extra chrome in the UI, the content becomes the main focus. This is especially relevant due to the smaller screen size and gesture-based interactions.
Honesty. Design explicitly for the form factor of a hand held device using touch, a high resolution screen and simplified and expedited forms of interaction. In other words, be “authentically digital”.
Choosing the Template
While you can totally start from a black page, the tools provides us with three pretty good templates we could build from (List, Pivot and Panorama). We can actually mix and match these templates. For our app, we are going to go with the panorama template. As a Windows Phone user, I love the way data flows with this template. I also like the pivot template and I tend to use it a lot as well. However, I would not use a panorama template if the main / starting layout is a pivot template. It just does not look or feel right. The key is to try different things and if it feels out of place, it is.
Ok so simply open Visual Studio and create a new project. Select Silverlight for Windows Phone and then select Windows Phone Panorama Application.
Now we have our template. Lets start modifying it.
First thing we need to do is to change the background. This is typically where I would get stuck because I have zero graphic skills. The good things is that there are a tons of sites you can go to and grab some nice images you can use for free. Make sure you review the license to make you are can use them on your app. Here is a sample of such site. Image should be 1024 x 768 but the width can be bigger. Once you have a background image selected simply added to your project. Make sure the build action type on the property pane is set to Resource. You also need to go to the.xaml file and point the panorama control to the new image as shown bellow. You can also just replace the “PanoramaBackground.png” file and that way you don’t have to change the xaml file. For our project, I am going to create a new folder to hold all the images. It just keeps things more organized.
<controls:Panorama.Background> <ImageBrush ImageSource="NewImage.png"/> </controls:Panorama.Background>
Our app now looks like this:
Since we are talk about images, lets grab all the icons we plan to use and put them in the new images folder. The Windows Phone SDK comes with some basic ones. They get installed in C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0. For the icons, make sure the Build Action is set to content.
Finally, lets complete our layout by creating all of the panorama items we want to include in our app. We need a local or nearby, search, favorites and menu. The items are define in the xaml. For now, lets just rename the header text. Only 2 items are include in the template so you need to add a few more. You can have up to five.
<controls:PanoramaItem Header="nearby"> <!--Double line list with text wrapping--> <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Items}"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Margin="0,0,0,17" Width="432"> <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </controls:PanoramaItem>>
Now our layout is starting to take form.
Well folks that is it for now. Next post I will discuss the application architecture and project structure.