In the previous episode of this series about how to develop a Windows Phone application from scratch you learned how you can transfer data between an application and a PeriodicTask by using a file in IsolatedStorage. With that, the most important functionality of EvenTiles is in place. Today we will add the User Interface for an About Page to the application. Since we are not worrying about functionality yet, we will use Expression Blend exclusively in today’s part of the EvenTiles series.

An empty About Page is already part of our EvenTiles solution, and it can already be reached by clicking the corresponding icon on the ApplicationBar. The final About Page should look like this (with the upper 4 fields ready to fill in some data programmatically), some explaining text and a few buttons.

The UI of the About Page is not that complex as you can see. It consists of a Grid Control containing a Border Control, a TextBlock and a number of Buttons, each on separate rows. All rows containing UI Elements have their height defined as auto. To complete the layout, two empty rows are also defined that fill up unused space on the page.

The Border Control contains another Grid Control which in turn contains 4 rows and 2 columns, all containing TextBlocks. The TextBlock that holds the version number of the application will be filled programmatically with the assembly version number that is defined for the application. The color of the Border Control and of the TextBlocks inside it is defined to be the accent color, so it will automatically change when the user changes the theme colors on the phone.

To keep the margins for text in each TextBlock consistent, we make sure to use one of the predefined styles on them from inside Expression Blend (all are using a PhoneTextNormalStyle). If you want to learn more about creating consistent user interfaces for Windows Phone pages, you should take a look at this excellent blog article from Jeff Wilcox with great tips on Metro Design.

In order to nicely divide a number of UI elements over the About Page, we are making use of the ContentPanel Grid. Inside that Grid, we define a few more Rows than we actually need, just to make sure that our layout looks good.

You can see that in the this screen shot, where all rows and columns are visible. The dotted lines show all rows and columns available, both for the Grid inside the Border and for the entire ContentPanel. In the ContentPanel you see two blank rows, they are used to fill up unused space on the page, by specifying their height to be of size “1*”. All the other rows are using the height they need by specifying their height to be auto.

The other thing that is noticeable, is the image to the left of the text inside the upper button. This button is created with a StackPanel defining its Content area. The StackPanel holds both an Image and a TextBlock and is defined as follows in XAML:

You can also see that we simply re-use the email icon that ships with the tools for use in an ApplicationBar. Of course it is rather hard to show how to create a user interface inside a blog article. Most likely it makes more sense for this episode of EvenTiles to watch the accompanying video, in which you can see how the entire user interface for this page was created using Expression Blend.

In the next episode of EvenTiles we return to actual programming, when we add functionality to the AboutPage to access MarketPlace, to submit application reviews and to use a Launcher to create / send an email message. You will also learn how to retrieve the application’s version number programmatically. Just make sure to return to this blog regularly or to subscribe to the RSS feed.

If you want to see EvenTiles already in action on your Windows Phone, you can also install the latest version from Marketplace. Remember that this application is not meant to be extremely useful, although it contains similar functionality that “serious” applications have. Just go ahead and get your free copy of EvenTiles from Marketplace at this location: http://www.windowsphone.com/en-US/search?q=EvenTiles (or search on your phone for EvenTiles in the Marketplace application).