This is an old revision of the document!
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>