How to Bind to a DataTemplate in UWP

Initially, you cannot bind to the surface context of a DataTemplate when utilizing x:Bind, even so it’s extremely really helpful to make use of x:Bind for all the pieces. You would possibly argue that Binding will work for some circumstances, and that’s true. Nevertheless, if you’re utilizing MVVM, you do not wish to use Binding, specifically when working with Layouts in an ItemsRepeater, because it is not going to work in a predictable method.

Now that we’re on the identical web page, let’s agree on two guidelines:

  1. Each mannequin (the sort or class of the thing) will need to have the entire knowledge and habits properties that the info templates will use. That can also be legitimate and specifically necessary for issues like visibility properties and different properties which is able to outline how the element renders visually.

    NOTE: If you don’t like this strategy, you may all the time create a base class with none habits property (e.g.: Merchandise), and have a brand new class inherit from it the place the rendering and habits properties are then carried out (e.g.: ItemViewModel).

  2. Each knowledge template should a sort related to it. This not solely will prevent a while with ideas if you find yourself writing your x:Binds, however with out it you’ll almost certainly get typing errors associated to the DataTemplate.



Rendering an inventory of customers

On this instance we’ve a Person mannequin with some fundamental properties:

utilizing System;

namespace MySolution.Area.Fashions
{
    public class Person
    {
        public Guid Id { get; set; }
        public string GivenName { get; set; }
        public string Surname { get; set; }
        public string DisplayName { get; set; }
        public string Mail { get; set; }
    }
}
Enter fullscreen mode

Exit fullscreen mode

The instance under has an ItemsRepeater to render an inventory of customers. Discover how the DataTemplate is configured exterior of the ItemsRepeater and the way we reference it as static useful resource. At first this may not seem like a giant deal, however moreover higher organizing the code, this can make a giant distinction when working with dynamic templates.

<UserControl
    x:Class="MySolution.Controls.UsersList"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/mix/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:fashions="utilizing:MySolution.Area.Fashions"
    xmlns:xamlc="utilizing:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d">
    <UserControl.Assets>
        <DataTemplate x:Key="UserItemTemplate" x:DataType="fashions:Person">
            <StackPanel>
                <TextBlock
                    MaxWidth="180"
                    FontWeight="SemiBold"
                    Foreground="{x:Bind Foreground}"
                    Textual content="{x:Bind Person.DisplayName, Mode=OneWay}"
                    TextTrimming="CharacterEllipsis" />
                <TextBlock
                    MaxWidth="180"
                    FontWeight="SemiLight"
                    Foreground="{x:Bind Foreground}"
                    Textual content="{x:Bind Person.Mail, Mode=OneWay}"
                    TextTrimming="CharacterEllipsis" />
            </StackPanel>
        </DataTemplate>
    </UserControl.Assets>

    <xamlc:ItemsRepeater
        ItemTemplate="{StaticResource UserItemTemplate}"
        ItemsSource="{x:Bind ItemsSource, Mode=OneWay}">
        <xamlc:ItemsRepeater.Format>
            <xamlc:StackLayout x:Title="structure" Orientation="Vertical" />
        </xamlc:ItemsRepeater.Format>
    </xamlc:ItemsRepeater>

</UserControl>
Enter fullscreen mode

Exit fullscreen mode

It is usually necessary to focus on that we should explicitly declare the info kind (x:DataType="fashions:Person"), following the second rule talked about earlier than.

Let me know you probably have any questions or ideas within the feedback under.

Add a Comment

Your email address will not be published. Required fields are marked *