MICROSOFT Archives - 30 중 3 번째 페이지

[C#/MAUI/.NET6] DataTemplate 엘리먼트 : 인라인 데이터 템플리트 사용하기

■ DataTemplate 엘리먼트를 사용해 인라인 데이터 템플리트를 사용하는 방법을 보여준다. ▶ 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
    }
}

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

}

▶ 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>
                <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>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

<?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>

<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>

</DataTemplate>

</CollectionView.ItemTemplate>

</CollectionView>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] RelativeSource 태그 확장 : 바인딩 뷰 모델 참조하기

■ RelativeSource 태그 확장에서 바인딩 뷰 모델을 참조하는 방법을 보여준다. ▶ 예제 코드 (XAML)


Command="{Binding Source={RelativeSource AncestorType={x:Type local:MainPageViewModel}}, Path=DeletePersonCommand}" />

Command="{Binding Source={RelativeSource AncestorType={x:Type local:MainPageViewModel}}, Path=DeletePersonCommand}" />

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

■ ControlTemplate 엘리먼트를 사용해 템플리트에서 뷰 모델을 바인딩하는 방법을 보여준다. ▶ 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
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

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
}

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>

<?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>

<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>

</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>

<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>

TestProject.zip

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

■ TemplatedView 클래스의 GetTemplateChild 메소드를 사용해 템플리트 내 객체를 구하는 방법을 보여준다. ▶ 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
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

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

}

▶ 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>

<?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>

<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>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</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>

TestProject.zip

[C#/MAUI/.NET6] ContentPresenter 엘리먼트 사용하기

■ ContentPresenter 엘리먼트를 사용하는 방법을 보여준다. ▶ App.xaml


<?xml version = "1.0" encoding = "UTF-8" ?>
<Application x:Class="TestProject.App"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Application.Resources>
        <ControlTemplate x:Key="TealControlTemplateKey">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.1*" />
                    <RowDefinition Height="0.8*" />
                    <RowDefinition Height="0.1*" />
                </Grid.RowDefinitions>
                <BoxView Color="Teal" />
                <Label
                    VerticalOptions="Center"
                    Margin="20,0,0,0"
                    FontSize="24"
                    TextColor="White"
                    Text="{TemplateBinding Title}" />
                <ContentPresenter Grid.Row="1" />
                <BoxView Grid.Row="2"
                    Color="Teal" />
                <Label Grid.Row="2"
                    HorizontalOptions="Start"
                    VerticalOptions="Center"
                    Margin="20,0,0,0"
                    TextColor="White"
                    Text="테마 변경" />
                <Label Grid.Row="2"
                    VerticalOptions="Center"
                    HorizontalOptions="End"
                    Margin="0,0,20,0"
                    TextColor="White"
                    Text="도움말" />
            </Grid>
        </ControlTemplate>
    </Application.Resources>
</Application>

<?xml version = "1.0" encoding = "UTF-8" ?>

<Application x:Class="TestProject.App"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

<Application.Resources>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Label

VerticalOptions="Center"

Margin="20,0,0,0"

FontSize="24"

TextColor="White"

Text="{TemplateBinding Title}" />

<BoxView Grid.Row="2"

Color="Teal" />

<Label Grid.Row="2"

HorizontalOptions="Start"

VerticalOptions="Center"

Margin="20,0,0,0"

TextColor="White"

Text="테마 변경" />

<Label Grid.Row="2"

VerticalOptions="Center"

HorizontalOptions="End"

Margin="0,0,20,0"

TextColor="White"

Text="도움말" />

</Grid>

</ControlTemplate>

</Application.Resources>

</Application>

▶ 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"
    ControlTemplate="{StaticResource TealControlTemplateKey}"
    Title="테스트 앱">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <Entry
            HorizontalOptions="Center"
            Placeholder="사용자명을 입력해 주시기 바랍니다." />
        <Entry
            HorizontalOptions="Center"
            Placeholder="패스워드를 입력해 주시기 바랍니다."
            IsPassword="True" />
        <Button
            HorizontalOptions="Center"
            Text="로그인" />
    </StackLayout>
</ContentPage>

<?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"

ControlTemplate="{StaticResource TealControlTemplateKey}"

Title="테스트 앱">

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<Entry

HorizontalOptions="Center"

Placeholder="사용자명을 입력해 주시기 바랍니다." />

<Entry

HorizontalOptions="Center"

Placeholder="패스워드를 입력해 주시기 바랍니다."

IsPassword="True" />

<Button

HorizontalOptions="Center"

Text="로그인" />

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] Style 엘리먼트 : TargetTye 속성을 사용해 컨트롤 템플리트 설정하기

■ Style 엘리먼트의 TargetTye 속성을 사용해 컨트롤 템플리트를 설정하는 방법을 보여준다. ▶ 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>

<?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>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</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>

▶ 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
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

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

}

▶ 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
                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>
        <Style TargetType="local:CardView">
            <Setter Property="ControlTemplate" Value="{StaticResource CardViewControlTemplateKey}" />
        </Style>
    </ContentPage.Resources>
    <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>

<?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>

<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>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</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>

</Style>

</ContentPage.Resources>

<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>

TestProject.zip

[C#/MAUI/.NET6] ControlTemplate 엘리먼트 : ContentView 엘리먼트 정의하기 (커스텀 컨트롤 만들기)

■ ControlTemplate 엘리먼트를 사용해 ContentView 엘리먼트를 정의하는 방법을 보여준다. ▶ 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
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

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

}

▶ 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>

<?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>

<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>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</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>

TestProject.zip

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

■ ContentView 엘리먼트에서 카드 뷰를 만드는 방법을 보여준다. ▶ 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>

<?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>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</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>

▶ 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
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

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

}

▶ 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>

<?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>

TestProject.zip

[C#/MAUI/.NET6] StyleSheet 엘리먼트 : Source 속성을 사용해 CSS 파일 로드하기

■ StyleSheet 엘리먼트의 Source 속성을 사용해 CSS 파일을 로드하는 방법을 보여준다. ▶ App.xaml


<Application x:Class="TestProject.App"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Application.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </Application.Resources>
</Application>

<Application x:Class="TestProject.App"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

<Application.Resources>

</Application.Resources>

</Application>

[C#/MAUI/.NET6] 프로젝트 파일에 스플래시 화면 추가하기

■ 프로젝트 파일에서 스플래시 화면을 추가하는 방법을 보여준다. ▶ 예제 코드 (XML)


<ItemGroup>
    <MauiSplashScreen Include="Resources\Images\splashscreen.svg" />
</ItemGroup>

또는

<ItemGroup>
    <MauiSplashScreen Include="Resources\appiconfg.svg"
        Color="#512bd4"
        BaseSize="128,128" />
</ItemGroup>

</ItemGroup>

또는

<MauiSplashScreen Include="Resources\appiconfg.svg"

Color="#512bd4"

BaseSize="128,128" />

</ItemGroup>

[C#/MAUI/.NET6] 프로젝트 파일에 원시 자산 파일 추가하기

■ 프로젝트 파일에 원시 자산 파일을 추가하는 방법을 보여준다. ▶ 예제 코드 (XML)


<ItemGroup>
    <MauiAsset Include="Resources\Assets\*" />
</ItemGroup>

또는

<ItemGroup>
    <MauiAsset Include="Resources\Raw\index.html" />
</ItemGroup>

또는

<ItemGroup>
    <MauiAsset
        Include="Resources\Raw\**"
        LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
</ItemGroup>

</ItemGroup>

또는

</ItemGroup>

또는

<MauiAsset

Include="Resources\Raw\**"

LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />

</ItemGroup>

[C#/MAUI/.NET6] 프로젝트 파일에 앱 아이콘 추가하기

■ 프로젝트 파일에 앱 아이콘을 추가하는 방법을 보여준다. ▶ 예제 코드 (XML)


<ItemGroup>
    <MauiIcon Include="Resources\Images\appicon.png" />
</ItemGroup>

또는

<ItemGroup>
    <MauiIcon
        Include="Resources\appicon.svg"
        ForegroundFile="Resources\appiconfg.svg"
        Color="#512bd4" />
</ItemGroup>

</ItemGroup>

또는

<MauiIcon

Include="Resources\appicon.svg"

ForegroundFile="Resources\appiconfg.svg"

Color="#512bd4" />

</ItemGroup>

[C#/MAUI/.NET6] 프로젝트 파일에 이미지 파일 추가하기

■ 프로젝트 파일에 이미지 파일을 추가하는 방법을 보여준다. ▶ 예제 코드 (XML)


<ItemGroup>
    <MauiImage Include="Resources\Images\**\*" />
</ItemGroup>

또는

<ItemGroup>
    <MauiImage Include="Resources\Images\*" />
    <MauiImage
        Update="Resources\Images\dotnet_bot.svg"
        BaseSize="168,208" />
</ItemGroup>

</ItemGroup>

또는

<MauiImage

Update="Resources\Images\dotnet_bot.svg"

BaseSize="168,208" />

</ItemGroup>

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutFooterTemplate 속성을 사용해 플라이아웃 바닥글 설정하기

■ Shell 엘리먼트의 FlyoutFooterTemplate 속성을 사용해 플라이아웃 바닥글을 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:sys="clr-namespace:System;assembly=netstandard"
    xmlns:local="clr-namespace:TestProject">
    <Shell.FlyoutFooterTemplate>
        <DataTemplate>
            <Grid BackgroundColor="Black">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Label Grid.Row="0"
                    HorizontalOptions="Center"
                    FontAttributes="Bold"
                    TextColor="White"
                    Text="TestProject" />
                <Label Grid.Row="1"
                    HorizontalOptions="Center"
                    TextColor="White"
                    Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:yyyy-MM-dd HH:mm:ss}'}" />
            </Grid>
        </DataTemplate>
    </Shell.FlyoutFooterTemplate>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:sys="clr-namespace:System;assembly=netstandard"

xmlns:local="clr-namespace:TestProject">

<Shell.FlyoutFooterTemplate>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Label Grid.Row="0"

HorizontalOptions="Center"

FontAttributes="Bold"

TextColor="White"

Text="TestProject" />

<Label Grid.Row="1"

HorizontalOptions="Center"

TextColor="White"

Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='{0:yyyy-MM-dd HH:mm:ss}'}" />

</Grid>

</DataTemplate>

</Shell.FlyoutFooterTemplate>

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutHeaderTemplate 속성을 사용해 플라이아웃 헤더 설정하기

■ Shell 엘리먼트의 FlyoutHeaderTemplate 속성을 사용해 플라이아웃 헤더를 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <Shell.FlyoutHeaderTemplate>
        <DataTemplate>
            <Grid BackgroundColor="Black">
                <Image
                    Aspect="AspectFill"
                    Opacity="0.6"
                    Source="sample1.png" />
                <Label
                    Margin="10"
                    HorizontalTextAlignment="Center"
                    VerticalTextAlignment="Center"
                    FontAttributes="Bold"
                    TextColor="White"
                    Text="Animals" />
            </Grid>
        </DataTemplate>
    </Shell.FlyoutHeaderTemplate>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Shell.FlyoutHeaderTemplate>

<Image

Aspect="AspectFill"

Opacity="0.6"

Source="sample1.png" />

<Label

Margin="10"

HorizontalTextAlignment="Center"

VerticalTextAlignment="Center"

FontAttributes="Bold"

TextColor="White"

Text="Animals" />

</Grid>

</DataTemplate>

</Shell.FlyoutHeaderTemplate>

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutContentTemplate 속성 사용하기

■ Shell 엘리먼트의 FlyoutContentTemplate 속성을 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell" x:Name="shell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <Shell.FlyoutContentTemplate>
        <DataTemplate>
            <CollectionView
                BindingContext="{x:Reference shell}"
                IsGrouped="True"
                ItemsSource="{Binding FlyoutItems}">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Label
                            FontSize="18"
                            TextColor="Black"
                            Text="{Binding Title}" />
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </DataTemplate>
    </Shell.FlyoutContentTemplate>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell" x:Name="shell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Shell.FlyoutContentTemplate>

<CollectionView

BindingContext="{x:Reference shell}"

IsGrouped="True"

ItemsSource="{Binding FlyoutItems}">

<CollectionView.ItemTemplate>

<Label

FontSize="18"

TextColor="Black"

Text="{Binding Title}" />

</DataTemplate>

</CollectionView.ItemTemplate>

</CollectionView>

</DataTemplate>

</Shell.FlyoutContentTemplate>

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] VisualStateManager 엘리먼트 : VisualStateGroups 첨부 속성을 Shell.ItemTemplate 속성에서 사용하기

■ VisualStateManager 엘리먼트의 VisualStateGroups 첨부 속성을 Shell.ItemTemplate 속성에서 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell" x:Name="shell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid HeightRequest="50">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition Width="*"  />
                </Grid.ColumnDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="Transparent" />
                                    <Setter
                                        TargetName="label"
                                        Property="Label.TextColor"
                                        Value="Black" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="RoyalBlue" />
                                    <Setter
                                        TargetName="label"
                                        Property="Label.TextColor"
                                        Value="White" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </VisualStateManager.VisualStateGroups>
                <Image Grid.Column="0"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    WidthRequest="32"
                    HeightRequest="32"
                    Source="{Binding FlyoutIcon}" />
                <Label x:Name="label" Grid.Column="1"
                    VerticalTextAlignment="Center"
                    FontSize="14"
                    Text="{Binding Title}" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
    <FlyoutItem
        Icon="sample1.png"
        Title="고양이"
        FlyoutDisplayOptions="AsSingleItem">
        <ShellContent ContentTemplate="{DataTemplate local:CatPage}" />
    </FlyoutItem>
    <FlyoutItem
        Icon="sample2.png"
        Title="개"
        FlyoutDisplayOptions="AsSingleItem">
        <ShellContent ContentTemplate="{DataTemplate local:DogPage}" />
    </FlyoutItem>
    <FlyoutItem
        Icon="sample3.png"
        Title="원숭이"
        FlyoutDisplayOptions="AsSingleItem">
        <ShellContent ContentTemplate="{DataTemplate local:MonkeyPage}" />
    </FlyoutItem>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell" x:Name="shell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<Shell.ItemTemplate>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<VisualStateManager.VisualStateGroups>

<VisualState.Setters>

<Setter

TargetName="label"

Property="Label.TextColor"

Value="Black" />

</VisualState.Setters>

</VisualState>

<VisualState.Setters>

<Setter

TargetName="label"

Property="Label.TextColor"

Value="White" />

</VisualState.Setters>

</VisualState>

</VisualStateGroup>

</VisualStateGroupList>

</VisualStateManager.VisualStateGroups>

<Image Grid.Column="0"

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="32"

HeightRequest="32"

Source="{Binding FlyoutIcon}" />

<Label x:Name="label" Grid.Column="1"

VerticalTextAlignment="Center"

FontSize="14"

Text="{Binding Title}" />

</Grid>

</DataTemplate>

</Shell.ItemTemplate>

<FlyoutItem

Icon="sample1.png"

Title="고양이"

FlyoutDisplayOptions="AsSingleItem">

</FlyoutItem>

<FlyoutItem

Icon="sample2.png"

Title="개"

FlyoutDisplayOptions="AsSingleItem">

</FlyoutItem>

<FlyoutItem

Icon="sample3.png"

Title="원숭이"

FlyoutDisplayOptions="AsSingleItem">

</FlyoutItem>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] FlyoutItem 엘리먼트 : FlyoutDisplayOptions 속성을 AsSingleItem으로 설정하기

■ FlyoutItem 엘리먼트의 FlyoutDisplayOptions 속성을 AsSingleItem으로 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell" x:Name="shell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <FlyoutItem
        Icon="sample1.png"
        Title="고양이"
        FlyoutDisplayOptions="AsSingleItem">
        <ShellContent ContentTemplate="{DataTemplate local:CatPage}" />
    </FlyoutItem>
    <FlyoutItem
        Icon="sample2.png"
        Title="개"
        FlyoutDisplayOptions="AsSingleItem">
        <ShellContent ContentTemplate="{DataTemplate local:DogPage}" />
    </FlyoutItem>
    <FlyoutItem
        Icon="sample3.png"
        Title="원숭이"
        FlyoutDisplayOptions="AsSingleItem">
        <ShellContent ContentTemplate="{DataTemplate local:MonkeyPage}" />
    </FlyoutItem>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell" x:Name="shell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<FlyoutItem

Icon="sample1.png"

Title="고양이"

FlyoutDisplayOptions="AsSingleItem">

</FlyoutItem>

<FlyoutItem

Icon="sample2.png"

Title="개"

FlyoutDisplayOptions="AsSingleItem">

</FlyoutItem>

<FlyoutItem

Icon="sample3.png"

Title="원숭이"

FlyoutDisplayOptions="AsSingleItem">

</FlyoutItem>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] FlyoutItem 엘리먼트 : FlyoutDisplayOptions 속성을 AsMultipleItems으로 설정하기

■ FlyoutItem 엘리먼트의 FlyoutDisplayOptions 속성을 AsMultipleItems으로 설정하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell" x:Name="shell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Icon="sample1.png"
            Title="고양이"
            ContentTemplate="{DataTemplate local:CatPage}" />
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Icon="sample2.png"
            Title="개"
            ContentTemplate="{DataTemplate local:DogPage}" />
    </FlyoutItem>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent
            Icon="sample3.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
    </FlyoutItem>
</Shell>

<?xml version="1.0" encoding="utf-8" ?>

<Shell x:Class="TestProject.AppShell" x:Name="shell"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:local="clr-namespace:TestProject">

<ShellContent

Icon="sample1.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

</FlyoutItem>

<ShellContent

Icon="sample2.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</FlyoutItem>

<ShellContent

Icon="sample3.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

</FlyoutItem>

</Shell>

TestProject.zip

[C#/MAUI/.NET6] ResourceDictionary 엘리먼트 : MergedDictionaries 속성에서 다른 프로젝트 리소스 파일 병합하기

■ ResourceDictionary 엘리먼트의 MergedDictionaries 속성에서 다른 프로젝트 리소스 파일을 병합하는 방법을 보여준다. [TestLibrary 프로젝트] ▶ ResourceDictionary1.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Style TargetType="Label">
        <Setter Property="Background" Value="Yellow" />
    </Style>
</ResourceDictionary>

<?xml version="1.0" encoding="utf-8" ?>

<ResourceDictionary

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</Style>

</ResourceDictionary>

[TestProject 프로젝트] ▶ ResourceDictionary2.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Style TargetType="Entry">
        <Setter Property="Background" Value="Orange" />
    </Style>
</ResourceDictionary>

<?xml version="1.0" encoding="utf-8" ?>

<ResourceDictionary

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</Style>

</ResourceDictionary>

[C#/MAUI/.NET6] ResourceDictionary 엘리먼트 : Source 속성을 사용해 리소스 파일 로드하기

■ ResourceDictionary 엘리먼트의 Source 속성을 사용해 리소스 파일을 로드하는 방법을 보여준다. ▶ ResourceDictionary.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Style TargetType="Label">
        <Setter Property="Background" Value="Yellow" />
    </Style>
    <Style TargetType="Entry">
        <Setter Property="Background" Value="Orange" />
    </Style>
</ResourceDictionary>

<?xml version="1.0" encoding="utf-8" ?>

<ResourceDictionary

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</Style>

</Style>

</ResourceDictionary>

▶ App.xaml


<?xml version = "1.0" encoding = "UTF-8" ?>
<Application x:Class="TestProject.App"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Application.Resources>
        <ResourceDictionary Source="ResourceDictionary.xaml" />
    </Application.Resources>
</Application>

<?xml version = "1.0" encoding = "UTF-8" ?>

<Application x:Class="TestProject.App"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

<Application.Resources>

</Application.Resources>

</Application>

▶ 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">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <Label
            HorizontalOptions="Start"
            Text="항목" />
        <Entry
            HorizontalOptions="CenterAndExpand"
            WidthRequest="300"
            Placeholder="항목을 입력해 주시기 바랍니다." />
    </StackLayout>
</ContentPage>

<?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">

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<Label

HorizontalOptions="Start"

Text="항목" />

<Entry

HorizontalOptions="CenterAndExpand"

WidthRequest="300"

Placeholder="항목을 입력해 주시기 바랍니다." />

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] ResourceDictionary 엘리먼트 : MergedDictionaries 속성을 사용해 리소스 파일 병합하기

■ ResourceDictionary 엘리먼트의 MergedDictionaries 속성을 사용해 리소스 파일을 병합하는 방법을 보여준다. ▶ ResourceDictionary1.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Style TargetType="Label">
        <Setter Property="Background" Value="Yellow" />
    </Style>
</ResourceDictionary>

<?xml version="1.0" encoding="utf-8" ?>

<ResourceDictionary

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</Style>

</ResourceDictionary>

▶ ResourceDictionary2.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Style TargetType="Entry">
        <Setter Property="Background" Value="Orange" />
    </Style>
</ResourceDictionary>

<?xml version="1.0" encoding="utf-8" ?>

<ResourceDictionary

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</Style>

</ResourceDictionary>

▶ App.xaml


<?xml version = "1.0" encoding = "UTF-8" ?>
<Application x:Class="TestProject.App"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ResourceDictionary1.xaml" />
                <ResourceDictionary Source="ResourceDictionary2.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<?xml version = "1.0" encoding = "UTF-8" ?>

<Application x:Class="TestProject.App"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

<Application.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainPage.xaml

[C#/MAUI/.NET6] MessageCenter 클래스 : Subscribe/Unsubscribe/Send 메소드를 사용해 메시지 송신/수신하기

■ MessageCenter 클래스의 Subscribe/Unsubscribe/Send 메소드를 사용해 메시지를 송신/수신하는 방법을 보여준다. ▶ 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">
    <Grid
        Margin="10"
        RowDefinitions="Auto,10,*">
        <Frame Grid.Row="0"
            Padding="10">
            <Grid RowDefinitions="Auto,Auto,Auto">
                <Label Grid.Row="0"
                    HorizontalOptions="Start"
                    Text="보낼 메시지" />
                <Entry x:Name="sendEntry" Grid.Row="1"
                    HorizontalOptions="StartAndExpand"
                    Margin="0,10,0,0"
                    Placeholder="보낼 메시지를 입력해 주시기 바랍니다."
                    MaxLength="20" />
                <Button x:Name="sendButton" Grid.Row="2"
                    HorizontalOptions="Center"
                    Margin="0,10,0,0"
                    Text="메시지 보내기" />
            </Grid>
        </Frame>
        <Frame Grid.Row="2"
            Padding="10">
            <Grid RowDefinitions="Auto,10,*">
                <StackLayout Grid.Row="0"
                    HorizontalOptions="Center"
                    Orientation="Horizontal"
                    Spacing="10">
                    <Button x:Name="subscribeButton"
                        VerticalOptions="Center"
                        Text="메시지 구독하기" />
                    <Button x:Name="unsubscribeButton"
                        VerticalOptions="Center"
                        Text="구독 취소하기" />
                </StackLayout>
                <Frame Grid.Row="2"
                    BorderColor="LightGray"
                    HasShadow="True"
                    Padding="10">
                    <ScrollView
                        HorizontalOptions="Fill"
                        VerticalOptions="Fill">
                        <CollectionView x:Name="receiveCollectionView" />
                    </ScrollView>
                </Frame>
            </Grid>
        </Frame>
    </Grid>
</ContentPage>

<?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">

<Grid

Margin="10"

RowDefinitions="Auto,10,*">

<Frame Grid.Row="0"

Padding="10">

<Label Grid.Row="0"

HorizontalOptions="Start"

Text="보낼 메시지" />

<Entry x:Name="sendEntry" Grid.Row="1"

HorizontalOptions="StartAndExpand"

Margin="0,10,0,0"

Placeholder="보낼 메시지를 입력해 주시기 바랍니다."

MaxLength="20" />

<Button x:Name="sendButton" Grid.Row="2"

HorizontalOptions="Center"

Margin="0,10,0,0"

Text="메시지 보내기" />

</Grid>

</Frame>

<Frame Grid.Row="2"

Padding="10">

<StackLayout Grid.Row="0"

HorizontalOptions="Center"

Orientation="Horizontal"

Spacing="10">

<Button x:Name="subscribeButton"

VerticalOptions="Center"

Text="메시지 구독하기" />

<Button x:Name="unsubscribeButton"

VerticalOptions="Center"

Text="구독 취소하기" />

</StackLayout>

<Frame Grid.Row="2"

BorderColor="LightGray"

HasShadow="True"

Padding="10">

<ScrollView

HorizontalOptions="Fill"

VerticalOptions="Fill">

</ScrollView>

</Frame>

</Grid>

</Frame>

</Grid>

</ContentPage>

▶ MainPage.xaml.cs


using System.Collections.ObjectModel;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public partial class MainPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Field
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region Field

    /// <summary>
    /// 메시지 주제
    /// </summary>
    private readonly string MESSAGE_SUBJECT = "TEST_MESSAGE";

    /// <summary>
    /// 수신 컬렉션
    /// </summary>
    private ObservableCollection<string> receiveCollection = new ObservableCollection<string>();

    #endregion

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

    #region 생성자 - MainPage()

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

        this.receiveCollectionView.ItemsSource = this.receiveCollection;

        this.sendButton.Clicked        += sendButton_Clicked;
        this.subscribeButton.Clicked   += subscribeButton_Clicked;
        this.unsubscribeButton.Clicked += unsubscribeButton_Clicked;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 메시지 보내기 버튼 클릭시 처리하기 - sendButton_Clicked(sender, e)

    /// <summary>
    /// 메시지 보내기 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void sendButton_Clicked(object sender, EventArgs e)
    {
        string message = this.sendEntry.Text;

        if(string.IsNullOrEmpty(message))
        {
            await DisplayAlert("INFORMATION", "보낼 메시지를 입력해 주시기 바랍니다.", "확인");

            return;
        }

        MessagingCenter.Send<MainPage, string>(this, MESSAGE_SUBJECT, $"[{DateTime.Now:HH:mm:ss}] {message}");
    }

    #endregion
    #region 메시지 구독하기 버튼 클릭시 처리하기 - subscribeButton_Clicked(sender, e)

    /// <summary>
    /// 메시지 구독하기 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void subscribeButton_Clicked(object sender, EventArgs e)
    {
        MessagingCenter.Subscribe<MainPage, string>
        (
            this.subscribeButton,
            MESSAGE_SUBJECT,
            (sender, args) => { this.receiveCollection.Add(args); }
        );
    }

    #endregion
    #region 구독 취소하기 버튼 클릭시 처리하기 - unsubscribeButton_Clicked(sender, e)

    /// <summary>
    /// 구독 취소하기 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void unsubscribeButton_Clicked(object sender, EventArgs e)
    {
        MessagingCenter.Unsubscribe<MainPage, string>(this.subscribeButton, MESSAGE_SUBJECT);
    }

    #endregion
}

100

101

102

103

104

105

106

using System.Collections.ObjectModel;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 메시지 주제

/// </summary>

private readonly string MESSAGE_SUBJECT = "TEST_MESSAGE";

/// <summary>

/// 수신 컬렉션

/// </summary>

private ObservableCollection<string> receiveCollection = new ObservableCollection<string>();

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.receiveCollectionView.ItemsSource = this.receiveCollection;

this.sendButton.Clicked += sendButton_Clicked;

this.subscribeButton.Clicked += subscribeButton_Clicked;

this.unsubscribeButton.Clicked += unsubscribeButton_Clicked;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 메시지 보내기 버튼 클릭시 처리하기 - sendButton_Clicked(sender, e)

/// <summary>

/// 메시지 보내기 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private async void sendButton_Clicked(object sender, EventArgs e)

{

string message = this.sendEntry.Text;

if(string.IsNullOrEmpty(message))

{

await DisplayAlert("INFORMATION", "보낼 메시지를 입력해 주시기 바랍니다.", "확인");

return;

}

MessagingCenter.Send<MainPage, string>(this, MESSAGE_SUBJECT, $"[{DateTime.Now:HH:mm:ss}] {message}");

}

#endregion

#region 메시지 구독하기 버튼 클릭시 처리하기 - subscribeButton_Clicked(sender, e)

/// <summary>

/// 메시지 구독하기 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void subscribeButton_Clicked(object sender, EventArgs e)

{

MessagingCenter.Subscribe<MainPage, string>

(

this.subscribeButton,

MESSAGE_SUBJECT,

(sender, args) => { this.receiveCollection.Add(args); }

);

}

#endregion

#region 구독 취소하기 버튼 클릭시 처리하기 - unsubscribeButton_Clicked(sender, e)

/// <summary>

/// 구독 취소하기 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void unsubscribeButton_Clicked(object sender, EventArgs e)

{

MessagingCenter.Unsubscribe<MainPage, string>(this.subscribeButton, MESSAGE_SUBJECT);

}

#endregion

}

TestProject.zip

[C#/MAUI/.NET6] Device 클래스 : GetNamedSize 정적 메소드를 사용해 특정 엘리먼트에 사용되는 폰트 크기 구하기

■ Device 클래스의 GetNamedSize 정적 메소드를 사용해 특정 엘리먼트에 사용되는 폰트 크기를 구하는 방법을 보여준다. ▶ 예제 코드 (C#)


Label label;

...

double fontSize = Device.GetNamedSize(NamedSize.Large, label);

Label label;

...

double fontSize = Device.GetNamedSize(NamedSize.Large, label);

※ Obsolete

[C#/MAUI/.NET6] PinchGestureRecognizer 클래스 : PinchUpdated 업데이트를 사용해 핀치 처리하기 (기능 개선)

■ PinchGestureRecognizer 클래스의 PinchUpdated 업데이트를 사용해 핀치를 처리하는 방법을 보여준다. (기능 개선) ▶ DoubleExtension.cs


namespace TestProject;

/// <summary>
/// 배정도 실수 확장
/// </summary>
public static class DoubleExtension
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region 고정하기 - Clamp(sourceValue, minimumValue, maxiumValue)

    /// <summary>
    /// 고정하기
    /// </summary>
    /// <param name="sourceValue">소스 값</param>
    /// <param name="minimumValue">최소 값</param>
    /// <param name="maxiumValue">최대 값</param>
    /// <returns>고정 값</returns>
    public static double Clamp(this double sourceValue, double minimumValue, double maxiumValue)
    {
        return Math.Min (maxiumValue, Math.Max (sourceValue, minimumValue));
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 배정도 실수 확장

/// </summary>

public static class DoubleExtension

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Static

//////////////////////////////////////////////////////////////////////////////// Public

#region 고정하기 - Clamp(sourceValue, minimumValue, maxiumValue)

/// <summary>

/// 고정하기

/// </summary>

/// <param name="sourceValue">소스 값</param>

/// <param name="minimumValue">최소 값</param>

/// <param name="maxiumValue">최대 값</param>

/// <returns>고정 값</returns>

public static double Clamp(this double sourceValue, double minimumValue, double maxiumValue)

{

return Math.Min (maxiumValue, Math.Max (sourceValue, minimumValue));

}

#endregion

}

▶ PinchContentView.cs


namespace TestProject;

/// <summary>
/// 핀치 컨텐트 뷰
/// </summary>
public class PinchContentView : Frame
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Field
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region Field

    /// <summary>
    /// 현재 스케일
    /// </summary>
    private double currentScale = 1;

    /// <summary>
    /// 시작 스케일
    /// </summary>
    private double startScale = 1;

    /// <summary>
    /// 오프셋 X
    /// </summary>
    private double officeX = 0;

    /// <summary>
    /// 오프셋 Y
    /// </summary>
    private double officeY = 0;

    #endregion

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

    #region 생성자 - PinchContentView()

    /// <summary>
    /// 생성자
    /// </summary>
    public PinchContentView()
    {
        Padding           = new Thickness(0);
        IsClippedToBounds = true;

        PinchGestureRecognizer recognizer = new PinchGestureRecognizer();

        recognizer.PinchUpdated += recognizer_PinchUpdated;

        GestureRecognizers.Add(recognizer);
    }

    #endregion

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

    #region 인식기 핀치 업데이트시 처리하기 - recognizer_PinchUpdated(sender, e)

    /// <summary>
    /// 인식기 핀치 업데이트시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void recognizer_PinchUpdated(object sender, PinchGestureUpdatedEventArgs e)
    {
        if(e.Status == GestureStatus.Started)
        {
            this.startScale = Content.Scale;

            Content.AnchorX = 0;
            Content.AnchorY = 0;
        }
        else if(e.Status == GestureStatus.Running)
        {
            this.currentScale += (e.Scale - 1) * this.startScale;

            this.currentScale = Math.Max(1, this.currentScale);

            double renderedX  = Content.X + this.officeX;
            double deltaX     = renderedX / Width;
            double deltaWidth = Width / (Content.Width * this.startScale);
            double originX    = (e.ScaleOrigin.X - deltaX) * deltaWidth;

            double renderedY   = Content.Y + this.officeY;
            double deltaY      = renderedY / Height;
            double deltaHeight = Height / (Content.Height * this.startScale);
            double originY     = (e.ScaleOrigin.Y - deltaY) * deltaHeight;

            double targetX = this.officeX - (originX * Content.Width ) * (this.currentScale - this.startScale);
            double targetY = this.officeY - (originY * Content.Height) * (this.currentScale - this.startScale);

            Content.TranslationX = targetX.Clamp(-Content.Width  * (this.currentScale - 1), 0);
            Content.TranslationY = targetY.Clamp(-Content.Height * (this.currentScale - 1), 0);

            Content.Scale = this.currentScale;
        }
        else if(e.Status == GestureStatus.Completed)
        {
            this.officeX = Content.TranslationX;
            this.officeY = Content.TranslationY;
        }
    }

    #endregion
}

100

101

102

103

104

105

106

107

108

109

110

namespace TestProject;

/// <summary>

/// 핀치 컨텐트 뷰

/// </summary>

public class PinchContentView : Frame

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 현재 스케일

/// </summary>

private double currentScale = 1;

/// <summary>

/// 시작 스케일

/// </summary>

private double startScale = 1;

/// <summary>

/// 오프셋 X

/// </summary>

private double officeX = 0;

/// <summary>

/// 오프셋 Y

/// </summary>

private double officeY = 0;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - PinchContentView()

/// <summary>

/// 생성자

/// </summary>

public PinchContentView()

{

Padding = new Thickness(0);

IsClippedToBounds = true;

PinchGestureRecognizer recognizer = new PinchGestureRecognizer();

recognizer.PinchUpdated += recognizer_PinchUpdated;

GestureRecognizers.Add(recognizer);

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 인식기 핀치 업데이트시 처리하기 - recognizer_PinchUpdated(sender, e)

/// <summary>

/// 인식기 핀치 업데이트시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void recognizer_PinchUpdated(object sender, PinchGestureUpdatedEventArgs e)

{

if(e.Status == GestureStatus.Started)

{

this.startScale = Content.Scale;

Content.AnchorX = 0;

Content.AnchorY = 0;

}

else if(e.Status == GestureStatus.Running)

{

this.currentScale += (e.Scale - 1) * this.startScale;

this.currentScale = Math.Max(1, this.currentScale);

double renderedX = Content.X + this.officeX;

double deltaX = renderedX / Width;

double deltaWidth = Width / (Content.Width * this.startScale);

double originX = (e.ScaleOrigin.X - deltaX) * deltaWidth;

double renderedY = Content.Y + this.officeY;

double deltaY = renderedY / Height;

double deltaHeight = Height / (Content.Height * this.startScale);

double originY = (e.ScaleOrigin.Y - deltaY) * deltaHeight;

double targetX = this.officeX - (originX * Content.Width ) * (this.currentScale - this.startScale);

double targetY = this.officeY - (originY * Content.Height) * (this.currentScale - this.startScale);

Content.TranslationX = targetX.Clamp(-Content.Width * (this.currentScale - 1), 0);

Content.TranslationY = targetY.Clamp(-Content.Height * (this.currentScale - 1), 0);

Content.Scale = this.currentScale;

}

else if(e.Status == GestureStatus.Completed)

{

this.officeX = Content.TranslationX;

this.officeY = Content.TranslationY;

}

#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">
    <local:PinchContentView
        HorizontalOptions="Center"
        VerticalOptions="Center"
        WidthRequest="300"
        HeightRequest="300">
        <Image Source="source.png"
            WidthRequest="300"
            HeightRequest="300"
            Aspect="Fill" />
    </local:PinchContentView>
</ContentPage>

<?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">

<local:PinchContentView

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="300"

HeightRequest="300">

<Image Source="source.png"

WidthRequest="300"

HeightRequest="300"

Aspect="Fill" />

</local:PinchContentView>

</ContentPage>

TestProject.zip