UWP - ListView ItemTemplate
The ListView class represents a control that displays data items in a
vertical stack in a UWP app. The UWP developers are using a ListView to
display a collection of items stacked vertically or horizontally.
The ListView is an ItemsControl, so the .net developers can put there a collection of items of any type. The ListView data item is displayed as the string representation by default.
The ItemsControl class’s ItemTemplate property gets or sets the DataTemplate used to display each item. This property value is a DataTemplate instance which is the template that specifies the visualization of the data objects. The default value of the ItemTemplate property is null. So using this ItemTemplate property we can display custom-styled items in a ListView control.
The DataTemplate class describes the visual structure of a data object. This class is used for data binding for specific elements in the template that display the data values.
The UWP app developers typically use a DataTemplate to specify the visual representation of ListView data. The DataTemplate objects are particularly useful when they are binding an ItemsControl such as a ListView to an entire collection. Here we displayed a book list in a ListView control. We used the ItemTemplate and DataTemplate to display the booklist more organized.
The ItemsControl class ItemsSource property gets or sets an object source used to generate the content of the ItemsControl. This property lets us populate the ListView control with items from a list of objects.
The following UWP app development tutorial demonstrates how we can display a ListView control’s complex items by using the ItemTemplate and DataTemplate instead of the default string representation.
The ListView is an ItemsControl, so the .net developers can put there a collection of items of any type. The ListView data item is displayed as the string representation by default.
The ItemsControl class’s ItemTemplate property gets or sets the DataTemplate used to display each item. This property value is a DataTemplate instance which is the template that specifies the visualization of the data objects. The default value of the ItemTemplate property is null. So using this ItemTemplate property we can display custom-styled items in a ListView control.
The DataTemplate class describes the visual structure of a data object. This class is used for data binding for specific elements in the template that display the data values.
The UWP app developers typically use a DataTemplate to specify the visual representation of ListView data. The DataTemplate objects are particularly useful when they are binding an ItemsControl such as a ListView to an entire collection. Here we displayed a book list in a ListView control. We used the ItemTemplate and DataTemplate to display the booklist more organized.
The ItemsControl class ItemsSource property gets or sets an object source used to generate the content of the ItemsControl. This property lets us populate the ListView control with items from a list of objects.
The following UWP app development tutorial demonstrates how we can display a ListView control’s complex items by using the ItemTemplate and DataTemplate instead of the default string representation.
MainPage.xaml
<Page
x:Class="UniversalAppTutorials.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UniversalAppTutorials"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<StackPanel
x:Name="stack_panel1"
Margin="50"
Orientation="Vertical"
Background="AliceBlue"
Padding="50"
>
<ListView
x:Name="ListView1"
SelectionChanged="ListView1_SelectionChanged"
>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
Margin="0"
BorderBrush="LightSkyBlue"
BorderThickness="0,0,0,2"
Padding="5,5,5,5"
>
<Image
Source="{Binding Image}"
Margin="10,10,20,10"
/>
<StackPanel Orientation="Vertical">
<TextBlock
Text="{Binding BookName}"
FontWeight="Black"
Margin="0,30,0,0"
FontFamily="Calibri"
FontSize="17"
/>
<TextBlock
Text="{Binding Author}"
FontStyle="Italic"
/>
<TextBlock
Text="{Binding Price}"
Foreground="Crimson"
/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Page>
MainPage.xaml.cs
using Windows.UI.Xaml.Controls;
using Windows.UI.Popups;
using System.Collections.Generic;
namespace UniversalAppTutorials
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
// Initialize a new list of books
List<Book> books = new List<Book>();
// Add some items to collection
books.Add(
new Book(
"Professional C# 6 and .NET Core 1.0",
"Christian Nagel",
"$60.00",
"Assets/professional_c_sharp_6_and_dot_ner_core_1.jpeg"
)
);
books.Add(
new Book(
"Beginning ASP.NET for Visual Studio 2015",
"William Penberthy",
"$45.00",
"Assets/beginning_asp_dot_net_for_visual_studio_2015.jpeg"
)
);
books.Add(
new Book(
"C# 24-Hour Trainer, 2nd Edition",
"Rod Stephens",
"$45.00",
"Assets/c_sharp_24_hour_trainer_2nd_edition.jpeg"
)
);
books.Add(
new Book(
"Professional Visual Studio 2015",
"Bruce Johnson",
"$60.00",
"Assets/professional_visual_studio_2015.jpeg"
)
);
// Specify the list view item source
ListView1.ItemsSource = books;
}
public class Book
{
public string BookName { get; set; }
public string Author { get; set; }
public string Price { get; set; }
public string Image { get; set; }
public Book(string bookName, string author, string price, string image)
{
this.BookName = bookName;
this.Author = author;
this.Price = price;
this.Image = image;
}
}
private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
// Get the instance of ListView
ListView listView = sender as ListView;
// Get the ListView selected item as a Book
Book selectedBook = listView.SelectedItem as Book;
// Initialize a new message dialog
MessageDialog dialog = new MessageDialog(
"Selected : \n"
+ selectedBook.BookName + "\n"
+ selectedBook.Author + "\n"
+ selectedBook.Price
);
// Finally, display the selected item details on dialog
dialog.ShowAsync();
}
}
}