Displaying the Route and Itinerary

When a search completes successfully, the resulting route is displayed as a bending line on the map, connecting itinerary waypoints. A separate expandable view displays the detailed itinerary.

Recall that the MapViewModel class’s SearchRoute method populates the list of ItineraryItems using the RouteCalculationResult, as shown in the following excerpt:

Click here to view code image

Route route = calculationResult.Route;
MapRoute = new MapRoute(route);

var collection = new ObservableCollection<MapItineraryItem>();

foreach (RouteLeg leg in route.Legs)
{
    foreach (RouteManeuver maneuver in leg.Maneuvers)
    {
        collection.Add(new MapItineraryItem(maneuver));
    }
}

The MapView presents the itinerary items in an expandable ListBox.

When a route is located, the map view is panned and zoomed to display the path and waypoints (see Figure 18.3).

FIGURE 18.3 The MapView page after a route search completes.

The ListBox’s ItemsSource property is bound to the ItineraryItems property in the viewmodel. Each custom MapItineraryItem has its Text and DistanceString property displayed within a DataTemplate, as shown in the following excerpt:

Click here to view code image

<Border x:Name="ItineraryView"
        VerticalAlignment="Bottom"
        Height="210"
        RenderTransformOrigin="0.5,0.5"
        Grid.Row="2"
        Grid.ColumnSpan="2">

    <ListBox ItemsSource="{Binding ItineraryItems}" Margin="0,10,0,70">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Margin="5,2.5">
                    <TextBlock
                        Text="{Binding Text}"
                        TextWrapping="Wrap"
                        Width="380"
                        FontWeight="Light" />
                    <TextBlock
                        Text="{Binding DistanceString}"
                        Margin="4,0,4,0"
                        FontWeight="Light"
                        Foreground="{StaticResource PhoneAccentBrush}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Border>

The parent Border control is used to hide or display the ListBox via a visual state defined by the ItineraryVisualState string property of the viewmodel. The itinerary button in the application bar executes the ItineraryToggleCommand in the viewmodel, which toggles the VisualState from ShowItinerary to HideItinerary and vice versa. The ShowItinerary state sets the height of the ItineraryView Border control so that it comes into view, whereas the HideItinerary state reduces the Border’s height so that it is hidden from view. When the VisualState is set to ShowItinerary, the list of itinerary items is presented.