UWP에서 DataTemplate에 바인딩하는 방법

무엇보다도 x:Bind 를 사용할 때 DataTemplate의 외부 컨텍스트에 바인딩할 수 없으므로 모든 경우에 x:Bind를 사용하는 것이 좋습니다. 어떤 경우에는 Binding가 작동한다고 주장할 수 있으며 이는 사실입니다. 그러나 MVVM을 사용하는 경우에는 Binding 를 사용하고 싶지 않을 것입니다. 특히 ItemsRepeater 에서 레이아웃으로 작업할 때 예측 가능한 방식으로 작동하지 않기 때문입니다.

이제 우리는 같은 페이지에 있으므로 두 가지 규칙에 동의합시다.

모든 모델(객체의 유형 또는 클래스)에는 데이터 템플릿이 사용할 모든 데이터 및 동작 속성이 있어야 합니다. 이는 구성 요소가 시각적으로 렌더링되는 방식을 정의하는 가시성 속성 및 기타 속성과 같은 항목에 유효하고 특히 중요합니다.

NOTE: If you do not like this approach, you can always create a base class without any behavior property (e.g.: Item), and have a new class inherit from it where the rendering and behavior properties are then implemented (e.g.: ItemViewModel).

모든 데이터 템플릿에는 연결된 유형이 있어야 합니다. 이렇게 하면 x:Bind 를 작성할 때 제안을 통해 시간을 절약할 수 있을 뿐만 아니라 제안이 없으면 DataTemplate과 관련된 입력 오류가 발생할 가능성이 높습니다.

사용자 목록 렌더링

이 예제에는 몇 가지 기본 속성이 있는 사용자 모델이 있습니다.

using System;

namespace MySolution.Domain.Models
{
    public class User
    {
        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; }
    }
}

아래 예에는 사용자 목록을 렌더링하는 ItemsRepeater가 있습니다. DataTemplate가 ItemsRepeater 외부에서 구성되는 방식과 이를 정적 리소스로 참조하는 방식에 주목하세요. 처음에는 이것이 별거 아닌 것처럼 보일 수 있지만 코드를 더 잘 구성하는 것 외에도 동적 템플릿으로 작업할 때 큰 차이를 만들 것입니다.

<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/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:MySolution.Domain.Models"
    xmlns:xamlc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d">
    <UserControl.Resources>
        <DataTemplate x:Key="UserItemTemplate" x:DataType="models:User">
            <StackPanel>
                <TextBlock
                    MaxWidth="180"
                    FontWeight="SemiBold"
                    Foreground="{x:Bind Foreground}"
                    Text="{x:Bind User.DisplayName, Mode=OneWay}"
                    TextTrimming="CharacterEllipsis" />
                <TextBlock
                    MaxWidth="180"
                    FontWeight="SemiLight"
                    Foreground="{x:Bind Foreground}"
                    Text="{x:Bind User.Mail, Mode=OneWay}"
                    TextTrimming="CharacterEllipsis" />
            </StackPanel>
        </DataTemplate>
    </UserControl.Resources>

    <xamlc:ItemsRepeater
        ItemTemplate="{StaticResource UserItemTemplate}"
        ItemsSource="{x:Bind ItemsSource, Mode=OneWay}">
        <xamlc:ItemsRepeater.Layout>
            <xamlc:StackLayout x:Name="layout" Orientation="Vertical" />
        </xamlc:ItemsRepeater.Layout>
    </xamlc:ItemsRepeater>

</UserControl>

앞에서 언급한 두 번째 규칙에 따라 데이터 유형( x:DataType="models:User" )을 명시적으로 선언해야 한다는 점을 강조하는 것도 중요합니다.

아래 의견에 질문이나 제안 사항이 있으면 알려주십시오.