[C#/MAUI/.NET6] DataTemplate 엘리먼트 : 타입을 갖는 데이터 템플리트 사용하기

■ DataTemplate 엘리먼트를 사용해 타입을 갖는 데이터 템플리트를 사용하는 방법을 보여준다.

TestProject.zip

0.15MB

▶ PersonModel.cs

namespace TestProject
{
    /// <summary>
    /// 사람 모델
    /// </summary>
    public class PersonModel
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 이름 - Name

        /// <summary>
        /// 이름
        /// </summary>
        public string Name { get; set; }

        #endregion
        #region 나이 - Age

        /// <summary>
        /// 나이
        /// </summary>
        public int Age { get; set; }

        #endregion
        #region 위치 - Location

        /// <summary>
        /// 위치
        /// </summary>
        public string Location { get; set; }

        #endregion
    }
}

 

▶ PersonView.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentView x:Class="TestProject.PersonView"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
     <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0"
            FontAttributes="Bold"
            Text="{Binding Name}" />
        <Label Grid.Column="1"
            Text="{Binding Age}" />
        <Label Grid.Column="2"
            HorizontalTextAlignment="End"
            Text="{Binding Location}" />
    </Grid>
</ContentView>

 

▶ MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <CollectionView
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Margin="10">
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type local:PersonModel}">
                <local:PersonModel Name="Steve" Age="21" Location="USA"     />
                <local:PersonModel Name="John"  Age="37" Location="USA"     />
                <local:PersonModel Name="Tom"   Age="42" Location="UK"      />
                <local:PersonModel Name="Lucas" Age="29" Location="Germany" />
                <local:PersonModel Name="Tariq" Age="39" Location="UK"      />
                <local:PersonModel Name="Jane"  Age="30" Location="USA"     />
            </x:Array>
        </CollectionView.ItemsSource>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <local:PersonView />
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>