[C#/MAUI/.NET6] TemplatedView 클래스 : GetTemplateChild 메소드를 사용해 템플리트 내 객체 구하기

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

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Protected

    #region 템플리트 적용시 처리하기 - OnApplyTemplate()

    /// <summary>
    /// 템플리트 적용시 처리하기
    /// </summary>
    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        Frame frame = (Frame)GetTemplateChild("frame");

        frame.BackgroundColor = Colors.Gold;
    }

    #endregion
}

 

728x90

 

▶ 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.Resources>
        <ControlTemplate x:Key="CardViewControlTemplateKey">
            <Frame x:Name="frame"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                CornerRadius="10"
                BorderColor="{TemplateBinding BorderColor}"
                BackgroundColor="{TemplateBinding CardColor}"
                Padding="10"
                HasShadow="True">
                <Frame.Shadow>
                    <Shadow
                        Offset="20,20"
                        Radius="40"
                        Opacity="0.8"
                        Brush="Black" />
                </Frame.Shadow>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="75"   />
                        <RowDefinition Height="4"    />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="75"  />
                        <ColumnDefinition Width="200" />
                    </Grid.ColumnDefinitions>
                    <Frame
                        HorizontalOptions="Center"
                        VerticalOptions="Center"
                        WidthRequest="60"
                        HeightRequest="60"
                        CornerRadius="38"
                        BorderColor="{TemplateBinding BorderColor}"
                        BackgroundColor="{TemplateBinding IconBackgroundColor}"
                        IsClippedToBounds="True">
                        <Image
                            Margin="-20"
                            WidthRequest="100"
                            HeightRequest="100"
                            Aspect="AspectFill"
                            Source="{TemplateBinding IconImageSource}" />
                    </Frame>
                    <Label Grid.Column="1"
                        HorizontalTextAlignment="Start"
                        VerticalTextAlignment="Center"
                        FontAttributes="Bold"
                        FontSize="18"
                        TextColor="Black"
                        Text="{TemplateBinding CardTitle}" />
                    <BoxView Grid.Row="1" Grid.ColumnSpan="2"
                        HorizontalOptions="Fill"
                        HeightRequest="2"
                        BackgroundColor="{TemplateBinding BorderColor}" />
                    <Label Grid.Row="2" Grid.ColumnSpan="2"
                        HorizontalOptions="Fill"
                        VerticalOptions="Fill"
                        VerticalTextAlignment="Start"
                        FontAttributes="Italic"
                        Text="{TemplateBinding CardDescription}" />
                </Grid>
            </Frame>
        </ControlTemplate>
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <local:CardView x:Name="cardView1"
            ControlTemplate="{StaticResource CardViewControlTemplateKey}"
            HorizontalOptions="Center"
            BorderColor="DarkGray"
            IconBackgroundColor="SlateGray"
            IconImageSource="dotnet_bot.png"
            CardTitle="John Doe"
            CardDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum." />
        <local:CardView
            ControlTemplate="{StaticResource CardViewControlTemplateKey}"
            HorizontalOptions="Center"
            BorderColor="DarkGray"
            IconBackgroundColor="SlateGray"
            IconImageSource="dotnet_bot.png"
            CardTitle="Jane Doe"
            CardDescription="Phasellus eu convallis mi. In tempus augue eu dignissim fermentum. Morbi ut lacus vitae eros lacinia." />
    </StackLayout>
</ContentPage>