The Design of the User Interface

On this page:	Download:
You Will Learn | Page Navigation | User Interface Description | User Interface Elements - The Pivot Control, Styling and Control Templates, Context Menus

You Will Learn

• How to create the page navigation experience for the mobile client application.
• Where to use the Pivot control in the mobile client application.
• How to use the ContextMenu control in the mobile client application.

The Tailspin Surveys mobile client application follows the UI design guidance published in the User Experience Design Guidelines for Windows Phone, which you can view on MSDN.

User Experience Design Guidelines for Windows Phone describes best practices for designing the UI of a Windows Phone application.

This section describes how users navigate between the different pages of the mobile client application and outlines the controls that Tailspin uses in the application's UI.

Page Navigation

The Tailspin mobile client application uses only a small number of pages, with a limited number of navigation routes between those pages. However, it also supports pinning Tiles to Start. A Tile is a link to an application displayed in Start. An Application Tile can be pinned to Start, which when tapped by the user will launch the application. Users can also pin a survey as a secondary Tile to Start. When a secondary Tile is tapped by the user, the application is launched and the survey page is navigated to. The intention of this is to offer the user quick and easy access to part of the application. For more information about tiles, you should read the section, "Using Live Tiles on the Phone," in Chapter 3, "Using Services on the Phone."

Christine Says:
	Applications for the phone should be task-based. Users will pick up the device, use the application, and then get on with something else. Users don't want a complicated application with a lot of different pages.</td>

Figure 3 shows how the user navigates within the application on the phone.

Figure 3

Navigation in the Surveys client application

When the application is launched from anything other than a secondary Tile, the initial screen to display is determined from the DefaultTask element in the WMAppManifest.xml file. The following code example shows how the application is configured to first display the SurveyListView page to the user.

<Tasks>
  <DefaultTask Name ="_default" 
    NavigationPage="Views/SurveyList/SurveyListView.xaml"/>
</Tasks>

When the application is launched from a secondary Tile, the application launches the page specified by the navigation destination of the Tile.

Before users can use the application for the first time, they must enter the credentials that will be used when the application synchronizes with the Tailspin Surveys service. The developers at Tailspin considered automatically navigating users to the AppSettingsView page if they haven't already supplied their credentials, but this introduced an issue with the way navigation behaves in the application. If the application automatically navigates the user to the AppSettingsView page from the SurveyListView page, and if the user then decides he or she doesn't want to enter credentials (maybe the application was started by mistake), the user will press the Back button and expect to leave the application. A simple approach to navigating will have left the SurveyListView page on the navigation stack, so that's where the user will end up. For some possible solutions to this problem, see the post, "Redirecting an initial navigation," on Peter Torr's blog.

The application does not automatically navigate users to the AppSettingsView page; instead, it displays a message that explains to users that they must provide their credentials. The following code example from the SurveyListView.xaml file shows how the visibility of the message is controlled based on the value of the SettingAreNotConfigured property.

<StackPanel x:Name="SettingNotConfiguredPanel" Grid.Row="0" 
  Margin="12,17,0,28"
  Visibility="{Binding SettingAreNotConfigured, 
  Converter={StaticResource VisibilityConverter}}">
  <TextBlock x:Name="ApplicationTitle" Text="TAILSPIN SURVEYS" 
    Style="{StaticResource PhoneTextNormalStyle}"/>
  <TextBlock x:Name="PageTitle" Text="Surveys" Margin="9,-7,0,0" 
    Style="{StaticResource PhoneTextTitle1Style}"/>
  <ContentControl Template="{StaticResource 
    SettingsNotConfiguredTextBlock}" />
</StackPanel>

The following code example from the Styles.xaml file shows the template that defines the message.

<ControlTemplate x:Key="SettingsNotConfiguredTextBlock">
  <TextBlock 
    VerticalAlignment="Top"
    Margin="12"
    Style="{StaticResource PhoneTextLargeStyle}"
    Foreground="{StaticResource PhoneSubtleBrush}"
    Text="To start using TailSpin for Windows Phone, configure your Settings."
    TextWrapping="Wrap"/>
</ControlTemplate>

When you navigate using the NavigationService class, the behavior of the Back button is automatically determined, so using the Back button on the SurveyListView page causes the application to exit, and using the Back button on the AppSettingsView page returns the user to the SurveyListView page.

The NavigationService class automatically manages the behavior of the Back button.

The following code example from the AppSettingsViewModel class shows how the application implements the navigation away from the AppSettingsView page in code for the Cancel button. Notice how the Cancel method uses the NavigationService class. This class is described in detail later in this chapter in the section, "Handling Navigation Requests."

public void Cancel()
{
  if (this.NavigationService.CanGoBack) this.NavigationService.GoBack();
}

When taking a survey, there are three scenarios that could be invoked to navigate away from the TakeSurveyView page. First, the user could press the back button on the phone. Second, the user could click the complete survey button on the application bar. Third, the user could click the save survey button on the application bar. The following code example from the TakeSurveyViewModel class shows how the application implements these scenarios to navigate away from the TakeSurveyView page. Notice how the CleanUpAndGoBack method tests the CanGoBack property before calling the GoBack method from the NavigationService class. This is because users could have arrived at the page from either the SurveyListView page or from a pinned tile. If users have arrived at the page from the SurveyListView page, the CanGoBack property will be true and thus the GoBack method can be called. If users have arrived at the page from a pinned tile, the CanGoBack property will be false, preventing the GoBack method from being called.

private void CleanUpAndGoBack(bool completed)
{
  if (NavigationService.CanGoBack)
  {
    ...
    this.NavigationService.GoBack();
  }
  else if (completed)
  {
    ...
  }
  else
  {
    ...
  }
}

Navigating from the survey list screen to an individual survey is a little more complicated because the application must display the survey that the user currently has selected in the list. Furthermore, the application must respond to the user tapping on an item in a ListBox control, on a PivotItem in a PivotControl.

When the user taps a survey name in the list, the navigation to the TakeSurveyView page is accomplished using an interaction trigger in the SurveyDataTemplate data template. The following code example from the Styles.xaml page shows this data template definition along with the style for the ListBoxItemTemplate.

<DataTemplate x:Key="SurveyDataTemplate">
  ...
  <i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseLeftButtonUp">
      <i:InvokeCommandAction Command="{Binding TakeSurveyCommand}"/>
    </i:EventTrigger>
  </i:Interaction.Triggers>
  ...
</DataTemplate>

<!--Style for Survey List-->
<Style x:Key="SurveyTemplateItemStyle" TargetType="ItemsControl">
  <Setter Property="ListBox.ItemTemplate" 
    Value="{StaticResource SurveyDataTemplate}"/>
</Style>

The action that enables navigation from a tap on an item in the ListBox control is provided by the EventTrigger and InvokeCommandAction class. This action binds a command to a user tap on an element in the view—in this example, a tap on an item in a list to the TakeSurveyCommand command in the SurveyTemplateViewModel view model class. For an explanation of how the TakeSurveyView page displays the correct survey, based on the survey selected in the list, see the section, "Connecting the View and the View Model," later in this chapter.

User Interface Description

Figure 3, earlier in this chapter, shows a mockup of the UI and the navigation routes supported by the application between the pages. There are a few items in the UI that require some additional explanation.

The SurveyListView page displays the following information about each survey:

• The survey creator's logo.
• The survey's title.
• A number to indicate the number of completed surveys pending upload.
• The survey creator's name.
• A star to indicate whether the survey is one of the user's favorites.
• A number to indicate how many questions have been answered so far.
• A progress bar to indicate how many questions have been answered so far.
• A number to indicate the estimated amount of time it should take to complete the survey.

On the TakeSurveyView page, there are three buttons on the application bar. The Save button saves the current answers to the survey and allows the user to return to the survey later to amend existing answers and to add additional answers. The Pin button adds a secondary Tile to the Start screen with the application icon, and with the survey name as the title. Tapping the title sends the user directly to the survey in the application. The Complete button saves the current answers and marks the survey as complete and ready for synchronization. You cannot return to or change a completed survey.

User Interface Elements

The application uses standard controls throughout so that the appearance and behavior of the application matches the Windows Phone standard appearance and behavior. The section, "Displaying Data," later in this chapter describes how the application implements data binding with the Pivot control.

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 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 UI. The developers at Tailspin chose to use the Pivot control here because it enabled them 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 application also uses a Pivot control on the TakeSurveyView page to display the survey questions and collect the survey responses. The developers at Tailspin chose to use the Pivot control here because its large scrollable area offers a great way to display a complete survey and long text items, and offers an intuitive way to navigate by scrolling left or right through the questions.

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 uses 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 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 SurveyListViewpage, if the user taps a survey name, the application navigates to the TakeSurveyViewpage 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.

Tailspin uses the ContextMenu control from the Silverlight for Windows Phone Toolkit, which is available on the Silverlight Toolkit page on CodePlex.

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.

<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="pin to start" 
      Command="{Binding PinCommand}" 
      IsEnabled="{Binding IsPinnable}"/>
  </toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>

Next Topic | Previous Topic | Home

Last built: May 25, 2012