User Tools

Site Tools


notes:uwp:datatemplate

This is an old revision of the document!


DataTemplate in XAML

DataTemplate is usually used with list controls such as ItemsControl, GridView, or ListView.

Example: Define a DataTemplate inline by setting the ItemTemplate property. The ItemTemplate property is of type DataTemplate:

<ItemsControl>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Rectangle Width="100" Height="50" Margin="10">
                <Rectangle.Fill>
                    <SolidColorBrush Color="{Binding}" />
                </Rectangle.Fill>
            </Rectangle>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
 
    <Color>Blue</Color>
    <Color>Red</Color>
    <Color>Green</Color>
    <Color>Magenta</Color>
</ItemsControl>

Example: Define a DataTemplate inline and bind the ItemsControl to an ObservableCollection:

<Page x:Class="TestApp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:TestApp">
    <Grid>
        <ItemsControl ItemsSource="{x:Bind People}">
            <ItemsControl.ItemTemplate>
                <DataTemplate x:DataType="local:Person">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{x:Bind FirstName}" Margin="0,0,4,0"/>
                        <TextBlock Text="{x:Bind LastName}"/>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Page>
using System.Collections.ObjectModel;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
 
namespace TestApp
{
    class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
 
    public sealed partial class MainPage : Page
    {
        private ObservableCollection<Person> People;
 
        public MainPage()
        {
            this.InitializeComponent();
 
            People = new ObservableCollection<Person>();
 
            Loaded += MainPage_Loaded;
        }
 
        private void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            People.Add(new Person { FirstName = "John", LastName = "Makak" });
            People.Add(new Person { FirstName = "Steve", LastName = "Gibbon" });
            People.Add(new Person { FirstName = "Mike", LastName = "Chimp" });
        }
    }
}

The same template as above but defined in resources:

<Page x:Class="TestApp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:TestApp">
 
    <Page.Resources>
        <DataTemplate x:Key="PersonDataTemplate" x:DataType="local:Person">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{x:Bind FirstName}" Margin="0,0,4,0"/>
                <TextBlock Text="{x:Bind LastName}"/>
            </StackPanel>
        </DataTemplate>
    </Page.Resources>
 
    <Grid>
        <ItemsControl ItemsSource="{x:Bind People}"
                      ItemTemplate="{StaticResource PersonDataTemplate}" />
    </Grid>
</Page>
notes/uwp/datatemplate.1482328505.txt.gz · Last modified: 2020/08/26 (external edit)