Telerik blogs

Getting Started

This is part 1 of the series on building WP7 ToDo application with Telerik WP7 Control toolkit. Please refer to the "master" blog post for more details and links for the other part of the series.

The first step for us when starting to work on the application was to create the wireframes. Our wireframes basically consisted of the app screens and the flow diagrams for all the actions that users can do in the application. Download a PDF file with all wireframes of the application.  

ToDo WP7 application - home page wireframes

The benefit for having these wireframes (still no graphic design available) at this early stage helped both developers and designers to get a very good idea of the application and to discuss how the things will be implemented from developer and designer perspective. Once the wireframes are final the actual implementation of the application can be started. With Silverlight as an app framework the design can be applied without almost any codes changes at a later stage.

Below is a screenshot of the final home page design. 

WP7 ToDo application - home page design

Download here the whole application design with all application screens in high quality.
 
If you are new to WP7 development you will see some new UI elements on the screens of the application – mainly the Panorama and Pivot controls. These two controls are part of the new design concept developed from Microsoft called Metro. The Metro design concept is very well documented by Microsoft – you can find the latest specification here. I also highly recommend reading this blog post by Jeff Wilcox (one of the lead Microsoft WP7 devs). It is very important to keep all the spacings, alignments and colors defined in the guidelines in order to keep your appilcation consistent with the application that exist on the WP7 device.

The Panorama control is usually used on the home page of your application – this is the starting point where you can show the highlights of the application, latest updates and to point the users how to get more info and to dig deeper into the application functionality.

In Telerik ToDo application we are showing the most important information for the user - list of the tasks that are due for today, tomorrow and the days that follow. We also show with alert color if there are tasks which are overdue. When users scroll the Panorama horizontally they can see the list of projects and categories. At the last PanoramaItem we are listing all the important links to the internal pages of the application – e.g. – all tasks, all projects, all categories, etc.

One of the most important things when designing your panorama is to keep it as simple and as light as possible. Panorama control is very sensitive when talking in terms of performance. The reason for this is that the panorama control is an ItemsControl, but it is not virtualized and all the content inside all of the panorama items are rendered on initial load. If you have a lot of content this can kill the performance and all the smooth animations that are part from the panorama experience will be skipped from the OS.  To see many other performance tips for the phone - please check this blog post by Tim Heuer. There is also official document provided by Microsoft about how to create apps with performance in mind for the phone.

The Pivot control is used when you want to display different views over one and the same data source. In ToDo application we are using Pivot control in "All Tasks" page. We have the following pivot items – active tasks, delayed tasks, completed tasks. Pivot control, like the Panorama control is also an ItemsControl. The advantage of the Pivot control over the panorama is that it is virtualized. On initial load only the current item is rendered, together with the next item – so you still have at least 2 items realized, but it is still much faster than the panorama control. I’ll not go into many details on the panorama and pivot controls here – they are easy to use – just fill them with data. Here is the simplest usage of a pivot control used in the "All Tasks" page:

<controls:Pivot Margin="0,57,12,0" Style="{StaticResource PivotStyle}" >
    <controls:Pivot.TitleTemplate>
        <DataTemplate>
            <TextBlock Style="{StaticResource PageTitleStyle}" Text="ALL TASKS"/>
        </DataTemplate>
    </controls:Pivot.TitleTemplate>
    <controls:PivotItem Header="today">
        <telerikPrimitives:RadDataBoundListBox ItemTap="Tasks_ItemTap" Margin="12,0,0,0" x:Name="TodayTasks" ItemTemplate="{StaticResource TaskDetailsTemplate}" IsAsyncBalanceEnabled="True"/>
    </controls:PivotItem>
    <controls:PivotItem Header="tomorow">
        <telerikPrimitives:RadDataBoundListBox ItemTap="Tasks_ItemTap" Margin="12,0,0,0" x:Name="TomorrowTasks" ItemTemplate="{StaticResource TaskDetailsTemplate}" IsAsyncBalanceEnabled="True"/>
    </controls:PivotItem>
    <controls:PivotItem Header="next">
        <telerikPrimitives:RadDataBoundListBox ItemTap="Tasks_ItemTap" Margin="12,0,0,0" x:Name="NextTasks" ItemTemplate="{StaticResource TaskDetailsTemplate}" IsAsyncBalanceEnabled="True"/>
    </controls:PivotItem>
    <controls:PivotItem Header="delayed">
        <telerikPrimitives:RadDataBoundListBox ItemTap="Tasks_ItemTap" Margin="12,0,0,0" x:Name="DelayedTasks" ItemTemplate="{StaticResource TaskDetailsTemplate}" IsAsyncBalanceEnabled="True"/>
    </controls:PivotItem>
    <controls:PivotItem Header="completed">
        <telerikPrimitives:RadDataBoundListBox ItemTap="Tasks_ItemTap" Margin="12,0,0,0" x:Name="CompletedTasks" ItemTemplate="{StaticResource TaskDetailsTemplate}" IsAsyncBalanceEnabled="True"/>
    </controls:PivotItem>
</controls:Pivot>

 

In the next blog post from the series I will show you how the home screen of the application is implemented.


About the Author

Valio Stoychev

Valentin Stoychev (@ValioStoychev) for long has been part of Telerik and worked on almost every UI suite that came out of Telerik. Valio now works as a Product Manager and strives to make every customer a successful customer.

 

Comments

Comments are disabled in preview mode.