Exercise 1: Display a list of items with a ListView (XAM280)

In this exerise, you will add a ListView to an existing application to display a data collection.

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

1. Open the starter solution from the Exercise 1 > Start folder in your copy of the cloned or downloaded course materials in either Visual Studio on Windows or Visual Studio for Mac.
2. Build and run the application. The app displays a single flag, allows you to edit the details of the flag, and lets you switch between the flags using toolbar buttons.
3. The solution contains several projects. The shared Xamarin.Forms UI is defined in the FunFlacts Portable Class Library (PCL), and there are head projects for iOS, Android and Windows. There is also a FlagData project that contains the flag information.
4. Examine the classes you'll work with:

Create a XAML content page

Replace the current startup page with a new ContentPage.

1. Add a new XAML ContentPage to the FunFlacts project. Name it AllFlags.
2. Open the AllFlags.xaml file and set the Title property to "Fun with Flags".
3. Delete any existing UI from the XAML.
4. Open the App.xaml.cs file and go to the constructor.
5. Create an instance of your AllFlags content page.
6. Create a new NavigationPage (or reuse the existing code), passing in the AllFlags instance.
7. Assign the NavigationPage (containing the AllFlags page) to the MainPage property.

8. Build and run the app. It will display an empty page. You'll add a ListView to the page in the following steps.

   public App()
   {
       DependencyService.Register<FunFlactsViewModel>();
   
       InitializeComponent();
       MainPage = new NavigationPage(new AllFlags());
   }
   

Add a ListView to the page

The ListView needs to be populated with data. There's a collection of Flag data defined in FunFlactsViewModel that you'll load into the ListView.

1. Open AllFlags.xaml.

2. Add a ListView as the root tag in the ContentPage.

   <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       Title="Fun with Flags"
       x:Class="FunFlacts.AllFlags">
   
       <ListView>
       </ListView>
   
   </ContentPage>
   

3. Load the FunFlactsViewModel.Flags into to the ListView.ItemsSource property. There are several ways to do this, there are examples below:

   • Give the ListView a name flags in the XAML and set the ItemsSource property in code behind. You can retrieve the FunFlagsViewModel instance using the DependencyService.Get<FunFlactsViewModel>() method.

   flags.ItemsSource = DependencyService.Get<FunFlactsViewModel>().Flags;
   

4. Set the BindingContext for the ContentPage to the FunFlactsViewModel instance in code behind then use a {Binding} on the ListView.ItemsSource property to connect it to the Flags property.

   BindingContext = DependencyService.Get<FunFlactsViewModel>();
   

   <ListView ItemsSource="{Binding Flags}" />
   

5. Run the application, it should now display a list of items. Notice that it's displaying the type name (FlagData.Flag) for each item. This is because the ListView uses the ToString() method by default.
6. Open the Flag.cs file in the FlagData project and override the ToString method. Have the method return the Country property.
7. Run the application to the see the effect.

Exercise summary

In this exercise, you learned how to display a collection in Xamarin.Forms. This is a fundamental operation that you'll likely use in most applications that you build.

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