데이터 템플릿

샘플 찾아보기

.NET 다중 플랫폼 앱 UI(.NET MAUI) 데이터 템플릿은 지원되는 컨트롤에 대한 데이터 프레젠테이션을 정의하는 기능을 제공합니다.

Person 개체 컬렉션을 표시하는 CollectionView를 생각해봅니다. 다음 예제에서는 클래스의 정의를 보여줍니다.Person

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string Location { get; set; }
}

Person 클래스는 Person 개체를 만들 때 설정할 수 있는 Name, Age 및 Location 속성을 정의합니다. 컬렉션(예: CollectionView)을 표시하는 컨트롤을 사용하여 개체를 표시 Person 할 수 있습니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataTemplates"
             x:Class="DataTemplates.WithoutDataTemplatePage">
    <StackLayout>
        <CollectionView>
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type local:Person}">
                    <local:Person Name="Steve" Age="21" Location="USA" />
                    <local:Person Name="John" Age="37" Location="USA" />
                    <local:Person Name="Tom" Age="42" Location="UK" />
                    <local:Person Name="Lucas" Age="29" Location="Germany" />
                    <local:Person Name="Tariq" Age="39" Location="UK" />
                    <local:Person Name="Jane" Age="30" Location="USA" />
                </x:Array>
            </CollectionView.ItemsSource>
        </CollectionView>
    </StackLayout>
</ContentPage>

이 예제에서는 개체 배열 Person 에서 해당 ItemsSource 속성을 초기화하여 항목이 추가 CollectionView 됩니다. CollectionView 컬렉션에 개체를 표시할 때 호출 ToString 됩니다. 그러나 재정 ToString 의가 없 Person.ToString 으므로 각 개체의 형식 이름을 반환합니다.

개체는 Person 메서드를 재정의 ToString 하여 의미 있는 데이터를 표시할 수 있습니다.

public class Person
{
    ...
    public override string ToString ()
    {
        return Name;
    }
}

그러면 컬렉션의 CollectionView 각 개체에 대한 속성 값이 표시됩니다 Person.Name .

Person.ToString 재정의는 Name, Age 및 Location 속성으로 구성되는 형식이 지정된 문자열을 반환할 수 있습니다. 그러나 이 방법은 각 데이터 항목의 모양에 대한 제한된 제어만 제공합니다. 유연성을 높이려면 데이터의 모양을 정의하는 DataTemplate을 만들어야 합니다.

DataTemplate 만들기

DataTemplate은 데이터 모양을 지정하는 데 사용되며, 일반적으로 데이터 바인딩을 사용하여 데이터를 표시합니다. 데이터 템플릿에 대한 일반적인 사용 시나리오는 컨트롤의 개체 컬렉션(예: CollectionView a 또는 CarouselView.)의 데이터를 표시하는 경우입니다. 예를 들어 개체 컬렉션에 CollectionView 바인딩된 경우 속성은 각 Person 개체 CollectionView.ItemTemplateCollectionView의 Person 모양을 정의하는 속성으로 설정할 DataTemplate 수 있습니다. 각 DataTemplatePerson 개체의 속성 값에 바인딩되는 개체가 포함됩니다. 데이터 바인딩에 대한 자세한 내용은 데이터 바인딩을 참조하세요.

DataTemplate 컨트롤에서 인라인으로 정의된 A를 인라인 템플릿이라고 합니다. 또는 데이터 템플릿을 컨트롤 수준, 페이지 수준 또는 앱 수준 리소스로 정의할 수 있습니다. DataTemplate을 정의할 위치를 선택하면 사용할 수 있는 위치가 결정됩니다.

• 컨트롤 수준에서 정의된 컨트롤 DataTemplate 은 컨트롤에만 적용할 수 있습니다.
• 페이지 수준에서 정의된 A DataTemplate 는 페이지의 여러 컨트롤에 적용할 수 있습니다.
• 앱 수준에서 정의된 A DataTemplate 는 앱 전체의 유효한 컨트롤에 적용할 수 있습니다.

참고 항목

보기 계층 구조의 하단에 위치한 데이터 템플릿은 x:Key 특성을 공유할 때 상단에 정의된 데이터 템플릿보다 우선권을 갖습니다. 예를 들어 앱 수준 데이터 템플릿은 페이지 수준 데이터 템플릿에 의해 재정의되고 페이지 수준 데이터 템플릿은 컨트롤 수준 데이터 템플릿 또는 인라인 데이터 템플릿에 의해 재정의됩니다.

A는 DataTemplate 정의된 위치에 관계없이 인라인, 형식 또는 리소스로 만들 수 있습니다.

인라인 DataTemplate 만들기

컨트롤에서 인라인으로 정의된 인라인 데이터 템플릿은 다른 곳에서 데이터 템플릿을 다시 사용할 필요가 없는 경우 사용해야 합니다. 각 데이터 항목의 DataTemplate 모양을 정의하는 데 지정된 개체입니다. 그런 다음 해당 속성을 인라인DataTemplate으로 CollectionView 설정할 ItemTemplate 수 있는 컨트롤입니다.

<CollectionView>
    <CollectionView.ItemsSource>
        <x:Array Type="{x:Type local:Person}">
            <local:Person Name="Steve" Age="21" Location="USA" />
            <local:Person Name="John" Age="37" Location="USA" />
            <local:Person Name="Tom" Age="42" Location="UK" />
            <local:Person Name="Lucas" Age="29" Location="Germany" />
            <local:Person Name="Tariq" Age="39" Location="UK" />
            <local:Person Name="Jane" Age="30" Location="USA" />
        </x:Array>
    </CollectionView.ItemsSource>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid>
                ...
                <Label Text="{Binding Name}" FontAttributes="Bold" />
                <Label Grid.Column="1" Text="{Binding Age}" />
                <Label Grid.Column="2" Text="{Binding Location}" HorizontalTextAlignment="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

에서 CollectionView인라인 DataTemplate 의 자식은 .에서 BindableObject파생되어야 합니다. 이 예제에서는 Grid파생 Layout 되는 A가 사용됩니다. 컬렉션 Grid 에 있는 각 Person 개체의 속성에 속성을 Text 바인딩하는 세 Label 개의 개체가 포함됩니다. 다음 스크린샷은 결과 모양을 보여줍니다.

형식을 사용하여 DataTemplate 만들기

사용자 지정 뷰 형식을 사용하여 A DataTemplate 를 만들 수 있습니다. 이 방법의 장점은 보기에 정의된 모양을 앱 전체의 여러 데이터 템플릿에서 다시 사용할 수 있다는 것입니다. 그런 다음 해당 속성을 DataTemplate다음으로 설정할 ItemTemplate 수 있는 컨트롤 CollectionView 입니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataTemplates"
             x:Class="DataTemplates.WithDataTemplatePageFromType">
    <StackLayout>
        <CollectionView>
           <CollectionView.ItemsSource>
                <x:Array Type="{x:Type local:Person}">
                    <local:Person Name="Steve" Age="21" Location="USA" />
                    ...
                </x:Array>
            </CollectionView.ItemsSource>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <local:PersonView />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

이 예제 CollectionView.ItemTemplate 에서 속성은 뷰 모양을 정의하는 사용자 지정 형식에서 만든 속성으로 설정 DataTemplate 됩니다. 사용자 지정 형식은 다음에서 파생되어야 합니다.ContentView

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DataTemplates.PersonView">
     <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*" />
            <ColumnDefinition Width="0.2*" />
            <ColumnDefinition Width="0.3*" />
        </Grid.ColumnDefinitions>
        <Label Text="{Binding Name}" FontAttributes="Bold" />
        <Label Grid.Column="1" Text="{Binding Age}" />
        <Label Grid.Column="2" Text="{Binding Location}" HorizontalTextAlignment="End" />
    </Grid>
</ContentView>

이 예제에서 ContentView 내의 레이아웃은 Grid로 관리합니다. 컬렉션 Grid 에 있는 각 Person 개체의 속성에 속성을 Text 바인딩하는 세 Label 개의 개체가 포함됩니다.

사용자 지정 보기를 만드는 방법에 대한 자세한 내용은 ContentView를 참조하세요.

DataTemplate을 리소스로 만들기

데이터 템플릿은 .에서 ResourceDictionary재사용 가능한 개체로 만들 수 있습니다. 이 작업은 각각 DataTemplate 에 고유한 x:Key 값을 제공하여 수행됩니다. 이 값은 에 설명이 포함된 키를 ResourceDictionary제공합니다. 그런 다음 해당 속성을 DataTemplate다음으로 설정할 ItemTemplate 수 있는 컨트롤 CollectionView 입니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataTemplates"
             x:Class="DataTemplates.WithDataTemplateResource">
    <ContentPage.Resources>
        <ResourceDictionary>
            <DataTemplate x:Key="personTemplate">
                <Grid>
                    ...
                </Grid>
            </DataTemplate>
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout>
        <CollectionView ItemTemplate="{StaticResource personTemplate}">
            <CollectionView.ItemsSource>
                <x:Array Type="{x:Type local:Person}">
                    <local:Person Name="Steve" Age="21" Location="USA" />
                    ...
                </x:Array>
            </CollectionView.ItemsSource>
        </CollectionView>
    </StackLayout>
</ContentPage>

이 예제에서는 DataTemplate 태그 확장을 사용하여 속성에 StaticResource 할당됩니다CollectionView.ItemTemplate. DataTemplate 페이지에 ResourceDictionary정의되어 있지만 컨트롤 수준 또는 앱 수준에서 정의할 수도 있습니다.

DataTemplateSelector 만들기

DataTemplateSelector는 데이터 바인딩된 속성의 값에 기반하여 런타임 시 DataTemplate을 선택하는 데 사용됩니다. 이렇게 하면 여러 데이터 템플릿을 동일한 형식의 개체에 적용하여 런타임에 모양을 선택할 수 있습니다. 데이터 템플릿 선택기를 사용하면 특정 DataTemplate개체를 반환하는 데이터 템플릿 선택기에서 런타임에 각 개체의 모양을 선택할 수 있는 개체 컬렉션에 대한 바인딩 또는 CarouselView 같은 CollectionView 시나리오를 사용할 수 있습니다.

데이터 템플릿 선택기는 DataTemplateSelector에서 상속되는 클래스를 만들어 구현합니다. 그런 다음 특정 메서드를 재정의 OnSelectTemplate 하여 다음을 DataTemplate반환해야 합니다.

public class PersonDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate ValidTemplate { get; set; }
    public DataTemplate InvalidTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return ((Person)item).DateOfBirth.Year >= 1980 ? ValidTemplate : InvalidTemplate;
    }
}

이 예제에서 메서드는 OnSelectTemplate 속성 값에 따라 특정 데이터 템플릿을 반환합니다 DateOfBirth . 반환된 데이터 템플릿은 데이터 템플릿 선택기를 사용할 때 설정되는 또는 InvalidTemplate 속성에 의해 ValidTemplate 정의됩니다.

제한 사항

DataTemplateSelector 개체에는 다음과 같은 제한 사항이 있습니다.

• DataTemplateSelector 서브클래스는 여러 번 쿼리해도 동일한 데이터에 대해서는 항상 동일한 템플릿을 반환해야 합니다.
• DataTemplateSelector 서브클래스는 다른 DataTemplateSelector 서브클래스를 반환해서는 안 됩니다.
• DataTemplateSelector 서브클래스는 각 호출에서 DataTemplate의 새 인스턴스를 반환해서는 안 됩니다. 대신, 동일한 인스턴스를 반환해야 합니다. 이렇게 하지 않으면 메모리 누수가 생성되고 제어 가상화가 비활성화됩니다.

DataTemplateSelector 사용

데이터 템플릿 선택기는 리소스로 만들고 인스턴스를 형식 DataTemplate의 .NET MAUI 컨트롤 속성(예: CollectionView.ItemTemplate.NET MAUI 컨트롤 속성)에 할당하여 사용할 수 있습니다.

다음 예제에서는 페이지 수준 리소스로 선언하는 방법을 PersonDataTemplateSelector 보여 있습니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:local="clr-namespace:Selector"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Selector.MainPage">
    <ContentPage.Resources>
        <DataTemplate x:Key="validPersonTemplate">
            <Grid>
                ...
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="invalidPersonTemplate">
            <Grid>
                ...
            </Grid>
        </DataTemplate>
        <local:PersonDataTemplateSelector x:Key="personDataTemplateSelector"
                                          ValidTemplate="{StaticResource validPersonTemplate}"
                                          InvalidTemplate="{StaticResource invalidPersonTemplate}" />
    </ContentPage.Resources>
    ...
</ContentPage>

이 예제에서 페이지 수준은 ResourceDictionary 두 DataTemplate 개체와 개체를 PersonDataTemplateSelector 정의합니다. 개체는 PersonDataTemplateSelector 태그 확장을 사용하여 개체 ValidTemplate 및 InvalidTemplate 속성을 DataTemplate 개체로 StaticResource 설정합니다. 리소스는 페이지의 ResourceDictionary정의되어 있지만 컨트롤 수준 또는 앱 수준에서 정의할 수도 있습니다.

개체를 PersonDataTemplateSelector 속성에 할당하여 CollectionView.ItemTemplate 사용할 수 있습니다.

<CollectionView x:Name="collectionView"
                ItemTemplate="{StaticResource personDataTemplateSelector}" />

런타임 시 CollectionView는 기본 컬렉션의 각 항목에 대해 PersonDataTemplateSelector.OnSelectTemplate 메서드를 호출하며, 호출 시 데이터 개체를 item 매개 변수로 전달합니다. 반환 DataTemplate 된 개체가 해당 개체에 적용됩니다.

다음 스크린샷은 기본 컬렉션의 CollectionView 각 개체에 적용 PersonDataTemplateSelector 한 결과를 보여줍니다.

이 예제에서는 속성 값이 DateOfBirth 1980보다 크거나 같은 개체 Person 가 녹색으로 표시되고 다시 기본 개체가 빨간색으로 표시됩니다.