Xamarin.Forms 데이터 템플릿 소개Introduction to Xamarin.Forms Data Templates

샘플 다운로드 샘플 다운로드Download Sample Download the sample

Xamarin.Forms 데이터 템플릿은 지원되는 컨트롤의 데이터 표현을 정의하는 기능을 제공합니다. 이 문서에서는 데이터 템플릿이 필요한 이유를 검토하면서 데이터 템플릿을 소개합니다.Xamarin.Forms data templates provide the ability to define the presentation of data on supported controls. This article provides an introduction to data templates, examining why they are necessary.

Person 개체 컬렉션을 표시하는 ListView를 생각해봅니다.Consider a ListView that displays a collection of Person objects. 다음 코드 예제는 Person 클래스의 정의를 보여줍니다.The following code example shows the definition of the Person class:

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

Person 클래스는 Person 개체를 만들 때 설정할 수 있는 Name, AgeLocation 속성을 정의합니다.The Person class defines Name, Age, and Location properties, which can be set when a Person object is created. ListView는 다음 XAML 코드 예제처럼 Person 개체 컬렉션을 표시하는 데 사용됩니다.The ListView is used to display the collection of Person objects, as shown in the following XAML code example:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DataTemplates"
             ...>
    <StackLayout Margin="20">
        ...
        <ListView Margin="0,20,0,0">
            <ListView.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>
            </ListView.ItemsSource>
        </ListView>
    </StackLayout>
</ContentPage>

항목은 Person 인스턴스 배열에서 ItemsSource 속성을 인스턴스화하여 ListView에 XAML로 추가됩니다.Items are added to the ListView in XAML by initializing the ItemsSource property from an array of Person instances.

참고

x:Array 요소는 배열의 항목 유형을 나타내는 Type 특성이 필요합니다.Note that the x:Array element requires a Type attribute indicating the type of the items in the array.

해당하는 C# 페이지는 ItemsSource 속성을 Person 인스턴스의 List에 초기화하는 다음 코드 예제에 표시되어 있습니다.The equivalent C# page is shown in the following code example, which initializes the ItemsSource property to a List of Person instances:

public WithoutDataTemplatePageCS()
{
    ...
    var people = new List<Person>
    {
        new Person { Name = "Steve", Age = 21, Location = "USA" },
        new Person { Name = "John", Age = 37, Location = "USA" },
        new Person { Name = "Tom", Age = 42, Location = "UK" },
        new Person { Name = "Lucas", Age = 29, Location = "Germany" },
        new Person { Name = "Tariq", Age = 39, Location = "UK" },
        new Person { Name = "Jane", Age = 30, Location = "USA" }
    };

    Content = new StackLayout
    {
        Margin = new Thickness(20),
        Children = {
            ...
            new ListView { ItemsSource = people, Margin = new Thickness(0, 20, 0, 0) }
        }
    };
}

ListView는 컬렉션의 개체를 표시할 때 ToString을 호출합니다.The ListView calls ToString when displaying the objects in the collection. Person.ToString 재정의가 없기 때문에 ToString은 다음 스크린샷에 표시된 것처럼 각 개체의 형식 이름을 반환합니다.Because there is no Person.ToString override, ToString returns the type name of each object, as shown in the following screenshots:

Person 개체는 다음 코드 예제처럼 의미 있는 데이터를 표시하도록 ToString 메서드를 재정의할 수 있습니다.The Person object can override the ToString method to display meaningful data, as shown in the following code example:

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

이렇게 하면 다음 스크린샷처럼 ListView는 컬렉션의 각 개체에 대한 Person.Name 속성 값을 표시합니다.This results in the ListView displaying the Person.Name property value for each object in the collection, as shown in the following screenshots:

Person.ToString 재정의는 Name, AgeLocation 속성으로 구성되는 형식이 지정된 문자열을 반환할 수 있습니다.The Person.ToString override could return a formatted string consisting of the Name, Age, and Location properties. 그러나 이 방법은 데이터의 각 항목이 표시되는 모양을 제한적으로 제어할 수 있습니다.However, this approach offers only a limited control over the appearance of each item of data. 유연성을 높이려면 데이터의 모양을 정의하는 DataTemplate을 만들어야 합니다.For more flexibility, a DataTemplate can be created that defines the appearance of the data.

DataTemplate 만들기Creating a DataTemplate

DataTemplate은 데이터 모양을 지정하는 데 사용되며, 일반적으로 데이터 바인딩을 사용하여 데이터를 표시합니다.A DataTemplate is used to specify the appearance of data, and typically uses data binding to display data. 일반적인 사용 시나리오는 ListView의 개체 컬렉션에 있는 데이터를 표시하는 것입니다.Its common usage scenario is when displaying data from a collection of objects in a ListView. 예를 들어 ListViewPerson 개체의 컬렉션에 바인딩되면 ListView.ItemTemplate 속성은 ListView에 있는 각 Person 개체의 모양을 정의하는 DataTemplate으로 설정됩니다.For example, when a ListView is bound to a collection of Person objects, the ListView.ItemTemplate property will be set to a DataTemplate that defines the appearance of each Person object in the ListView. DataTemplate은 각 Person 개체의 속성 값에 바인딩되는 요소를 포함할 것입니다.The DataTemplate will contain elements that bind to property values of each Person object. 데이터 바인딩에 대한 자세한 내용은 데이터 바인딩 기본을 참조하세요.For more information about data binding, see Data Binding Basics.

DataTemplate은 다음 속성의 값으로 사용할 수 있습니다.A DataTemplate can be used as a value for the following properties:

참고

TableViewCell 개체를 사용하지만 DataTemplate을 사용하지 않습니다.Note that although the TableView makes uses of Cell objects, it does not use a DataTemplate. 데이터 바인딩이 항상 Cell 개체에서 직접 설정되기 때문입니다.This is because data bindings are always set directly on Cell objects.

위에 나열된 속성의 직계 자식으로 배치되는 DataTemplate인라인 템플릿이라고 합니다.A DataTemplate that's placed as a direct child of the properties listed above is known as an inline template. 또는 DataTemplate을 컨트롤 수준, 페이지 수준 또는 애플리케이션 수준 리소스로 정의할 수 있습니다.Alternatively, a DataTemplate can be defined as a control-level, page-level, or application-level resource. DataTemplate을 정의할 위치를 선택하면 사용할 수 있는 위치가 결정됩니다.Choosing where to define a DataTemplate impacts where it can be used:

  • 컨트롤 수준에서 정의된 DataTemplate은 컨트롤에만 적용할 수 있습니다.A DataTemplate defined at the control level can only be applied to the control.
  • 페이지 수준에서 정의된 DataTemplate은 페이지의 여러 유효한 컨트롤에 적용할 수 있습니다.A DataTemplate defined at the page level can be applied to multiple valid controls on the page.
  • 애플리케이션 수준에서 정의된 DataTemplate은 애플리케이션 전체의 유효한 컨트롤에 적용할 수 있습니다.A DataTemplate defined at the application level can be applied to valid controls throughout the application.

보기 계층 구조의 하단에 위치한 데이터 템플릿은 x:Key 특성을 공유할 때 상단에 정의된 데이터 템플릿보다 우선권을 갖습니다.Data templates lower in the view hierarchy take precedence over those defined higher up when they share x:Key attributes. 예를 들어 애플리케이션 수준 데이터 템플릿은 페이지 수준 데이터 템플릿에 의해 재정의되고, 페이지 수준 데이터 템플릿은 컨트롤 수준 데이터 템플릿 또는 인라인 데이터 템플릿에 의해 재정의됩니다.For example, an application-level data template will be overridden by a page-level data template, and a page-level data template will be overridden by a control-level data template, or an inline data template.