Searching for a Route Using the View

The MapView page contains a Border control named RouteSearchView. This control is used to prompt the user for the origin (from) and destination (to) addresses (see Figure 18.2).

FIGURE 18.2 The RouteSearchView Border control allows the user to search for a route.

A visual state is used to hide and show the Border. When the Border is shown, it provides the user with the means to enter two addresses. When the user taps the Search button, the viewmodel’s SearchCommand executes.

The following excerpt shows the RouteSearchView Border:

Click here to view code image

<Border x:Name="RouteSearchView"
        Height="160" Margin="0"
        Padding="8"
        RenderTransformOrigin="0.5,0.5"
        Width="480"
        Background="{StaticResource PhoneBackgroundBrush}"
        Grid.ColumnSpan="2">
    <Border.RenderTransform>
        <CompositeTransform TranslateY="-218"/>
    </Border.RenderTransform>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="0.8*" />
            <ColumnDefinition Width="0.4*"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="from"
                    VerticalAlignment="Center" />
        <TextBox Text="{Binding FromAddress, Mode=TwoWay}"
                    Grid.Column="1"
                    Grid.ColumnSpan="2" />
        <TextBlock Text="to"
                    Grid.Row="1"
                    VerticalAlignment="Center" />
        <TextBox Text="{Binding ToAddress, Mode=TwoWay}"
                    Grid.Row="1"
                    Grid.Column="1" />
        <Button Command="{Binding RouteSearchCommand}"
                Content="search"
                Grid.Column="2"
                Grid.Row="1"  />
    </Grid>
</Border>

When the Search button is tapped, the RouteSearchView Border is hidden via the VisualState property in the viewmodel.