We left off displaying the zip codes and going to the details, but not displaying the selected zip code. Let’s fix that and clean some things up.
Choosing from the list and displaying the details
In the previous version we hard coded which result would be passed to the details page. Getting the actual selection is not terribly difficult. First modify MainPage.xaml
<CollectionView ItemsSource="{Binding Results}" SelectionMode="None">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:Result">
<Grid Padding="10">
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:MainViewModel}}, Path=GoToZipCodeDetailsCommand}" CommandParameter="{Binding .}" />
</Grid.GestureRecognizers>
<VerticalStackLayout>
<HorizontalStackLayout
Padding="10"
Spacing="4"
VerticalOptions="Center">
<Label VerticalOptions="Center">
<Label.Text>
<MultiBinding StringFormat="{}{0}, {1} {2}">
<Binding Path="city" />
<Binding Path="state" />
<Binding Path="zip" />
</MultiBinding>
</Label.Text>
</Label>
</HorizontalStackLayout>
</VerticalStackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Note that I’ve added a grid, put the TapGestureRecognizer on that structure, so that it is within the datatemplate.
As discussed in the previous post, we go up the view model ancestor tree and find MainViewModel, where we can invoke the GoToZipCodeDetails. The Command Parameter ({Binding .}) sends in the current Result object.
We can now modify the command handler in MainViewModel.
[ICommand]
async Task GoToZipCodeDetailsAsync(Result result)
{
try
{
await Shell.Current.GoToAsync($"ZipCodeDetailsPage", true,
new Dictionary<string, object>
{
{ nameof(Result), result }
});
}
catch (Exception ex)
{
Debug.WriteLine(ex.Message);
await Shell.Current.DisplayAlert("Unable to go to Details page!", ex.Message, "OK");
}
}
Key here is that we are now passing the selected Result object into the Command handler.
While we are here, let’s add a Clear button to clear the zip code list.
<HorizontalStackLayout>
<Button
Padding="10"
Command="{Binding GetZipCodesCommand}"
IsEnabled="{Binding IsNotBusy}"
Text="Get Zipcodes" />
<Button
Padding="10"
Command="{Binding GoToZipCodeDetailsCommand}"
Text="Go To Details" />
<Button
Padding="10"
Command="{Binding ClearCommand}"
Text="Clear" />
</HorizontalStackLayout>
Again, the command handler is very simple
[ICommand]
async Task ClearAsync()
{
Results.Clear();
}
Finally, we’ll add a go back button for the details page so that we can get back to the main page.
<VerticalStackLayout Margin="20">
<Label Text="You made it to the details page!" />
<Label Text="{Binding Result.city}" />
<Label Text="{Binding Result.state}" />
<Label Text="{Binding Result.zip}" />
<BoxView
Margin="10"
HeightRequest="2"
Color="#FF0000" />
<Button
Padding="20"
Command="{Binding GoBackCommand}"
Text="Go Back"
WidthRequest="100" />
</VerticalStackLayout>
ontentPage>
The Boxview just draws a nice redline between the details and the button.
We’ll get into some more heavy-duty work in the next post. For now, the source code for this is here.
