[MAUI 활용] BookStore 만들기 (9) – ItemTemplate, DataTemplate

이번 포스팅에서는 BookStore 의 View 개발을 더 진행하기 전에 간단히 ItemTemplate 과 DataTemplate 에 관해서 알아보도록 하겠습니다.  ItemTemplate과 DataTemplate는 XAML에서 컬렉션 데이터를 시각적으로 표현할 때 사용되는 중요한 개념입니다. 이 둘은 주로 ListView, CollectionView, ItemsControl 같은 컨트롤에서 활용되며, 컬렉션의 각 항목이 어떻게 보여질지를 정의합니다.

ItemTemplate

[CollectionView 의 ItemTemplate]

<CollectionView ItemsSource="{Binding Books}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Frame HeightRequest="90">
                <HorizontalStackLayout Padding="10" Spacing="5">
                    <Label Text="{Binding BookTitle}" />
                    <Label Text="{Binding Author}" />
                </HorizontalStackLayout>
            </Frame>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

위 예시에서

• CollectionView는 Books라는 컬렉션을 ItemsSource로 바인딩합니다.
• 각 Book 항목은 ItemTemplate 속성에 정의된 DataTemplate을 사용하여 화면에 표시됩니다.
• DataTemplate 내부에서는 Book 객체의 Title과 Author 속성을 Label로 바인딩하고 표시합니다.

즉, ItemTemplate은 컬렉션의 각 아이템이 어떻게 렌더링될지를 정의하는 역할을 합니다.

DataTemplate

DataTemplate은 데이터 항목을 어떻게 시각적으로 표현할지에 대한 템플릿을 정의합니다. ItemTemplate 속성에 중첩되어 사용되며, 데이터를 바인딩하여 화면에 표시할 때 그레이아웃과 UI 구조를 지정할 수 있습니다.

[DataTemplate 정의]

<DataTemplate x:DataType="model:Book">
    <Frame HeightRequest="90">
        <HorizontalStackLayout Padding="10" Spacing="5">
            <Label Text="{Binding BookTitle}" />
            <Label Text="{Binding Author}" />
        </HorizontalStackLayout>
    </Frame>
</DataTemplate>

• DataTemplate은 Book이라는 데이터 항목에 대한 템플릿을 정의합니다.
• x:DataType=”model:Book” 을 통해 DataTemplate 내에서 Book 타입의 데이터를 처리할 것임을 명시합니다.
• Binding을 통해 Book 객체의 Title과 Author 속성을 Label에 연결해 UI에 표시합니다.

ItemTemplate과 DataTemplate의 관계

• **ItemTemplate**은 컬렉션의 각 항목이 어떻게 표시될지를 정의하는 속성입니다.
• **DataTemplate**은 특정 데이터 항목이 어떤 방식으로 렌더링될지 정의하는 템플릿입니다.
• ItemTemplate 속성 내부에 **DataTemplate**을 포함하여, 각 항목을 렌더링하는 방법을 구체적으로 지정합니다.

요약

• ItemTemplate: 컬렉션의 각 항목이 어떻게 보여질지 정의합니다. CollectionView, ListView, ItemsControl에서 사용됩니다.
• DataTemplate: 개별 데이터 항목이 어떤 UI 형태로 표현될지 정의하는 템플릿입니다.
• 이 둘은 함께 사용되어, 데이터 항목을 컬렉션의 UI로 바인딩하고 렌더링하는데 활용됩니다. ItemTemplate은 전체 컬렉션의 항목을 위한 틀을 제공하고, DataTemplate은 그 틀 안에서 개별 항목의 레이아웃을 정의합니다.