[C#/MAUI/.NET6] ControlTemplate 엘리먼트 : 템플리트에서 뷰 모델 바인딩하기

■ ControlTemplate 엘리먼트를 사용해 템플리트에서 뷰 모델을 바인딩하는 방법을 보여준다.

TestProject.zip

0.15MB

▶ CardView.cs

namespace TestProject;

/// <summary>
/// 카드 뷰
/// </summary>
public partial class CardView : ContentView
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Bindable Property
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region 테두리 색상 속성 - BorderColorProperty

    /// <summary>
    /// 테두리 색상 속성
    /// </summary>
    public static readonly BindableProperty BorderColorProperty = BindableProperty.Create
    (
        nameof(BorderColor),
        typeof(Color),
        typeof(CardView),
        Colors.DarkGray
    );

    #endregion
    #region 카드 색상 속성 - CardColorProperty

    /// <summary>
    /// 카드 색상 속성
    /// </summary>
    public static readonly BindableProperty CardColorProperty = BindableProperty.Create
    (
        nameof(CardColor),
        typeof(Color),
        typeof(CardView),
        Colors.White
    );

    #endregion
    #region 아이콘 배경 색상 속성 - IconBackgroundColorProperty

    /// <summary>
    /// 아이콘 배경 색상 속성
    /// </summary>
    public static readonly BindableProperty IconBackgroundColorProperty = BindableProperty.Create
    (
        nameof(IconBackgroundColor),
        typeof(Color),
        typeof(CardView),
        Colors.LightGray
    );

    #endregion
    #region 아이콘 이미지 소스 속성 - IconImageSourceProperty

    /// <summary>
    /// 아이콘 이미지 소스 속성
    /// </summary>
    public static readonly BindableProperty IconImageSourceProperty = BindableProperty.Create
    (
        nameof(IconImageSource),
        typeof(ImageSource),
        typeof(CardView),
        default(ImageSource)
    );

    #endregion
    #region 카드 제목 속성 - CardTitleProperty

    /// <summary>
    /// 카드 제목 속성
    /// </summary>
    public static readonly BindableProperty CardTitleProperty = BindableProperty.Create
    (
        nameof(CardTitle),
        typeof(string),
        typeof(CardView),
        string.Empty
    );

    #endregion
    #region 카드 설명 속성 - CardDescriptionProperty

    /// <summary>
    /// 카드 설명 속성
    /// </summary>
    public static readonly BindableProperty CardDescriptionProperty = BindableProperty.Create
    (
        nameof(CardDescription),
        typeof(string),
        typeof(CardView),
        string.Empty
    );

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 테두리 색상 - BorderColor

    /// <summary>
    /// 테두리 색상
    /// </summary>
    public Color BorderColor
    {
        get => (Color)GetValue(BorderColorProperty);
        set => SetValue(BorderColorProperty, value);
    }

    #endregion
    #region 카드 색상 - CardColor

    /// <summary>
    /// 카드 색상
    /// </summary>
    public Color CardColor
    {
        get => (Color)GetValue(CardColorProperty);
        set => SetValue(CardColorProperty, value);
    }

    #endregion
    #region 아이콘 배경 색상 - IconBackgroundColor

    /// <summary>
    /// 아이콘 배경 색상
    /// </summary>
    public Color IconBackgroundColor
    {
        get => (Color)GetValue(IconBackgroundColorProperty);
        set => SetValue(IconBackgroundColorProperty, value);
    }

    #endregion
    #region 아이콘 이미지 소스 - IconImageSource

    /// <summary>
    /// 아이콘 이미지 소스
    /// </summary>
    public ImageSource IconImageSource
    {
        get => (ImageSource)GetValue(IconImageSourceProperty);
        set => SetValue(IconImageSourceProperty, value);
    }

    #endregion
    #region 카드 제목 - CardTitle

    /// <summary>
    /// 카드 제목
    /// </summary>
    public string CardTitle
    {
        get => (string)GetValue(CardTitleProperty);
        set => SetValue(CardTitleProperty, value);
    }

    #endregion
    #region 카드 설명 - CardDescription

    /// <summary>
    /// 카드 설명
    /// </summary>
    public string CardDescription
    {
        get => (string)GetValue(CardDescriptionProperty);
        set => SetValue(CardDescriptionProperty, value);
    }

    #endregion
}

 

▶ MainPageViewModel.cs

using System.Collections.ObjectModel;
using System.Windows.Input;

namespace TestProject;

/// <summary>
/// 메인 페이지 뷰 모델
/// </summary>
public class MainPageViewModel
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 사람 컬렉션 - PersonCollection

    /// <summary>
    /// 사람 컬렉션
    /// </summary>
    public ObservableCollection<PersonModel> PersonCollection { get; private set; }

    #endregion
    #region 사람 삭제 명령 - DeletePersonCommand

    /// <summary>
    /// 사람 삭제 명령
    /// </summary>
    public ICommand DeletePersonCommand { get; private set; }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPageViewModel()

    /// <summary>
    /// 생성자
    /// </summary>
    public MainPageViewModel()
    {
        PersonCollection = new ObservableCollection<PersonModel>
        {
            new PersonModel
            {
                Name        = "John Doe",
                Description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum."
            },
            new PersonModel
            {
                Name        = "Jane Doe",
                Description = "Phasellus eu convallis mi. In tempus augue eu dignissim fermentum. Morbi ut lacus vitae eros lacinia."
            }
        };

        DeletePersonCommand = new Command<string>
        (
            (name) =>
            {
                PersonModel person = PersonCollection.Where(x => x.Name == name).FirstOrDefault();

                if(person != null)
                {
                    PersonCollection.Remove(person);
                }
            }
        );
    }

    #endregion
}

 

▶ 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">
    <ContentPage.BindingContext>
        <local:MainPageViewModel />
    </ContentPage.BindingContext>
    <ContentPage.Resources>
        <ControlTemplate x:Key="CardViewControlTemplateKey">
            <Frame
                BindingContext="{Binding Source={RelativeSource TemplatedParent}}"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                CornerRadius="10"
                BorderColor="{Binding BorderColor}"
                BackgroundColor="{Binding CardColor}"
                HasShadow="True"
                Padding="10">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="75"   />
                        <RowDefinition Height="5"    />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Label
                        HorizontalTextAlignment="Start"
                        VerticalTextAlignment="Center"
                        FontAttributes="Bold"
                        FontSize="18"
                        Text="{Binding CardTitle}" />
                    <BoxView Grid.Row="1"
                        HorizontalOptions="Fill"
                        HeightRequest="2"
                        BackgroundColor="{Binding BorderColor}" />
                    <Label Grid.Row="2"
                        HorizontalOptions="Fill"
                        VerticalOptions="Fill"
                        VerticalTextAlignment="Start"
                        Text="{Binding CardDescription}" />
                    <Button
                        HorizontalOptions="End"
                        Margin="0,10,0,10"
                        Text="삭제"
                        CommandParameter="{Binding CardTitle}"
                        Command="{Binding Source={RelativeSource AncestorType={x:Type local:MainPageViewModel}}, Path=DeletePersonCommand}" />
                </Grid>
            </Frame>
        </ControlTemplate>
        <DataTemplate x:Key="PersonDataTemplateKey">
            <local:CardView
                ControlTemplate="{StaticResource CardViewControlTemplateKey}"
                BorderColor="DarkGray"
                CardTitle="{Binding Name}"
                CardDescription="{Binding Description}" />
        </DataTemplate>
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Margin="10"
        Spacing="10"
        BindableLayout.ItemTemplate="{StaticResource PersonDataTemplateKey}"
        BindableLayout.ItemsSource="{Binding PersonCollection}" />
</ContentPage>