Skip to main content

​
DataTemplate

The DataTemplate system in Avalonia allows you to define how data objects are displayed in the UI. Data templates are used throughout Avalonia controls like ListBox, ComboBox, and ContentControl to generate visual representations of data.

​
Namespace

Avalonia.Controls.Templates

​
IDataTemplate Interface

public interface IDataTemplate : ITemplate<object?, Control?>
{
    bool Match(object? data);
}
​
Match
method
Checks if this data template can handle the specified data.Parameters:
  • data (object?): The data to check
Returns: true if the template can build a control for the data
​
Build
method
Builds a control for the specified data.Parameters:
  • data (object?): The data to build a control for
Returns: A Control that represents the data

​
FuncDataTemplate

A data template that uses a function to create controls. 
public class FuncDataTemplate<T> : IDataTemplate

​
Constructor

public FuncDataTemplate<T>(Func<T?, Control> build, Func<object?, bool>? match = null)

​
Usage in XAML

​
Inline DataTemplate

<ListBox ItemsSource="{Binding People}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                <TextBlock Text="{Binding Email}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

​
Resource DataTemplate

<Window.Resources>
    <DataTemplate x:Key="PersonTemplate" DataType="local:Person">
        <Border BorderBrush="Gray" BorderThickness="1" Padding="8">
            <StackPanel>
                <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                <TextBlock Text="{Binding Email}" Foreground="Gray" />
            </StackPanel>
        </Border>
    </DataTemplate>
</Window.Resources>

<ListBox ItemsSource="{Binding People}" 
         ItemTemplate="{StaticResource PersonTemplate}" />

​
DataTemplate with DataType

<Window.DataTemplates>
    <DataTemplate DataType="local:Person">
        <StackPanel>
            <TextBlock Text="{Binding Name}" />
            <TextBlock Text="{Binding Age}" />
        </StackPanel>
    </DataTemplate>
    
    <DataTemplate DataType="local:Company">
        <StackPanel>
            <TextBlock Text="{Binding CompanyName}" FontWeight="Bold" />
            <TextBlock Text="{Binding Industry}" />
        </StackPanel>
    </DataTemplate>
</Window.DataTemplates>

<ItemsControl ItemsSource="{Binding Items}" />

​
Code-Behind DataTemplate

​
Using FuncDataTemplate

using Avalonia.Controls;
using Avalonia.Controls.Templates;

// Create a data template for Person objects
var personTemplate = new FuncDataTemplate<Person>((person, _) =>
{
    if (person == null) return new TextBlock { Text = "No data" };
    
    return new StackPanel
    {
        Children =
        {
            new TextBlock
            {
                [!TextBlock.TextProperty] = new Binding(nameof(Person.Name)),
                FontWeight = FontWeight.Bold
            },
            new TextBlock
            {
                [!TextBlock.TextProperty] = new Binding(nameof(Person.Email))
            }
        }
    };
});

listBox.ItemTemplate = personTemplate;

​
DataTemplate Selector

public class PersonDataTemplateSelector : IDataTemplate
{
    public IDataTemplate? ChildTemplate { get; set; }
    public IDataTemplate? AdultTemplate { get; set; }
    
    public Control Build(object? data)
    {
        if (data is Person person)
        {
            var template = person.Age < 18 ? ChildTemplate : AdultTemplate;
            return template?.Build(data) ?? new TextBlock { Text = data.ToString() };
        }
        return new TextBlock { Text = "Invalid data" };
    }
    
    public bool Match(object? data) => data is Person;
}
Usage in XAML: 
<Window.Resources>
    <DataTemplate x:Key="ChildTemplate">
        <TextBlock Text="{Binding Name}" Foreground="Blue" />
    </DataTemplate>
    
    <DataTemplate x:Key="AdultTemplate">
        <TextBlock Text="{Binding Name}" Foreground="Green" />
    </DataTemplate>
    
    <local:PersonDataTemplateSelector x:Key="PersonSelector"
        ChildTemplate="{StaticResource ChildTemplate}"
        AdultTemplate="{StaticResource AdultTemplate}" />
</Window.Resources>

<ListBox ItemsSource="{Binding People}"
         ItemTemplate="{StaticResource PersonSelector}" />

​
TreeDataTemplate

For hierarchical data structures: 
<TreeView ItemsSource="{Binding RootNodes}">
    <TreeView.ItemTemplate>
        <TreeDataTemplate ItemsSource="{Binding Children}">
            <TextBlock Text="{Binding Name}" />
        </TreeDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

​
Global DataTemplates

Define templates at the Application level: 
<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Application.DataTemplates>
        <DataTemplate DataType="local:Person">
            <StackPanel>
                <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                <TextBlock Text="{Binding Email}" />
            </StackPanel>
        </DataTemplate>
    </Application.DataTemplates>
</Application>
Global data templates are automatically applied to all matching data types throughout your application.

​
Best Practices

Specify DataType on your DataTemplates to enable automatic template selection and compiled bindings.
<DataTemplate DataType="vm:PersonViewModel">
    <!-- Template content -->
</DataTemplate>
Complex templates can impact performance. Consider using custom controls for complex UI.
Enable compiled bindings by setting x:DataType on your DataTemplate or parent element.
<DataTemplate x:DataType="local:Person">
    <TextBlock Text="{Binding Name}" />
</DataTemplate>

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us