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