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:
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).
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:
<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.
3.133.151.144