Design Templates for Windows Phone

Introduction

When building any professional Windows Phone app, you are tasked with making sure your app adheres to the modern design guidelines set forth by Microsoft. A majority of developers do not have the time to read through this document nor do they have access to a designer. This is where Telerik Design Templates can help.

Out of the box, you have access to 50+ ready-to-use content and page templates such as a “Sign up” or “Multipurpose” form, to charting, navigation and much more. You can also download the app from the marketplace, if you want to take a look before installing it on your local machine or log into your account for the templates source code.

Your Personal Designer that is Wizard Friendly.

The actual implementation can be found in two forms, the first is a built-in project template and the second is the “add item” template. We will take a look at both of them.

Project Templates

If you select the project template called, “RadControls for Windows Phone”, then you will see the following screen shown in Figure 1.

Figure 1: Project Configuration Wizard in a new RadControls for Windows Phone App.

From this screen, we have built into the template two of the most common pages in a professional Windows Phone app. The “About” and “How To” page. We have also added the ability to quickly add functionality such as error diagnostics, trial and rate reminders. The error diagnostics will trap any unhandled exceptions and the trial and rate reminders will prompt your users to either purchase the app or rate the app depending on if you desire this functionality or not.

Item Templates

If you simply right click on your solution and select “Add New Item”, you will see “Telerik item” listed. If you click on the “Add” button then you will be presented with the screen shown in Figure 2.

Figure 2: The 50+ design templates available with RadControls for Windows Phone.

You will see a variety of different templates created by our designer, that will that create pages in your application ranging from:

• Charts and Dashboards – Comes complete with dashboards to visualize your data in a variety of different ways. (Financial and Stock Templates are available)
• Navigation – Uses a variety of our controls to navigate from either page to page or however you wish to implement it.
• Pages – Common static pages such as an “About” or “How To” to input forums such as user login information.
• Search, Sort and Filter – provides pages that helps your user find what they are looking for fast.
• Tables –is great for displaying list in a variety of ways.

For example, if I selected the options for the “About” and “How To” page, then added a form such as the “Multipurpose” template found under Pages->Forms, then the necessary references are automatically added to my project as well as my project is structured in a MVVM friendly style. If we look at the app in the designer then it will look like Figure 3.

Figure 3: The Multi-Purpose form created by using the Design Template in RadControls for Windows Phone.

Here we have a multi-purpose form that we could quickly change to fit our applications needs. Again, we have not written one line of code and we have a MVVM friendly application that has some basic error validation which we will see shortly.

With a couple of lines changed in our XAML page, our app now looks like the following inside the designer as shown in Figure 4:

Figure 4: The Multi-Purpose form allowed us to quickly create a travel application.

Now we have a Travel App, that allow us to pick our departing and arriving airport as well as the dates we are leaving and returning on. We can also add an additional passenger if needed. The only thing changed on this page was text provided by the template and the options for the departing and arriving airports.

If we run this application, then we get what we would expect. Multiple airports to select from as shown in Figure 5.

Figure 5: RadDataForm displaying Multiple Airports in our sample travel application.

As well as some built-in validation in case the user did not select a date for “Returning On” as shown in Figure 6 and the completed form shown in Figure 7.

Figure 6: Detected that the user did not enter a date for “Arriving On” in our sample travel application.

Figure 7: The completed form with no errors.

After a valid date is entered then you can do as you wish once the user taps on the “ok” button. Whether it be calling a service to store the data or whatever you wish.

Wrap-Up

As a reminder, this is just one example of the 50+ templates available. As you see from this example, you only had to worry about the backend – not the UI. The UI adheres to Microsoft’s standards and I hope you see just how easy it is to get a working page complete with validation that can be customized to fit your needs in a matter of minutes.

If you are looking for a more in-depth sample, then I’d encourage you to check out the “Picture Gallery” app as it was created using our design templates to allow users to explore and search the flickr photo and author databases. You can grab the source code for that in your telerik account as well.

If you have any questions or comments, then please leave them below.

-Michael Crump (@mbcrump)