Exercise 2: Select a row (XAM280)

This exercise will continue building the Fun Flags ListView application. You'll add support to navigate to the provided details page when a flag is tapped in the ListView

To complete the exercise, you will need Visual Studio for Windows or macOS with the Xamarin development tools installed. You will also need either an emulator/simulator or a device to run the exercise on. Please see the setup page if you need help installing the Xamarin development environment.

Open the starter solution

This exercise is a continuation of the previous exercise. You can use your existing solution or begin from the prior Exercise 1 > Completed solution in your copy of the cloned or downloaded course materials.

Verify that we have a root NavigationPage

In this step, you'll verify that a NavigationPage is available to perform stack navigation. You'll use it to display the detail page.

1. Open App.xaml.cs which holds your Application class.
2. Check the assignment to the MainPage property. To use stack-based navigation, this should be set to a NavigationPage. The constructor of the NavigationPage takes the first page to display (the "root").

Handle the selection of an item in the ListView

Next, you'll handle the selection for a single flag and provide navigation to a second (details) screen.

1. Wire up to the ItemTapped event on the ListView. You can do this in XAML or in code behind if the element has a name.
2. The ItemTapped event passes an ItemTappedEventArgs which has the actual object from the collection assigned to the ItemsSource property, however it needs to be cast. Recall that in this application, each data item is represented a Flag object. Retrieve that object out from the event arguments and cast it to a Flag.
3. You have a property on your FunFlactsViewModel named CurrentFlag of type Flag which the details page uses to display the current flag. Set the FunFlactsViewModel.CurrentFlag property to the flag from the event arguments. You'll need to retrieve the object from the DependencyService.
4. Use the Page.Navigation property to navigate to a new instance of the details page. Use the PushAsync method so that you can use the C# async and await support to ensure you see exceptions.
5. Run the application and try tapping on an item to see it navigate to the details page. Use the arrow keys on the detail page to move to a different flag and then press the back button in the header. Notice that the original flag is still selected in the ListView.

async void OnItemTapped(object sender, ItemTappedEventArgs e)
{
   DependencyService.Get<FunFlactsViewModel>().CurrentFlag = (Flag)e.Item;
   await this.Navigation.PushAsync(new FlagDetailsPage());
}

Bind to SelectedItem

The ListView has another property you can use to track and manage selection: SelectedItem. This property is also bindable; you can use it to connect to any property of the BindingContext, such as the CurrentFlag property! In fact, if you make the binding two-way, you can get it to update the state of the ListView automatically.

1. Delete the code in the OnItemTapped method that is setting the CurrentFlag property - you won't need it anymore; all you need now is the code to navigate to the second page.
2. Add a binding in the XAML for the ListView.SelectedItem property to connect it to the CurrentFlag property. Make sure it's marked as a two-way binding, and then run the app again and change the current flag on the details page using the up/down buttons. Then back up to the ListView and note that it tracks the current selection!

<ListView ItemsSource="{Binding Flags}"
   SelectedItem="{Binding CurrentFlag, Mode=TwoWay}"
   ItemTapped="OnItemTapped" />

Exercise summary

In this exercise, you added support to detect selection within the ListView and navigate to a second screen.

You can view the completed solution in the Exercise 2 > Completed folder of your copy of the cloned or downloaded course materials.