Binding Collection to ListView control in UWP Explained

Introduction

List is a common and basic construct of many apps e.g Contacts app in your smartphone. In this article i will show how you can make list of your own template in UWP and bind it to a collection of items you want to display. Just follow the simple steps below.

Content 

1. Creating project
2. Creating Model class
3. Adding List control to Page
4. Adding DataTemplate to List
5. Map Properties of Model class to DataTemplate 
6. Creating ObserveableCollection (List) of item to bind to UI
7. Bind ObserveableCollection to List control
8. Working with images

Step 1: 

Open Visual studio and create new Windows Universal project. Name it 'ListBinding' or whatever you want. VS automatically added MainPage.xaml to your project double click to view it.

Step 2: Add Model Class

As Class is like a blue print. It have some properties and we can make as many objects from it which have different values for those properties. In case of List same phenomena exist. List is made of items and each item have some template (e.g an image and text next to it). So we make an class (say it as model) whose object will bind to one item of list.

Add new Class 'Car' in the project and add following properties to it

        public string Brand { get; set; }

        public string Model { get; set; }

        public string Color { get; set; }

Step 3: 

Double click MainPage.xaml and add following code to it

        <ListView x:Name="MyList">

            

        </ListView>

Step 4:

Now add code between ListView tag

<ListView.ItemTemplate>

                <DataTemplate>

                   

                </DataTemplate>

 </ListView.ItemTemplate>

<ListView.ItemTemplate> is telling we are adding template to ListView and </DataTemplate> telling here's the template

Step 5:

Now we will tell where to display properties of Car. Add code to <DataTemplate>

                    <Grid>

                        <TextBlock Text="{Binding Brand}"></TextBlock>

                        <TextBlock Text="{Binding Model}"></TextBlock>

                        <TextBlock Text="{Binding Color}"></TextBlock>

                    </Grid>

You could have any number of properties of model and controls and bind them the way you want.

Till now what we have done? we added a ListView to display list of items and then added DataTemplate to it <DataTemplate> can contain only one item so we added a Grid container and added code to it. Inside Grid we defined three text blocks for our three properties of Car class. Bind it to properties of our Model (Car). Make sure name after Binding is the same as property of class to which you want to bind that TextBlock.

MainPage.xaml will look like this:

Step 6: 

Now we should have some data list to show. Expand MainPage.xaml and double click MainPage.xaml.cs file. Add following code. (Add using System.Collections.ObjectModel; namespace as well to use ObersvableCollection Class. You could use List<T> as well but ObservableCollection notify the ListView when values of its objects are changed)

    ObservableCollection<Car> dataList = new ObservableCollection<Car>();

    Car c1 = new Car() { Brand = "Ferrari", Model = " Lamborghinis", Color = "Red" };

    Car c2 = new Car() { Brand = "Honda", Model = "GLI", Color = "Black" };

    Car c3 = new Car() { Brand = "Porsche", Model = "968 snowplow", Color = "White" };

    dataList.Add(c1);

    dataList.Add(c2);

    dataList.Add(c3);

    MyList.ItemsSource = dataList;

Note: I am using temporary data objects for 3 cars here but these could be any objects got from database or other data sources.

It will look like:

Run the project by clicking local machine (windows 10) you will see overlapped text why? cause inside Grid we just declared three TextBlocks. We did'nt set their layout, now just enclose them with <StackPanel> like this:

                        <StackPanel>
                            <TextBlock Text="{Binding Brand}"></TextBlock>
                            <TextBlock Text="{Binding Model}"></TextBlock>
                            <TextBlock Text="{Binding Color}"></TextBlock>
                        </StackPanel>
Now run again to see this: