[C#/MAUI/.NET6] ContentView 엘리먼트 : 카드 뷰 만들기

TestProject.zip

0.15MB

▶ CardView.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentView x:Class="TestProject.CardView"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Frame x:Name="frame"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Margin="0,0,0,0"
        CornerRadius="5"
        BorderColor="{Binding BorderColor}"
        BackgroundColor="{Binding CardColor}"
        HasShadow="True"
        Padding="8">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="75"   />
                <RowDefinition Height="5"    />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="75"  />
                <ColumnDefinition Width="200" />
            </Grid.ColumnDefinitions>
            <Frame Grid.Row="0" Grid.Column="0"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                WidthRequest="60"
                HeightRequest="60"
                CornerRadius="40"
                BorderColor="{Binding BorderColor, FallbackValue='Black'}"
                BackgroundColor="{Binding IconBackgroundColor, FallbackValue='Gray'}"
                HasShadow="False"
                IsClippedToBounds="True">
                <Image 
                    Margin="-20"
                    WidthRequest="100"
                    HeightRequest="100"
                    Aspect="AspectFill"
                    Source="{Binding IconImageSource}" />
            </Frame>
            <Label Grid.Row="0" Grid.Column="1"
                HorizontalTextAlignment="Start"
                VerticalTextAlignment="Center"
                FontSize="Large"
                FontAttributes="Bold"
                Text="{Binding CardTitle, FallbackValue='Card Title'}" />
            <BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
                HorizontalOptions="Fill"
                HeightRequest="2"
                BackgroundColor="{Binding BorderColor, FallbackValue='Black'}" />
           <Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
                HorizontalOptions="Fill"
                VerticalOptions="Fill"
                VerticalTextAlignment="Start"
                Text="{Binding CardDescription, FallbackValue='Card description text.'}" />
        </Grid>
    </Frame>
</ContentView>

 

728x90

 

▶ CardView.xaml.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

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

    #region 생성자 - CardView()

    /// <summary>
    /// 생성자
    /// </summary>
    public CardView()
    {
        InitializeComponent();

        this.frame.BindingContext = this;
    }

    #endregion
}

 

300x250

 

▶ 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">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <local:CardView
            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
            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>