How to use Data Templates on Markup

In this tutorial, you will learn how to use Data Templates on C# Markup.

Creating the ViewModel

Let's create the ViewModel for this page, it will have a SearchText property that will be used to filter the results, and a SearchResults property that will be used to display the results on the ObservableCollection<string>.

In this sample the CommunityToolkit.MVVM is used.

public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    string SearchText = string.Empty;

    public ObservableCollection<string> SearchResults { get; } = new();

    [RelayCommand]
    public async Task Search()
    {
        SearchResults.Clear();
        var results = await FilterService.Current.GetResults(SearchText);

        foreach(var result in results)
            SearchResults.Add(result);
    }
}

Creating the Page

The Page for this tutorial will be very simple, we will have a TextBox at the top that will behave like a search bar, and a ListView below that will display the results of the search.

public sealed partial MainPage : Page
{
    public MainPage()
    {
        this.DataContext<MainViewModel>((page, vm) =>
        {
            page
            .Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
            .Content
            (
               new Grid()
                    .RowDefinitions("Auto, *, Auto")
                    .Children
                    (
                        new TextBlox()
                            .Margin(5)
                            .Placeholder("Search...")
                            .Text(() => vm.SearchText)
                            .Grid(row: 0),
                        new ListView()
                            .ItemsSource(() => vm.SearchResults)
                            .ItemTemplate<string>(str => new TextBlock().Text(() => str))
                            .Grid(row: 1),
                        new Button()
                            .Content("Search")
                            .Command(() => vm.SearchCommand)
                            .Grid(row: 2)
                    )
            )
            .Padding(58);
        });
    }
}

Let's take a look at the ItemTemplate usage, and other ways to use it. On the snippet above, we are using the generic to strongly type our model and be able to use it in a safe way, in this case is just a string that will be used on the TextBlock control.

On the snippet below you can see other ways that you can use the ItemTemplate extension method.

new ListView()
    .ItemsSource(() => vm.SearchResults)
    .ItemTemplate(() => new TextBlock().Text(x => x.Bind()))

As you can see, just the .Bind() method is used to bind the current item to the Text property of the TextBlock control.

And with that we have a simple page that will search for results and display them on a ListView, using MVVM.