.NET MAUI Creating Data Templates Step by step Implementation and Top 10 Questions and Answers
 Last Update: April 01, 2025      16 mins read      Difficulty-Level: beginner

.NET MAUI Creating Data Templates

Introduction

.NET Multi-platform App UI (MAUI) is a powerful framework that allows developers to build native user interfaces for multiple platforms—such as Android, iOS, macOS, and Windows—from a single codebase. One of the key components in building these user interfaces is the data template. Data templates play a crucial role in defining how individual items within a collection are displayed. This guide will delve into the details of creating data templates in .NET MAUI, providing you with the essential information to effectively utilize them in your applications.

What is a Data Template?

A data template is a template for displaying data in a user interface. It defines the visual structure of the data by specifying how each item in a collection is rendered on the screen. Data templates are often used in controls like ListView, CarouselView, CollectionView, and others where collections of data are displayed.

Basic Steps to Create a Data Template

Creating a data template in .NET MAUI involves defining the template in XAML and binding it to a data source. Here’s a step-by-step guide to creating a simple data template:

  1. Define the Data Model Start by defining the data model. Assume you have a simple model that represents a contact with properties Name and PhoneNumber.

    public class Contact
{
    public string Name { get; set; }
    public string PhoneNumber { get; set; }
}

  2. Create a View Model Create a view model that contains a collection of these data models. This collection will be the data source for your UI control.

    public class ContactsViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Contact> _contacts;
    public ObservableCollection<Contact> Contacts
    {
        get => _contacts;
        set { _contacts = value; OnPropertyChanged(nameof(Contacts)); }
    }

    public ContactsViewModel()
    {
        Contacts = new ObservableCollection<Contact>
        {
            new Contact { Name = "Alice", PhoneNumber = "123-456-7890" },
            new Contact { Name = "Bob", PhoneNumber = "987-654-3210" }
        };
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

  3. Define the Data Template in XAML In your XAML file, define the data template and bind it to the collection in your view model. Use a ListView, CollectionView, or any other control that supports data templates.

    Here’s an example using CollectionView:

    <ContentPage
    x:Class="YourNamespace.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:viewmodels="clr-namespace:YourNamespace.ViewModels"
    x:DataType="viewmodels:ContactsViewModel">

    <CollectionView ItemsSource="{Binding Contacts}">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Label Grid.Row="0" Grid.Column="0" Text="{Binding Name}" FontSize="16" FontAttributes="Bold"/>
                    <Label Grid.Row="1" Grid.Column="0" Text="{Binding PhoneNumber}" FontSize="14" Margin="0,5,0,0"/>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

  4. Set the Binding Context Ensure that the binding context of your XAML page is set to an instance of your view model.

    public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new ContactsViewModel();
    }
}

Advanced Data Templates

Beyond simple data templates, .NET MAUI supports more advanced scenarios such as:

  • Selector Templates: Use DataTemplateSelector to choose different templates based on the data.

    public class ContactTemplateSelector : DataTemplateSelector
{
    public DataTemplate DefaultTemplate { get; set; }
    public DataTemplate ImportantTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var contact = item as Contact;
        if (contact != null)
        {
            return contact.IsImportant ? ImportantTemplate : DefaultTemplate;
        }

        return DefaultTemplate;
    }
}

  • Inline Templates: Use DataTemplate directly within the ItemsSource.

  • Nested Templates: Include templates within templates for hierarchical data structures.

Here’s an example of using DataTemplateSelector:

<ContentPage.Resources>
    <DataTemplate x:Key="DefaultContactTemplate">
        <Grid Padding="10">
            <!-- Basic Contact Layout -->
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="ImportantContactTemplate">
        <Grid Padding="10" BackgroundColor="Yellow">
            <!-- Important Contact Layout -->
        </Grid>
    </DataTemplate>
    <local:ContactTemplateSelector x:Key="ContactTemplates"
                                     DefaultTemplate="{StaticResource DefaultContactTemplate}"
                                     ImportantTemplate="{StaticResource ImportantContactTemplate}"/>
</ContentPage.Resources>
<CollectionView ItemsSource="{Binding Contacts}"
                ItemTemplate="{StaticResource ContactTemplates}">
    <!-- CollectionView Items -->
</CollectionView>

Binding and Styling

  • Multi-Bindings: Use MultiBinding to combine multiple properties into a single binding.

  • Converters: Implement IValueConverter to transform data before binding.

  • Styles: Use styles to define common visual properties for elements within the template.

Example of a style:

<ContentPage.Resources>
    <Style x:Key="ContactLabelStyle" TargetType="Label">
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="TextColor" Value="Black"/>
    </Style>
</ContentPage.Resources>
<CollectionView ItemsSource="{Binding Contacts}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Label Grid.Row="0" Text="{Binding Name}" FontAttributes="Bold" Style="{StaticResource ContactLabelStyle}"/>
                <Label Grid.Row="1" Text="{Binding PhoneNumber}" Style="{StaticResource ContactLabelStyle}" Margin="0,5,0,0"/>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Performance Considerations

Data templates can impact performance, especially when dealing with large collections. Here are some best practices to ensure optimal performance:

  • Reuse Layouts: Structure your templates to allow for layout reuse.
  • Minimize Bindings: Reduce the number of bindings in your templates.
  • Efficient Conversion: Use efficient value converters to minimize processing time during data binding.

Conclusion

Data templates in .NET MAUI provide a flexible and powerful way to define how data is presented in your applications. By understanding and mastering the creation of data templates, you can build rich, engaging user interfaces that work seamlessly across multiple platforms. Whether you’re creating simple lists or complex hierarchies, data templates are an essential tool in your .NET MAUI developer toolkit.

Creating Data Templates in .NET MAUI: A Beginner's Guide

Introduction

Data templates are a fundamental aspect of any UI framework, enabling developers to define visual structures for data items. In .NET Multi-platform App UI (MAUI), data templates play a significant role in shaping how data is displayed within controls like ListView, CollectionView, or even custom layout controls. This guide will provide a step-by-step example demonstrating how to create and utilize data templates in a .NET MAUI application.

Step 1: Set Up Your .NET MAUI Project

To begin, ensure you have the latest version of Visual Studio 2022 installed with .NET MAUI extensions. Follow these steps to create a new project:

  1. Open Visual Studio and go to File > New > Project.
  2. In the Create a new project window, select .NET MAUI App (Preview).
  3. Click Next to proceed.
  4. Enter a Project name, select a Location, and then click Create.
  5. Choose a Mobile Application Framework (Preview), ensure .NET 6 (Long Term Support) is selected, then click Create.

Step 2: Create a Model

To demonstrate data binding with templates, first, create a simple data model. For instance, let’s define a Product model that contains properties like Id, Name, and Price.

  1. In the Solution Explorer, right-click on the Models folder and select Add > Class.
  2. Name the file Product.cs and add the following code:
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

Step 3: Prepare Data

Next, create a collection of Product objects that will be bound to the UI controls. This data can be hardcoded or fetched from a data source.

  1. In the Solution Explorer, go to the ViewModels folder and add a new class named MainViewModel.cs.
  2. Add properties and methods to hold and provide data:
using System.Collections.ObjectModel;

public class MainViewModel
{
    public ObservableCollection<Product> Products { get; set; }

    public MainViewModel()
    {
        Products = new ObservableCollection<Product>
        {
            new Product { Id = 1, Name = "Laptop", Price = 999.99m },
            new Product { Id = 2, Name = "Smartphone", Price = 699.99m },
            new Product = 3, Name = "Tablet", Price = 499.99m }
        };
    }
}

Step 4: Design the UI

Now that the data model and view model are prepared, design the user interface to display the data using a CollectionView or ListView. This example will use a CollectionView.

  1. Open the MainPage.xaml file.
  2. Define a CollectionView inside a ContentPage and specify its ItemTemplate to define how each product should be displayed. Here’s an example:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.MainPage"
             xmlns:local="clr-namespace:YourApp.Models"
             xmlns:viewModels="clr-namespace:YourApp.ViewModels">

    <ContentPage.BindingContext>
        <viewModels:MainViewModel />
    </ContentPage.BindingContext>
    
    <StackLayout>
        <CollectionView ItemsSource="{Binding Products}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Frame Padding="10" Margin="5" BackgroundColor="LightGray" CornerRadius="5">
                        <HorizontalStackLayout>
                            <Image Source="icon.png" WidthRequest="50" HeightRequest="50" Margin="0,0,10,0"/>
                            <VerticalStackLayout>
                                <Label Text="{Binding Name}" FontAttributes="Bold" FontSize="16"/>
                                <Label Text="{Binding Price, StringFormat='${0:C2}'}" FontSize="14"/>
                            </VerticalStackLayout>
                        </HorizontalStackLayout>
                    </Frame>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

Explanation:

  • CollectionView: This is a versatile control for displaying a collection of items. It supports efficient layouts and is designed for performance.
  • ItemsSource: This binds the UI to the Products property defined in MainViewModel.
  • ItemTemplate: Defines a template for each item in the collection.
  • DataTemplate: Specifies the layout of each item. In this example, a Frame contains an Image and Labels to display the product's name and price.

Step 5: Run the Application

  1. Set the Default Project: Ensure the correct MAUI project (e.g., YourApp.Windows for Windows, YourApp.Android for Android) is set as the startup project.
  2. Run the Application: Press F5 or click the Start button.

Step 6: Data Flow

  1. Data Model (Product): Represents the individual data items.
  2. View Model (MainViewModel): Holds a collection of Product objects and serves as a data source for the UI.
  3. Data Binding: The UI (UICollectionView) subscribes to changes in the Products collection. When the collection updates, the UI automatically reflects these changes.
  4. Data Template: Defines how each item in Products is displayed within the UICollectionView.

Conclusion

By following this step-by-step guide, you've learned how to create data templates in a .NET MAUI application. You've set up a mobile app project, defined a data model, prepared data, designed the UI to display the data, and ran the application to see the data templates in action. This foundational knowledge will enable you to create more complex and visually appealing applications with data binding and templates. Happy coding!

Top 10 Questions and Answers on .NET MAUI Creating Data Templates

1. What are Data Templates in .NET MAUI?

Answer: Data Templates in .NET MAUI are used to define the visual layout and presentation of data items in data-bound controls such as ListView, Collectionview, CarouselView, etc. They allow you to specify how individual items in a collection should be rendered, enhancing UI flexibility and reusability.

2. How do I create a simple Data Template in XAML?

Answer: Creating a simple Data Template in XAML for controls like ListView is straightforward. Here’s an example:

<ListView ItemsSource="{Binding Items}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal" Padding="10">
                    <Label Text="{Binding Name}" FontAttributes="Bold" />
                    <Label Text="{Binding Description}" Margin="10,0,0,0"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

In this example, each data item in the Items collection will be rendered as a ViewCell with a horizontal StackLayout containing two Label controls.

3. Can I use multiple Data Templates for different data objects?

Answer: Yes, starting with .NET MAUI, you can use DataTemplateSelector to select different Data Templates based on the type or properties of the data objects. Here is a basic implementation:

XAML:

<ListView ItemsSource="{Binding Items}" ItemTemplateSelector="{StaticResource myDataTemplateSelector}">
    <!-- Other properties -->
</ListView>

C#:

public class MyDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate BlueTemplate { get; set; }
    public DataTemplate RedTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        if (item is Item && ((Item)item).Priority == "High")
            return RedTemplate;
        else
            return BlueTemplate;
    }
}

4. How do I bind nested objects within a Data Template?

Answer: You can bind nested objects within a Data Template using dot notation. Here’s an example where you have an Address object within your main Person object:

<Label Text="{Binding Person.Address.Street}" />
<Label Text="{Binding Person.Address.City}" />

In this binding expression, Person might be an object in your data context that contains an Address object, and you are binding to properties on that Address object.

5. Can I use Triggers in Data Templates?

Answer: Yes, you can add Triggers in Data Templates to modify the appearance or behavior of controls based on certain conditions. Here’s an example with a Label that changes color based on the value of IsAvailable:

<Label Text="{Binding Name}">
    <Label.Triggers>
        <DataTrigger TargetType="Label" Binding="{Binding IsAvailable}" Value="True">
            <Setter Property="TextColor" Value="Green" />
        </DataTrigger>
        <DataTrigger TargetType="Label" Binding="{Binding IsAvailable}" Value="False">
            <Setter Property="TextColor" Value="Red" />
        </DataTrigger>
    </Label.Triggers>
</Label>

6. How do I handle Selection Events in Data Templates?

Answer: While Data Template itself doesn't directly handle events, you can use the Command property to handle selection or tap events from within the Template. Here’s an example:

XAML:

<ListView ItemsSource="{Binding Items}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <Label Text="{Binding Name}" />
                    <Button Text="More Info" Command="{Binding Source={RelativeSource AncestorType={x:Type local:YourViewModel}}, Path=MoreInfoCommand}" CommandParameter="{Binding .}" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

In this example, a Button within the DataTemplate is bound to a MoreInfoCommand in the ViewModel, with the selected item passed as a parameter.

7. Can I use Custom Controls within Data Templates?

Answer: Yes, you can use Custom Controls inside Data Templates. First, you need to ensure the Custom Control is defined and then reference it within your template. Here’s a simple example:

XAML:

<local:MyCustomControl Text="{Binding CustomText}" />

<Collectionview ItemsSource="{Binding CustomItems}">
    <Collectionview.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <local:MyCustomControl Text="{Binding Text}" />
            </ViewCell>
        </DataTemplate>
    </Collectionview.ItemTemplate>
</Collectionview>

Assuming MyCustomControl is a Custom Control you’ve defined elsewhere.

8. What are some best practices when using Data Templates?

Answer: Some best practices include:

  • Minimize Complexity: Keep Data Templates simple and avoid deeply nested layouts.
  • Reusability: Use templates across multiple controls when possible.
  • Performance: Optimize bindings and avoid unnecessary UI updates.
  • Maintainability: Clearly document logic and use meaningful names.
  • Adaptability: Use DataTemplateSelectors for adapting layouts based on data type or properties.

9. How do I handle Data Templates in Code-Behind?

Answer: You can define and assign Data Templates in Code-Behind using DataTemplate and ViewCell classes. Here’s an example:

var dataTemplate = new DataTemplate(() =>
{
    var label = new Label();
    label.SetBinding(Label.TextProperty, new Binding("Name"));

    var viewCell = new ViewCell();
    viewCell.View = label;
    return viewCell;
});

listView.ItemTemplate = dataTemplate;

10. What are the advantages of using Data Templates in .NET MAUI?

Answer: The primary advantages include:

  • Separation of Concerns: It separates UI presentation logic from data logic.
  • Reusability: Templates can be reused across different parts of the application.
  • Flexibility: Allows for dynamic layout changes based on data properties.
  • Maintainability: Easier to make changes to the UI without affecting the data layer.
  • Enhanced User Experience: Customizable visuals make the app more engaging and intuitive.

By understanding and effectively utilizing Data Templates in .NET MAUI, you can create more dynamic and efficient application visuals and user interactions.