The application uses standard controls throughout so that the appearance and behavior of the application matches the Windows Phone 7 standard appearance and behavior. The section, “Displaying Data,” later in this chapter describes how the application implements data binding with the Pivot and Panorama controls.
The Pivot Control
The application uses a Pivot control on the SurveyListView page to enable the user to view different filtered lists of surveys, such as all surveys, new surveys, or favorite surveys, or the list of surveys sorted by length. The control allows the user to navigate between the different lists by panning left or right, or by using flick gestures in the application in a way that is consistent with the user’s expectations in the Windows Phone 7 UI. The developers at Tailspin chose to use the Pivot control here because it enables you to display a set of items that all have the same data type: in Tailspin Surveys, each PivotItem control displays a list of surveys.
The Panorama Control
The application uses the Panorama control on the TakeSurveyView page to display the survey questions and collect the survey responses. The developers at Tailspin chose to use the Panorama control here because its large scrollable area offers a great way to display a complete survey and long text items, with an intuitive way to navigate by scrolling left or right through the questions. The Panorama control also works well when you need to display a set of items with different
data types: in the Tailspin Surveys application, the Panorama control displays different question types on the same page.
Styling and Control Templates
The file Styles.xaml in the Themes folder contains some styling information for several of the controls used on the pages in the application. The ListBox controls that the application uses to display lists of surveys on the SurveyListView page use the SurveyTemplateItemStyle style.
The SurveyListView page uses the NoItemsTextBlock control template to display a message when there are no surveys to display in the ListBox control.
The SurveyListView page uses the SettingNotConfiguredPanel control template to display a message when the user hasn’t configured his settings in the application.
The ThemedResourceLocator class in the Resources folder shows how the application handles UI changes if the user chooses either the Dark or Light Windows Phone 7 themes. Although most controls automatically adjust to different UI themes, there are a few places in the Tailspin mobile client that need some additional logic, such as where the application uses custom icons.
Context Menus
On the SurveyListView page, if the user taps a survey name, the application navigates to the TakeSurveyView page and displays the survey questions. If the user taps and holds on a survey name on the SurveyListView page, the application displays a context menu.
Note: You can find the behavior that causes the context menu to display in the ContextMenu control itself.
Tailspin uses the ContextMenu control from the Microsoft Silverlight ® for Windows Phone Toolkit, which is available on the Silverlight Toolkit page on CodePlex (http://silverlight.codeplex.com).
The following code example from the data template in the Styles. xaml file shows how Tailspin declares the ContextMenu control that displays the context menu when the user taps and holds on a survey name.
XAML
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header=”mark as favorite”
Command=”{Binding MarkFavoriteCommand}”
Visibility=”{Binding IsFavorite,
Converter={StaticResource NegativeVisibilityConverter}}”/>
<toolkit:MenuItem Header=”remove mark as favorite”
Command=”{Binding RemoveFavoriteCommand}”
Visibility=”{Binding IsFavorite,
Converter={StaticResource VisibilityConverter}}”/>
<toolkit:MenuItem Header=”survey details”
Command=”{Binding ShowDetailsCommand}”/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
Using the Model-View-ViewModel Pattern
Now that you’ve seen how Tailspin designed the UI of the application, including the choice of controls, and the navigation through the application, it’s time to look behind the scenes to discover how Tailspin structured the mobile client for the Windows Phone 7 platform.
The developers at Tailspin decided to adopt a Model-View- ViewModel (MVVM) approach to structuring the Windows Phone 7 application. This section provides an overview of MVVM, explains why it is appropriate for Windows Phone 7 applications, and highlights some of the decisions made by the developers at Tailspin about the implementation.