The Tailspin mobile client application uses only a small number of pages, with a limited number of navigation routes between those pages.
Figure 3 shows how the user navigates within the application on the phone.
Note: Navigating to the SurveyDetailsView page is done through a context menu that appears when the user taps and holds on a survey name in the list.
The application determines the initial screen to display, based on the DefaultTask element in the WMAppManifest.xml fi le. The following code example shows how the application is confi gured to fi rst display the SurveyListView page to the user.
XML
<Tasks>
<DefaultTask Name =”_default” NavigationPage=”Views/SurveyList/SurveyListView.xaml”/>
</Tasks>
Before users can use the application, 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 Survey- ListView 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 (http://blogs. msdn.com/b/ptorr/archive/2010/08/28/redirecting-an-initial-navigation.aspx).
The current version of 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.
XAML
<StackPanel x:Name=”SettingNotConfiguredPanel” Grid.Row=”0″ Margin=”24,24,0,12″ Visibility=”{Binding SettingAreNotConfigured, Converter={StaticResource VisibilityConverter}}”>
<TextBlock x:Name=”ApplicationTitle” Text=”TAILSPIN SURVEYS” Style=”{StaticResource PhoneTextNormalStyle}”/>
<TextBlock x:Name=”PageTitle” Text=”Surveys” Margin=”-3,-8,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.
XAML
<ControlTemplate x:Key=”SettingsNotConfiguredTextBlock”>
<TextBlock HorizontalAlignment=”Stretch” VerticalAlignment=”Top” Margin=”50,50,50,0″ Style=”{StaticResource PhoneTextLargeStyle}” Foreground=”{StaticResource PhoneSubtleBrush}”Text=”To start using TailSpin for Windows Phone 7, 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 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.”
C#
public void Cancel()
{
this.NavigationService.GoBack();
}
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 a custom behavior in the SurveyDataTemplate data template. The following code example from the Styles.xaml page shows this data template definition.
XAML
<DataTemplate x:Key=”SurveyDataTemplate”>
…
<Custom:Interaction.Behaviors>
<pag:FrameworkElementClickCommand CommandBinding=”{Binding TakeSurveyCommand}”/>
</Custom:Interaction.Behaviors>
…
</DataTemplate>
The custom behavior that enables navigation from a click on an item in the ListBox control is defined in the FrameworkElement-ClickCommand infrastructure class. This infrastructure class 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.
Tapping and holding on a survey name on the SurveyListView page displays a context menu with two options: the user can toggle whether the survey is a favorite to display in the favorites list or the user can display the SurveyDetailsView page.