templates - How to use ListView in Universal Windows Platform (Windows 10 app)

Question

Can anyone please explain ItemTemplate.DataTemplate and ListView. In this code snippet. I really don't understand the concept of Templates, it will be help full if someone might put some light on that too. I had look to this question:

Metro app: ListView ItemTemplate DataTemplate for selected item

But still confused. Thank you! :(

<ListView Margin="10" Name="lvDataBinding">
     <ListView.ItemTemplate>
           <DataTemplate>
                <WrapPanel>
                    <TextBlock Text="Name: " />
                    <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                    <TextBlock Text=", " />
                    <TextBlock Text="Age: " />
                    <TextBlock Text="{Binding Age}" FontWeight="Bold" />
                    <TextBlock Text=" (" />
                    <TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />
                    <TextBlock Text=")" />
                    </WrapPanel>
            </DataTemplate>
     </ListView.ItemTemplate>
</ListView>

Answer 1

ListView is a control that allows you to dynamically show a list of items so that users can scroll through that list of items to see them and find whatever they may need. It's really simple to define it in XAML:

<ListView x:Name="StudentsList" />

Now, let's say you have a list of university students. Every student is represented with a simple Student class.

public class Student
{
    public string Name { get; set; }
    public int Age { get; set; }
}

There could be dozens, hundreds or thousands of students, so you can't define the UI statically. You usually keep those students in some sort of list/collection in code-behind. You fetch them from various sources - database, web services, or hard-code it, like I will do now for demo purposes:

private List<Student> listOfStudents = new List<Student>();

public MainPage()
{
    this.InitializeComponent();

    listOfStudents.Add(new Student { Name = "John", Age = 20 });
    listOfStudents.Add(new Student { Name = "Bob", Age = 21 });
    listOfStudents.Add(new Student { Name = "Steve", Age = 19 });
    listOfStudents.Add(new Student { Name = "Marko", Age = 18 });
    listOfStudents.Add(new Student { Name = "Igor", Age = 20 });
    listOfStudents.Add(new Student { Name = "Ivan", Age = 20 });
    listOfStudents.Add(new Student { Name = "Nina", Age = 21 });
    listOfStudents.Add(new Student { Name = "Paul", Age = 20 });
    listOfStudents.Add(new Student { Name = "Ana", Age = 23 });
    listOfStudents.Add(new Student { Name = "Ivana", Age = 20 });

    StudentsList.ItemsSource = listOfStudents;
}

That list/collection serves as an items source for the ListView, so you set the ItemsSource property of the ListView to connect the two and show the list in UI. Using a ListView all the items are rendered dynamically regardless of the number of items.

If we ran the app now, it would be pretty ugly though:

You need to define a DataTemplate to make it prettier. Since each and every student has a name and age, you will want to use those properties to make it look prettier. This DataTemplate is assigned to ListView.ItemTemplate property and the ListView will use it for each and every item in the list.

<ListView x:Name="StudentsList">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" 
                           Margin="20,0,20,8"
                           FontSize="24" 
                           FontStyle="Italic" 
                           FontWeight="SemiBold"
                           Foreground="DarkBlue" />
                <TextBlock Text="{Binding Age}" 
                           Margin="20,0,20,8"
                           FontSize="16"
                           Foreground="DarkGray" 
                           Opacity="0.8" />
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

See, I used the DataTemplate to define which properties to show and how to render them - I played with font size, font colors, margins etc. I'll admit this isn't really that pretty, but I am sure you will get the point:

One more thing you'll notice is that I used a binding construct like this:

<TextBlock Text="{Binding Name}" ... />

This basically means: Check if the object has the property Name and if it does, render it as TextBlock.Text.

Note that things can get more complicated so you could use different templates for different items in one list etc. but that's not in the question scope I think.

TLDR: ListView dynamically renders a list of items. ItemsSource defines the items source for that ListView. DataTemplate defines a template that will be used to render something. This DataTemplate is assigned to ItemTemplate property of the ListView so that the ListView knows that it should use exactly that template to render its items.