MAUI Archives - 38 중 3 번째 페이지

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ColorConversionExtensions 클래스 : GetByteRed 확장 메소드를 사용해 청색 값 구하기

■ ColorConversionExtensions 클래스의 GetByteRed 확장 메소드를 사용해 청색 값을 구하는 방법을 보여준다. ▶ 예제 코드 (C#)


using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Blue;

byte blue = sourceColor.GetByteBlue();

using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Blue;

byte blue = sourceColor.GetByteBlue();

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ColorConversionExtensions 클래스 : GetByteRed 확장 메소드를 사용해 적색 값 구하기

■ ColorConversionExtensions 클래스의 GetByteRed 확장 메소드를 사용해 적색 값을 구하는 방법을 보여준다. ▶ 예제 코드 (C#)


using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Red;

byte red = sourceColor.GetByteRed();

using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Red;

byte red = sourceColor.GetByteRed();

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ColorConversionExtensions 클래스 : IsDarkForTheEye 확장 메소드를 사용해 사람의 눈을 기준으로 어두운 색상 여부 구하기

■ ColorConversionExtensions 클래스의 IsDarkForTheEye 확장 메소드를 사용해 사람의 눈을 기준으로 어두운 색상 여부를 구하는 방법을 보여준다. ▶ 예제 코드 (C#)


using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Red;

bool isDark = sourceColor.IsDarkForTheEye();

using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Red;

bool isDark = sourceColor.IsDarkForTheEye();

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ColorConversionExtensions 클래스 : IsDark 확장 메소드를 사용해 어두운 색상 여부 구하기

■ ColorConversionExtensions 클래스의 IsDark 확장 메소드를 사용해 어두운 색상 여부를 구하는 방법을 보여준다. ▶ 예제 코드 (C#)


using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Red;

bool isDark = sourceColor.IsDark();

using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Red;

bool isDark = sourceColor.IsDark();

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ColorConversionExtensions 클래스 : ToInverseColor 확장 메소드를 사용해 반전 색상 구하기

■ ColorConversionExtensions 클래스의 ToInverseColor 확장 메소드를 사용해 반전 색상을 구하는 방법을 보여준다. ▶ 예제 코드 (C#)


using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Red;

Color targetColor = sourceColor.ToInverseColor();

using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Red;

Color targetColor = sourceColor.ToInverseColor();

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ColorConversionExtensions 클래스 : ToBlackOrWhiteForText 확장 메소드를 사용해 지정 배경색에 적합한 검정색 또는 흰색 텍스트 색상 구하기

■ ColorConversionExtensions 클래스의 ToBlackOrWhiteForText 확장 메소드를 사용해 지정 배경색에 적합한 검정색 또는 흰색 텍스트 색상을 구하는 방법을 보여준다. ▶ 예제 코드 (C#)

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ColorConversionExtensions 클래스 : ToGrayScale 확장 메소드를 사용해 회색조 색상 구하기

■ ColorConversionExtensions 클래스의 ToGrayScale 확장 메소드를 사용해 회색조 색상을 구하는 방법을 보여준다. ▶ 예제 코드 (C#)


using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Red;

Color targetColor = sourceColor.ToGrayScale();

using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Red;

Color targetColor = sourceColor.ToGrayScale();

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ColorConversionExtensions 클래스 : ToBlackOrWhite 확장 메소드를 사용해 검정색 또는 흰색 구하기

■ ColorConversionExtensions 클래스의 ToBlackOrWhite 확장 메소드를 사용해 검정색 또는 흰색을 구하는 방법을 보여준다. ▶ 예제 코드 (C#)


using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Red;

Color targetColor = sourceColor.ToBlackOrWhite();

using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Red;

Color targetColor = sourceColor.ToBlackOrWhite();

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ColorAnimationExtensions 클래스 : TextColorTo 확장 메소드를 사용해 텍스트 색상 애니메이션 만들기

■ ColorAnimationExtensions 클래스의 TextColorTo 확장 메소드를 사용해 텍스트 색상 애니메이션을 만드는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage" x:Name="mainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <VerticalStackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <Label x:Name="label"
            HorizontalOptions="Center"
            FontSize="48"
            FontAttributes="Bold"
            TextColor="Blue"
            Text="MAUI" />
        <Button x:Name="testButton"
            HorizontalOptions="Center"
            Text="테스트" />
    </VerticalStackLayout>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage" x:Name="mainPage"

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

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

<VerticalStackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<Label x:Name="label"

HorizontalOptions="Center"

FontSize="48"

FontAttributes="Bold"

TextColor="Blue"

Text="MAUI" />

<Button x:Name="testButton"

HorizontalOptions="Center"

Text="테스트" />

</VerticalStackLayout>

</ContentPage>

▶ MainPage.xaml.cs


namespace TestProject;

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

    #region Field

    /// <summary>
    /// 현재 색상
    /// </summary>
    private Color currentColor = Colors.Blue;

    #endregion

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

    #region 생성자 - MainPage()

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

        this.testButton.Clicked += testButton_Clicked;
    }

    #endregion

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

    #region 테스트 버튼 클릭시 처리하기 - testButton_Clicked(sender, e)

    /// <summary>
    /// 테스트 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void testButton_Clicked(object sender, EventArgs e)
    {
        if(this.currentColor == Colors.Blue)
        {
            this.currentColor = Colors.Red;
        }
        else
        {
            this.currentColor = Colors.Blue;
        }

        await this.label.TextColorTo(this.currentColor);
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

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

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

#region Field

/// <summary>

/// 현재 색상

/// </summary>

private Color currentColor = Colors.Blue;

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.testButton.Clicked += testButton_Clicked;

}

#endregion

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

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

#region 테스트 버튼 클릭시 처리하기 - testButton_Clicked(sender, e)

/// <summary>

/// 테스트 버튼 클릭시 처리하기

/// </summary>

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

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

private async void testButton_Clicked(object sender, EventArgs e)

{

if(this.currentColor == Colors.Blue)

{

this.currentColor = Colors.Red;

}

else

{

this.currentColor = Colors.Blue;

}

await this.label.TextColorTo(this.currentColor);

}

#endregion

}

▶ MauiProgram.cs


using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>
/// MAUI 프로그램
/// </summary>
public static class MauiProgram
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region MAUI 앱 생성하기 - CreateMauiApp()

    /// <summary>
    /// MAUI 앱 생성하기
    /// </summary>
    /// <returns>MAUI 앱</returns>
    public static MauiApp CreateMauiApp()
    {
        MauiAppBuilder builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .ConfigureFonts
            (
                fontCollection =>
                {
                    fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );
                    fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                }
            );

        return builder.Build();
    }

    #endregion
}

using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>

/// MAUI 프로그램

/// </summary>

public static class MauiProgram

{

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

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

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

#region MAUI 앱 생성하기 - CreateMauiApp()

/// <summary>

/// MAUI 앱 생성하기

/// </summary>

/// <returns>MAUI 앱</returns>

public static MauiApp CreateMauiApp()

{

MauiAppBuilder builder = MauiApp.CreateBuilder();

builder

.UseMauiApp<App>()

.UseMauiCommunityToolkit()

.ConfigureFonts

(

fontCollection =>

{

fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );

fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");

}

);

return builder.Build();

}

#endregion

}

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ColorAnimationExtensions 클래스 : BackgroundColorTo 확장 메소드를 사용해 배경색 애니메이션 만들기

■ ColorAnimationExtensions 클래스의 BackgroundColorTo 확장 메소드를 사용해 배경색 애니메이션을 만드는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage" x:Name="mainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <VerticalStackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <BoxView x:Name="boxView"
            HorizontalOptions="Center"
            WidthRequest="200"
            HeightRequest="200"
            BackgroundColor="Blue" />
        <Button x:Name="testButton"
            HorizontalOptions="Center"
            Text="테스트" />
    </VerticalStackLayout>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage" x:Name="mainPage"

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

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

<VerticalStackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<BoxView x:Name="boxView"

HorizontalOptions="Center"

WidthRequest="200"

HeightRequest="200"

BackgroundColor="Blue" />

<Button x:Name="testButton"

HorizontalOptions="Center"

Text="테스트" />

</VerticalStackLayout>

</ContentPage>

▶ MainPage.xaml.cs


using CommunityToolkit.Maui.Extensions;

namespace TestProject;

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

    #region Field

    /// <summary>
    /// 현재 색상
    /// </summary>
    private Color currentColor = Colors.Blue;

    #endregion

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

    #region 생성자 - MainPage()

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

        this.testButton.Clicked += testButton_Clicked;
    }

    #endregion

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

    #region 테스트 버튼 클릭시 처리하기 - testButton_Clicked(sender, e)

    /// <summary>
    /// 테스트 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void testButton_Clicked(object sender, EventArgs e)
    {
        if(this.currentColor == Colors.Blue)
        {
            this.currentColor = Colors.Red;
        }
        else
        {
            this.currentColor = Colors.Blue;
        }

        await this.boxView.BackgroundColorTo(this.currentColor);
    }

    #endregion
}

using CommunityToolkit.Maui.Extensions;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

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

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

#region Field

/// <summary>

/// 현재 색상

/// </summary>

private Color currentColor = Colors.Blue;

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.testButton.Clicked += testButton_Clicked;

}

#endregion

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

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

#region 테스트 버튼 클릭시 처리하기 - testButton_Clicked(sender, e)

/// <summary>

/// 테스트 버튼 클릭시 처리하기

/// </summary>

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

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

private async void testButton_Clicked(object sender, EventArgs e)

{

if(this.currentColor == Colors.Blue)

{

this.currentColor = Colors.Red;

}

else

{

this.currentColor = Colors.Blue;

}

await this.boxView.BackgroundColorTo(this.currentColor);

}

#endregion

}

▶ MauiProgram.cs


using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>
/// MAUI 프로그램
/// </summary>
public static class MauiProgram
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region MAUI 앱 생성하기 - CreateMauiApp()

    /// <summary>
    /// MAUI 앱 생성하기
    /// </summary>
    /// <returns>MAUI 앱</returns>
    public static MauiApp CreateMauiApp()
    {
        MauiAppBuilder builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .ConfigureFonts
            (
                fontCollection =>
                {
                    fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );
                    fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                }
            );

        return builder.Build();
    }

    #endregion
}

using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>

/// MAUI 프로그램

/// </summary>

public static class MauiProgram

{

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

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

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

#region MAUI 앱 생성하기 - CreateMauiApp()

/// <summary>

/// MAUI 앱 생성하기

/// </summary>

/// <returns>MAUI 앱</returns>

public static MauiApp CreateMauiApp()

{

MauiAppBuilder builder = MauiApp.CreateBuilder();

builder

.UseMauiApp<App>()

.UseMauiCommunityToolkit()

.ConfigureFonts

(

fontCollection =>

{

fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );

fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");

}

);

return builder.Build();

}

#endregion

}

TestProject.zip

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] CommunityToolkit MVVM 패턴에서 명령에 인자 전달하기

■ CommunityToolkit MVVM 패턴에서 명령에 인자를 전달하는 방법을 보여준다. ▶ MainPageViewModel.cs


using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지 뷰 모델
    /// </summary>
    [INotifyPropertyChanged]
    public partial class MainPageViewModel
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 입력 텍스트
        /// </summary>
        [ObservableProperty]
        private string inputText = null;

        #endregion

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

        #region 생성자 - MainPageViewModel()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainPageViewModel()
        {
        }

        #endregion

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

        #region 초기화하기 - Reset()

        /// <summary>
        /// 초기화하기
        /// </summary>
        [RelayCommand]
        private void Reset()
        {
            InputText = string.Empty;
        }

        #endregion
        #region 시간 표시하기 - ShowTime(format)

        /// <summary>
        /// 시간 표시하기
        /// </summary>
        /// <param name="format">포맷 문자열</param>
        [RelayCommand]
        private void ShowTime(string format)
        {
            InputText = DateTime.Now.ToString(format);
        }

        #endregion
    }
}

using CommunityToolkit.Mvvm.ComponentModel;

using CommunityToolkit.Mvvm.Input;

namespace TestProject

{

/// <summary>

/// 메인 페이지 뷰 모델

/// </summary>

[INotifyPropertyChanged]

public partial class MainPageViewModel

{

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

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

#region Field

/// <summary>

/// 입력 텍스트

/// </summary>

[ObservableProperty]

private string inputText = null;

#endregion

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

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

#region 생성자 - MainPageViewModel()

/// <summary>

/// 생성자

/// </summary>

public MainPageViewModel()

{

}

#endregion

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

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

#region 초기화하기 - Reset()

/// <summary>

/// 초기화하기

/// </summary>

[RelayCommand]

private void Reset()

{

InputText = string.Empty;

}

#endregion

#region 시간 표시하기 - ShowTime(format)

/// <summary>

/// 시간 표시하기

/// </summary>

/// <param name="format">포맷 문자열</param>

[RelayCommand]

private void ShowTime(string format)

{

InputText = DateTime.Now.ToString(format);

}

#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>
    <VerticalStackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <Entry
            HorizontalOptions="Center"
            Placeholder="텍스트를 입력해 주시기 바랍니다."
            FontSize="16"
            Text="{Binding InputText}" />
        <Button
            HorizontalOptions="Center"
            Text="초기화"
            Command="{Binding ResetCommand}" />
        <Button
            HorizontalOptions="Center"
            Text="시간 표시"
            CommandParameter="HH:mm:ss"
            Command="{Binding ShowTimeCommand}" />
    </VerticalStackLayout>
</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>

<VerticalStackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<Entry

HorizontalOptions="Center"

Placeholder="텍스트를 입력해 주시기 바랍니다."

FontSize="16"

Text="{Binding InputText}" />

<Button

HorizontalOptions="Center"

Text="초기화"

Command="{Binding ResetCommand}" />

<Button

HorizontalOptions="Center"

Text="시간 표시"

CommandParameter="HH:mm:ss"

Command="{Binding ShowTimeCommand}" />

</VerticalStackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] CommunityToolkit MVVM 패턴에서 속성 변경시 처리하기

■ CommunityToolkit MVVM 패턴에서 속성 변경시 처리하는 방법을 보여준다. ▶ MainPageViewModel.cs


using CommunityToolkit.Maui.Alerts;
using CommunityToolkit.Maui.Core;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지 뷰 모델
    /// </summary>
    [INotifyPropertyChanged]
    public partial class MainPageViewModel
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 입력 텍스트
        /// </summary>
        [ObservableProperty]
        private string inputText = null;

        #endregion

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

        #region 생성자 - MainPageViewModel()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainPageViewModel()
        {
        }

        #endregion

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

        #region 입력 텍스트 변경 전 처리하기 - OnInputTextChanging(value)

        /// <summary>
        /// 입력 텍스트 변경 전 처리하기
        /// </summary>
        /// <param name="value">값</param>
        /* async */ partial void OnInputTextChanging(string value)
        {
            //IToast toast = Toast.Make($"[{DateTime.Now:HH:mm:ss}] 입력 테스트 변경 전 처리합니다.", ToastDuration.Short, 14);
            //
            //await toast.Show();
        }

        #endregion
        #region 입력 텍스트 변경 후 처리하기 - OnInputTextChanged(value)

        /// <summary>
        /// 입력 텍스트 변경 후 처리하기
        /// </summary>
        /// <param name="value">값</param>
        async partial void OnInputTextChanged(string value)
        {
            IToast toast = Toast.Make($"[{DateTime.Now:HH:mm:ss}] 입력 테스트 변경 후 처리합니다.", ToastDuration.Short, 14);

            await toast.Show();
        }

        #endregion

        #region 초기화하기 - Reset()

        /// <summary>
        /// 초기화하기
        /// </summary>
        [RelayCommand]
        private void Reset()
        {
            InputText = string.Empty;
        }

        #endregion
    }
}

using CommunityToolkit.Maui.Alerts;

using CommunityToolkit.Maui.Core;

using CommunityToolkit.Mvvm.ComponentModel;

using CommunityToolkit.Mvvm.Input;

namespace TestProject

{

/// <summary>

/// 메인 페이지 뷰 모델

/// </summary>

[INotifyPropertyChanged]

public partial class MainPageViewModel

{

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

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

#region Field

/// <summary>

/// 입력 텍스트

/// </summary>

[ObservableProperty]

private string inputText = null;

#endregion

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

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

#region 생성자 - MainPageViewModel()

/// <summary>

/// 생성자

/// </summary>

public MainPageViewModel()

{

}

#endregion

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

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

#region 입력 텍스트 변경 전 처리하기 - OnInputTextChanging(value)

/// <summary>

/// 입력 텍스트 변경 전 처리하기

/// </summary>

/// <param name="value">값</param>

/* async */ partial void OnInputTextChanging(string value)

{

//IToast toast = Toast.Make($"[{DateTime.Now:HH:mm:ss}] 입력 테스트 변경 전 처리합니다.", ToastDuration.Short, 14);

//await toast.Show();

}

#endregion

#region 입력 텍스트 변경 후 처리하기 - OnInputTextChanged(value)

/// <summary>

/// 입력 텍스트 변경 후 처리하기

/// </summary>

/// <param name="value">값</param>

async partial void OnInputTextChanged(string value)

{

IToast toast = Toast.Make($"[{DateTime.Now:HH:mm:ss}] 입력 테스트 변경 후 처리합니다.", ToastDuration.Short, 14);

await toast.Show();

}

#endregion

#region 초기화하기 - Reset()

/// <summary>

/// 초기화하기

/// </summary>

[RelayCommand]

private void Reset()

{

InputText = string.Empty;

}

#endregion

}

TestProject.zip

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] CommunityToolkit MVVM 패턴 사용하기

■ CommunityToolkit MVVM 패턴을 사용하는 방법을 보여준다. ▶ TestProject.csproj


<Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
        <TargetFrameworks>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>
        <TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>
        <OutputType>Exe</OutputType>
        <RootNamespace>TestProject</RootNamespace>
        <UseMaui>true</UseMaui>
        <SingleProject>true</SingleProject>
        <ImplicitUsings>enable</ImplicitUsings>
        <ApplicationTitle>TestProject</ApplicationTitle>
        <ApplicationId>com.companyname.testproject</ApplicationId>
        <ApplicationIdGuid>307F785A-6EDE-4AEB-8813-DC0FFA886398</ApplicationIdGuid>
        <ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
        <ApplicationVersion>1</ApplicationVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">14.2</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">14.0</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">21.0</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>
        <TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'tizen'">6.5</SupportedOSPlatformVersion>
        <EmbedAssembliesIntoApk>true</EmbedAssembliesIntoApk>
    </PropertyGroup>
    <ItemGroup>
        <MauiIcon Include="Resources\appicon.svg" ForegroundFile="Resources\appiconfg.svg" Color="#512bd4" />
        <MauiSplashScreen Include="Resources\appiconfg.svg" Color="#512bd4" BaseSize="128,128" />
        <MauiImage Include="Resources\Images\*" />
        <MauiImage Update="Resources\Images\dotnet_bot.svg" BaseSize="168,208" />
        <MauiFont Include="Resources\Fonts\*" />
        <MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
    </ItemGroup>
    <ItemGroup>
        <PackageReference Include="CommunityToolkit.Mvvm" Version="8.0.0-preview4" />
    </ItemGroup>
</Project>

<TargetFrameworks>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>

<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>

<RootNamespace>TestProject</RootNamespace>

<ImplicitUsings>enable</ImplicitUsings>

<ApplicationTitle>TestProject</ApplicationTitle>

<ApplicationId>com.companyname.testproject</ApplicationId>

</PropertyGroup>

</ItemGroup>

</ItemGroup>

</Project>

※ "NuGet 패키지 관리" 메뉴의 "찾아보기" 탭에서 "시험판 포함" 체크 박스를 체크하고

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] CommunityToolkit.Mvvm 누겟 설치하기

■ CommunityToolkit.Mvvm 누겟을 설치하는 방법을 보여준다. 1. Visual Studio를 실행한다. 2. [도구] / [NuGet 패키지 관리자] / [패키지 관리자 콘솔] 메뉴를 실행한다.

[C#/MAUI/.NET6] SkiaSharp.Extended.UI.Maui 누겟 설치하기

■ SkiaSharp.Extended.UI.Maui 누겟을 설치하는 방법을 보여준다. 1. Visual Studio를 실행한다. 2. [도구] / [NuGet 패키지 관리자] / [패키지 관리자 콘솔] 메뉴를 실행한다.

[C#/MAUI/.NET6] SKLottieView 엘리먼트 : 로띠 애니메이션 사용하기

■ SKLottieView 엘리먼트에서 로띠 애니메이션을 사용하는 방법을 보여준다. ▶ TestProject.csproj


<Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
        <TargetFrameworks>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>
        <TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>
        <OutputType>Exe</OutputType>
        <RootNamespace>TestProject</RootNamespace>
        <UseMaui>true</UseMaui>
        <SingleProject>true</SingleProject>
        <ImplicitUsings>enable</ImplicitUsings>
        <ApplicationTitle>TestProject</ApplicationTitle>
        <ApplicationId>com.companyname.testproject</ApplicationId>
        <ApplicationIdGuid>307F785A-6EDE-4AEB-8813-DC0FFA886398</ApplicationIdGuid>
        <ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
        <ApplicationVersion>1</ApplicationVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">14.2</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">14.0</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">21.0</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>
        <TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'tizen'">6.5</SupportedOSPlatformVersion>
        <EmbedAssembliesIntoApk>true</EmbedAssembliesIntoApk>
    </PropertyGroup>
    <ItemGroup>
        <MauiIcon Include="Resources\appicon.svg" ForegroundFile="Resources\appiconfg.svg" Color="#512bd4" />
        <MauiSplashScreen Include="Resources\appiconfg.svg" Color="#512bd4" BaseSize="128,128" />
        <MauiImage Include="Resources\Images\*" />
        <MauiImage Update="Resources\Images\dotnet_bot.svg" BaseSize="168,208" />
        <MauiFont Include="Resources\Fonts\*" />
        <MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
    </ItemGroup>
    <ItemGroup>
        <PackageReference Include="SkiaSharp.Extended.UI.Maui" Version="2.0.0-preview.59" />
    </ItemGroup>
</Project>

<TargetFrameworks>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>

<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>

<RootNamespace>TestProject</RootNamespace>

<ImplicitUsings>enable</ImplicitUsings>

<ApplicationTitle>TestProject</ApplicationTitle>

<ApplicationId>com.companyname.testproject</ApplicationId>

</PropertyGroup>

</ItemGroup>

</ItemGroup>

</Project>

※ "NuGet 패키지 관리" 메뉴의 "찾아보기" 탭에서 "시험판 포함" 체크 박스를

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] VariableMultiValueConverter 클래스 : 복수 진리 값 → 단일 진리 값 변환자 사용하기

■ VariableMultiValueConverter 클래스에서 복수 진리 값 → 단일 진리 값 변환자를 사용하는 방법을 보여준다. ▶ 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">
    <Label x:Name="label"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        FontSize="24" />
</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">

<Label x:Name="label"

HorizontalOptions="Center"

VerticalOptions="Center"

FontSize="24" />

</ContentPage>

▶ MainPage.xaml.cs


using CommunityToolkit.Maui.Converters;

namespace TestProject;

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

    #region 선택 값 1 - SelectedValue1

    /// <summary>
    /// 선택 값 1
    /// </summary>
    public int SelectedValue1 { get; set; }

    #endregion
    #region 선택 값 2 - SelectedValue2

    /// <summary>
    /// 선택 값 2
    /// </summary>
    public int SelectedValue2 { get; set; }

    #endregion
    #region 선택 값 3 - SelectedValue3

    /// <summary>
    /// 선택 값 3
    /// </summary>
    public int SelectedValue3 { get; set; }

    #endregion

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

    #region 생성자 - MainPage()

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

        SelectedValue1 = 10;
        SelectedValue2 = 0;
        SelectedValue3 = 1;

        VariableMultiValueConverter converter = new VariableMultiValueConverter();

        converter.ConditionType = MultiBindingCondition.LessThan;
        converter.Count         = 2;

        List<BindingBase> bindingBaseList = new List<BindingBase>();

        bindingBaseList.Add(new Binding(nameof(SelectedValue1)));
        bindingBaseList.Add(new Binding(nameof(SelectedValue2)));
        bindingBaseList.Add(new Binding(nameof(SelectedValue3)));

        MultiBinding binding = new MultiBinding();

        binding.Converter = converter;
        binding.Bindings  = bindingBaseList;

        this.label.SetBinding(Label.TextProperty, binding);

        BindingContext = this;
    }

    #endregion
}

using CommunityToolkit.Maui.Converters;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

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

#region 선택 값 1 - SelectedValue1

/// <summary>

/// 선택 값 1

/// </summary>

public int SelectedValue1 { get; set; }

#endregion

#region 선택 값 2 - SelectedValue2

/// <summary>

/// 선택 값 2

/// </summary>

public int SelectedValue2 { get; set; }

#endregion

#region 선택 값 3 - SelectedValue3

/// <summary>

/// 선택 값 3

/// </summary>

public int SelectedValue3 { get; set; }

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

SelectedValue1 = 10;

SelectedValue2 = 0;

SelectedValue3 = 1;

VariableMultiValueConverter converter = new VariableMultiValueConverter();

converter.ConditionType = MultiBindingCondition.LessThan;

converter.Count = 2;

List<BindingBase> bindingBaseList = new List<BindingBase>();

bindingBaseList.Add(new Binding(nameof(SelectedValue1)));

bindingBaseList.Add(new Binding(nameof(SelectedValue2)));

bindingBaseList.Add(new Binding(nameof(SelectedValue3)));

MultiBinding binding = new MultiBinding();

binding.Converter = converter;

binding.Bindings = bindingBaseList;

this.label.SetBinding(Label.TextProperty, binding);

BindingContext = this;

}

#endregion

}

▶ MauiProgram.cs

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] VariableMultiValueConverter 엘리먼트 : 복수 진리 값 → 단일 진리 값 변환자 사용하기

■ VariableMultiValueConverter 엘리먼트에서 복수 진리 값 → 단일 진리 값 변환자를 사용하는 방법을 보여준다. ▶ 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:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <ContentPage.Resources>
        <toolkit:VariableMultiValueConverter x:Key="VariableMultiValueConverterKey"
            ConditionType="LessThan"
            Count="2" />
    </ContentPage.Resources>
    <Label
        HorizontalOptions="Center"
        VerticalOptions="Center"
        FontSize="24">
        <Label.Text>
            <MultiBinding Converter="{StaticResource VariableMultiValueConverterKey}">
                <Binding Path="SelectedValue1" />
                <Binding Path="SelectedValue2" />
                <Binding Path="SelectedValue3" />
            </MultiBinding>
        </Label.Text>
    </Label>
</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:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

<ContentPage.Resources>

<toolkit:VariableMultiValueConverter x:Key="VariableMultiValueConverterKey"

ConditionType="LessThan"

Count="2" />

</ContentPage.Resources>

<Label

HorizontalOptions="Center"

VerticalOptions="Center"

FontSize="24">

<Label.Text>

</MultiBinding>

</Label.Text>

</Label>

</ContentPage>

▶ MainPage.xaml.cs


namespace TestProject;

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

    #region 선택 값 1 - SelectedValue1

    /// <summary>
    /// 선택 값 1
    /// </summary>
    public int SelectedValue1 { get; set; }

    #endregion
    #region 선택 값 2 - SelectedValue2

    /// <summary>
    /// 선택 값 2
    /// </summary>
    public int SelectedValue2 { get; set; }

    #endregion
    #region 선택 값 3 - SelectedValue3

    /// <summary>
    /// 선택 값 3
    /// </summary>
    public int SelectedValue3 { get; set; }

    #endregion

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

    #region 생성자 - MainPage()

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

        SelectedValue1 = 10;
        SelectedValue2 = 0;
        SelectedValue3 = 1;

        BindingContext = this;
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

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

#region 선택 값 1 - SelectedValue1

/// <summary>

/// 선택 값 1

/// </summary>

public int SelectedValue1 { get; set; }

#endregion

#region 선택 값 2 - SelectedValue2

/// <summary>

/// 선택 값 2

/// </summary>

public int SelectedValue2 { get; set; }

#endregion

#region 선택 값 3 - SelectedValue3

/// <summary>

/// 선택 값 3

/// </summary>

public int SelectedValue3 { get; set; }

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

SelectedValue1 = 10;

SelectedValue2 = 0;

SelectedValue3 = 1;

BindingContext = this;

}

#endregion

}

▶ MauiProgram.cs

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] TextCaseConverter 클래스 : 텍스트 대소문자 변환자 사용하기

■ TextCaseConverter 클래스에서 텍스트 대소문자 변환자 사용하는 방법을 보여준다. ▶ 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">
    <Label x:Name="label"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        FontSize="24" />
</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">

<Label x:Name="label"

HorizontalOptions="Center"

VerticalOptions="Center"

FontSize="24" />

</ContentPage>

▶ MainPage.xaml.cs


using CommunityToolkit.Maui.Converters;

namespace TestProject;

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

    #region 선택 값 - SelectedValue

    /// <summary>
    /// 선택 값
    /// </summary>
    public string SelectedValue { get; set; }

    #endregion

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

    #region 생성자 - MainPage()

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

        SelectedValue = "hello, world!";

        TextCaseConverter converter = new TextCaseConverter();

        converter.Type = TextCaseType.Upper;

        this.label.SetBinding
        (
            Label.TextProperty,
            new Binding("SelectedValue", converter : converter)
        );

        BindingContext = this;
    }

    #endregion
}

using CommunityToolkit.Maui.Converters;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

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

#region 선택 값 - SelectedValue

/// <summary>

/// 선택 값

/// </summary>

public string SelectedValue { get; set; }

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

SelectedValue = "hello, world!";

TextCaseConverter converter = new TextCaseConverter();

converter.Type = TextCaseType.Upper;

this.label.SetBinding

(

Label.TextProperty,

new Binding("SelectedValue", converter : converter)

);

BindingContext = this;

}

#endregion

}

▶ MauiProgram.cs


using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>
/// MAUI 프로그램
/// </summary>
public static class MauiProgram
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region MAUI 앱 생성하기 - CreateMauiApp()

    /// <summary>
    /// MAUI 앱 생성하기
    /// </summary>
    /// <returns>MAUI 앱</returns>
    public static MauiApp CreateMauiApp()
    {
        MauiAppBuilder builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .ConfigureFonts
            (
                fontCollection =>
                {
                    fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );
                    fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                }
            );

        return builder.Build();
    }

    #endregion
}

using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>

/// MAUI 프로그램

/// </summary>

public static class MauiProgram

{

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

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

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

#region MAUI 앱 생성하기 - CreateMauiApp()

/// <summary>

/// MAUI 앱 생성하기

/// </summary>

/// <returns>MAUI 앱</returns>

public static MauiApp CreateMauiApp()

{

MauiAppBuilder builder = MauiApp.CreateBuilder();

builder

.UseMauiApp<App>()

.UseMauiCommunityToolkit()

.ConfigureFonts

(

fontCollection =>

{

fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );

fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");

}

);

return builder.Build();

}

#endregion

}

TestProject.zip

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] TextCaseConverter 엘리먼트 : 텍스트 대소문자 변환자 사용하기

■ TextCaseConverter 엘리먼트에서 텍스트 대소문자 변환자를 사용하는 방법을 보여준다. ▶ 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:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <ContentPage.Resources>
        <toolkit:TextCaseConverter x:Key="TextCaseConverterKey"
            Type="Upper" />
    </ContentPage.Resources>
    <Label
        HorizontalOptions="Center"
        VerticalOptions="Center"
        FontSize="24"
        Text="{Binding SelectedValue, Converter={StaticResource TextCaseConverterKey}}" />
</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:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

<ContentPage.Resources>

<toolkit:TextCaseConverter x:Key="TextCaseConverterKey"

Type="Upper" />

</ContentPage.Resources>

<Label

HorizontalOptions="Center"

VerticalOptions="Center"

FontSize="24"

Text="{Binding SelectedValue, Converter={StaticResource TextCaseConverterKey}}" />

</ContentPage>

▶ MainPage.xaml.cs


namespace TestProject;

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

    #region 선택 값 - SelectedValue

    /// <summary>
    /// 선택 값
    /// </summary>
    public string SelectedValue { get; set; }

    #endregion

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

    #region 생성자 - MainPage()

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

        SelectedValue = "hello, world!";

        BindingContext = this;
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

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

#region 선택 값 - SelectedValue

/// <summary>

/// 선택 값

/// </summary>

public string SelectedValue { get; set; }

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

SelectedValue = "hello, world!";

BindingContext = this;

}

#endregion

}

▶ MauiProgram.cs


using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>
/// MAUI 프로그램
/// </summary>
public static class MauiProgram
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region MAUI 앱 생성하기 - CreateMauiApp()

    /// <summary>
    /// MAUI 앱 생성하기
    /// </summary>
    /// <returns>MAUI 앱</returns>
    public static MauiApp CreateMauiApp()
    {
        MauiAppBuilder builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .ConfigureFonts
            (
                fontCollection =>
                {
                    fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );
                    fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                }
            );

        return builder.Build();
    }

    #endregion
}

using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>

/// MAUI 프로그램

/// </summary>

public static class MauiProgram

{

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

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

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

#region MAUI 앱 생성하기 - CreateMauiApp()

/// <summary>

/// MAUI 앱 생성하기

/// </summary>

/// <returns>MAUI 앱</returns>

public static MauiApp CreateMauiApp()

{

MauiAppBuilder builder = MauiApp.CreateBuilder();

builder

.UseMauiApp<App>()

.UseMauiCommunityToolkit()

.ConfigureFonts

(

fontCollection =>

{

fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );

fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");

}

);

return builder.Build();

}

#endregion

}

TestProject.zip

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] StringToListConverter 클래스 : 문자열 → IEnumerable 변환자 사용하기

■ StringToListConverter 클래스에서 문자열 → IEnumerable 변환자를 사용하는 방법을 보여준다. ▶ 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">
    <CollectionView x:Name="collectionView">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Label
                    Margin="10"
                    Text="{Binding}" />
            </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">

<CollectionView.ItemTemplate>

<Label

Margin="10"

Text="{Binding}" />

</DataTemplate>

</CollectionView.ItemTemplate>

</CollectionView>

</ContentPage>

▶ MainPage.xaml.cs


using CommunityToolkit.Maui.Converters;

namespace TestProject;

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

    #region 선택 값 - SelectedValue

    /// <summary>
    /// 선택 값
    /// </summary>
    public string SelectedValue { get; set; }

    #endregion

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

    #region 생성자 - MainPage()

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

        SelectedValue = "광주,대전,대구,목포,부산,서울,수원,울산,포항";

        StringToListConverter converter = new StringToListConverter();

        converter.SplitOptions = StringSplitOptions.RemoveEmptyEntries;
        converter.Separator    = ",";

        this.collectionView.SetBinding
        (
            CollectionView.ItemsSourceProperty,
            new Binding("SelectedValue", converter : converter)
        );

        BindingContext = this;
    }

    #endregion
}

using CommunityToolkit.Maui.Converters;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

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

#region 선택 값 - SelectedValue

/// <summary>

/// 선택 값

/// </summary>

public string SelectedValue { get; set; }

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

SelectedValue = "광주,대전,대구,목포,부산,서울,수원,울산,포항";

StringToListConverter converter = new StringToListConverter();

converter.SplitOptions = StringSplitOptions.RemoveEmptyEntries;

converter.Separator = ",";

this.collectionView.SetBinding

(

CollectionView.ItemsSourceProperty,

new Binding("SelectedValue", converter : converter)

);

BindingContext = this;

}

#endregion

}

▶ MauiProgram.cs


using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>
/// MAUI 프로그램
/// </summary>
public static class MauiProgram
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region MAUI 앱 생성하기 - CreateMauiApp()

    /// <summary>
    /// MAUI 앱 생성하기
    /// </summary>
    /// <returns>MAUI 앱</returns>
    public static MauiApp CreateMauiApp()
    {
        MauiAppBuilder builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .ConfigureFonts
            (
                fontCollection =>
                {
                    fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );
                    fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                }
            );

        return builder.Build();
    }

    #endregion
}

using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>

/// MAUI 프로그램

/// </summary>

public static class MauiProgram

{

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

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

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

#region MAUI 앱 생성하기 - CreateMauiApp()

/// <summary>

/// MAUI 앱 생성하기

/// </summary>

/// <returns>MAUI 앱</returns>

public static MauiApp CreateMauiApp()

{

MauiAppBuilder builder = MauiApp.CreateBuilder();

builder

.UseMauiApp<App>()

.UseMauiCommunityToolkit()

.ConfigureFonts

(

fontCollection =>

{

fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );

fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");

}

);

return builder.Build();

}

#endregion

}

TestProject.zip

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] StringToListConverter 엘리먼트 : 문자열 → IEnumerable 변환자 사용하기

■ StringToListConverter 엘리먼트에서 문자열 → IEnumerable 변환자를 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage" x:Name="mainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <ContentPage.Resources>
        <toolkit:StringToListConverter x:Key="StringToListConverterKey"
            SplitOptions="RemoveEmptyEntries"
            Separator="," />
    </ContentPage.Resources>
    <CollectionView ItemsSource="{Binding SelectedValue, Converter={StaticResource StringToListConverterKey}}">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Label
                    Margin="10"
                    Text="{Binding}" />
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage" x:Name="mainPage"

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

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

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

<ContentPage.Resources>

<toolkit:StringToListConverter x:Key="StringToListConverterKey"

SplitOptions="RemoveEmptyEntries"

Separator="," />

</ContentPage.Resources>

<CollectionView.ItemTemplate>

<Label

Margin="10"

Text="{Binding}" />

</DataTemplate>

</CollectionView.ItemTemplate>

</CollectionView>

</ContentPage>

▶ MainPage.xaml.cs


namespace TestProject;

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

    #region 선택 값 - SelectedValue

    /// <summary>
    /// 선택 값
    /// </summary>
    public string SelectedValue { get; set; }

    #endregion

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

    #region 생성자 - MainPage()

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

        SelectedValue = "광주,대전,대구,목포,부산,서울,수원,울산,포항";

        BindingContext = this;
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

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

#region 선택 값 - SelectedValue

/// <summary>

/// 선택 값

/// </summary>

public string SelectedValue { get; set; }

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

SelectedValue = "광주,대전,대구,목포,부산,서울,수원,울산,포항";

BindingContext = this;

}

#endregion

}

▶ MauiProgram.cs


using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>
/// MAUI 프로그램
/// </summary>
public static class MauiProgram
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region MAUI 앱 생성하기 - CreateMauiApp()

    /// <summary>
    /// MAUI 앱 생성하기
    /// </summary>
    /// <returns>MAUI 앱</returns>
    public static MauiApp CreateMauiApp()
    {
        MauiAppBuilder builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .ConfigureFonts
            (
                fontCollection =>
                {
                    fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );
                    fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                }
            );

        return builder.Build();
    }

    #endregion
}

using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>

/// MAUI 프로그램

/// </summary>

public static class MauiProgram

{

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

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

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

#region MAUI 앱 생성하기 - CreateMauiApp()

/// <summary>

/// MAUI 앱 생성하기

/// </summary>

/// <returns>MAUI 앱</returns>

public static MauiApp CreateMauiApp()

{

MauiAppBuilder builder = MauiApp.CreateBuilder();

builder

.UseMauiApp<App>()

.UseMauiCommunityToolkit()

.ConfigureFonts

(

fontCollection =>

{

fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );

fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");

}

);

return builder.Build();

}

#endregion

}

TestProject.zip

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] StateToBooleanConverter 클래스 : LayoutState → 진리 값 변환자 사용하기

■ StateToBooleanConverter 클래스에서 LayoutState → 진리 값 변환자를 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage" x:Name="mainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <VerticalStackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <Label x:Name="label"
            HorizontalOptions="Center" />
        <Button x:Name="changeButton"
            Text="상태 변경하기" />
    </VerticalStackLayout>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage" x:Name="mainPage"

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

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

<VerticalStackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<Label x:Name="label"

HorizontalOptions="Center" />

<Button x:Name="changeButton"

Text="상태 변경하기" />

</VerticalStackLayout>

</ContentPage>

▶ MainPage.xaml.cs


using CommunityToolkit.Maui.Converters;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public partial class MainPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Bindable Property
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region 레이아웃 상태 속성 - LayoutStateProperty

    /// <summary>
    /// 레이아웃 상태 속성
    /// </summary>
    public static readonly BindableProperty LayoutStateProperty = BindableProperty.Create
    (
        "LayoutState",
        typeof(LayoutState),
        typeof(MainPage),
        LayoutState.None
    );

    #endregion

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

    #region 레이아웃 상태 - LayoutState

    /// <summary>
    /// 레이아웃 상태
    /// </summary>
    public LayoutState LayoutState
    {
        get => (LayoutState)GetValue(LayoutStateProperty);
        set => SetValue(LayoutStateProperty, value);
    }

    #endregion

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

    #region 생성자 - MainPage()

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

        StateToBooleanConverter converter = new StateToBooleanConverter();

        converter.StateToCompare = LayoutState.Success;

        this.label.SetBinding
        (
            Label.TextProperty,
            new Binding("LayoutState", source : this, converter : converter)
        );

        this.changeButton.Clicked += changeButton_Clicked;
    }

    #endregion

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

    #region 상태 변경하기 버튼 클릭시 처리하기 - changeButton_Clicked(sender, e)

    /// <summary>
    /// 상태 변경하기 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void changeButton_Clicked(object sender, EventArgs e)
    {
        LayoutState = LayoutState switch
        {
            LayoutState.None => LayoutState.Success,
            _                => LayoutState.None
        };
    }

    #endregion
}

using CommunityToolkit.Maui.Converters;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Bindable Property

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

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

#region 레이아웃 상태 속성 - LayoutStateProperty

/// <summary>

/// 레이아웃 상태 속성

/// </summary>

public static readonly BindableProperty LayoutStateProperty = BindableProperty.Create

(

"LayoutState",

typeof(LayoutState),

typeof(MainPage),

LayoutState.None

);

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

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

#region 레이아웃 상태 - LayoutState

/// <summary>

/// 레이아웃 상태

/// </summary>

public LayoutState LayoutState

{

get => (LayoutState)GetValue(LayoutStateProperty);

set => SetValue(LayoutStateProperty, value);

}

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

StateToBooleanConverter converter = new StateToBooleanConverter();

converter.StateToCompare = LayoutState.Success;

this.label.SetBinding

(

Label.TextProperty,

new Binding("LayoutState", source : this, converter : converter)

);

this.changeButton.Clicked += changeButton_Clicked;

}

#endregion

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

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

#region 상태 변경하기 버튼 클릭시 처리하기 - changeButton_Clicked(sender, e)

/// <summary>

/// 상태 변경하기 버튼 클릭시 처리하기

/// </summary>

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

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

private void changeButton_Clicked(object sender, EventArgs e)

{

LayoutState = LayoutState switch

{

LayoutState.None => LayoutState.Success,

_ => LayoutState.None

};

}

#endregion

}

▶ MauiProgram.cs


using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>
/// MAUI 프로그램
/// </summary>
public static class MauiProgram
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region MAUI 앱 생성하기 - CreateMauiApp()

    /// <summary>
    /// MAUI 앱 생성하기
    /// </summary>
    /// <returns>MAUI 앱</returns>
    public static MauiApp CreateMauiApp()
    {
        MauiAppBuilder builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .ConfigureFonts
            (
                fontCollection =>
                {
                    fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );
                    fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                }
            );

        return builder.Build();
    }

    #endregion
}

using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>

/// MAUI 프로그램

/// </summary>

public static class MauiProgram

{

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

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

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

#region MAUI 앱 생성하기 - CreateMauiApp()

/// <summary>

/// MAUI 앱 생성하기

/// </summary>

/// <returns>MAUI 앱</returns>

public static MauiApp CreateMauiApp()

{

MauiAppBuilder builder = MauiApp.CreateBuilder();

builder

.UseMauiApp<App>()

.UseMauiCommunityToolkit()

.ConfigureFonts

(

fontCollection =>

{

fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );

fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");

}

);

return builder.Build();

}

#endregion

}

TestProject.zip

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] StateToBooleanConverter 엘리먼트 : LayoutState → 진리 값 변환자 사용하기

■ StateToBooleanConverter 엘리먼트에서 LayoutState → 진리 값 변환자를 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage" x:Name="mainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <ContentPage.Resources>
        <toolkit:StateToBooleanConverter x:Key="StateToBooleanConverterKey"
            StateToCompare="Success" />
    </ContentPage.Resources>
    <VerticalStackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <Label
            HorizontalOptions="Center"
            Text="{Binding
                Source={x:Reference mainPage},
                Path=LayoutState,
                Converter={StaticResource StateToBooleanConverterKey}}" />
        <Button x:Name="changeButton"
            Text="상태 변경하기" />
    </VerticalStackLayout>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage" x:Name="mainPage"

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

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

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

<ContentPage.Resources>

<toolkit:StateToBooleanConverter x:Key="StateToBooleanConverterKey"

StateToCompare="Success" />

</ContentPage.Resources>

<VerticalStackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<Label

HorizontalOptions="Center"

Text="{Binding

Source={x:Reference mainPage},

Path=LayoutState,

Converter={StaticResource StateToBooleanConverterKey}}" />

<Button x:Name="changeButton"

Text="상태 변경하기" />

</VerticalStackLayout>

</ContentPage>

▶ MainPage.xaml.cs


using CommunityToolkit.Maui.Converters;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public partial class MainPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Bindable Property
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region 레이아웃 상태 속성 - LayoutStateProperty

    /// <summary>
    /// 레이아웃 상태 속성
    /// </summary>
    public static readonly BindableProperty LayoutStateProperty = BindableProperty.Create
    (
        "LayoutState",
        typeof(LayoutState),
        typeof(MainPage),
        LayoutState.None
    );

    #endregion

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

    #region 레이아웃 상태 - LayoutState

    /// <summary>
    /// 레이아웃 상태
    /// </summary>
    public LayoutState LayoutState
    {
        get => (LayoutState)GetValue(LayoutStateProperty);
        set => SetValue(LayoutStateProperty, value);
    }

    #endregion

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

    #region 생성자 - MainPage()

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

        this.changeButton.Clicked += changeButton_Clicked;
    }

    #endregion

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

    #region 상태 변경하기 버튼 클릭시 처리하기 - changeButton_Clicked(sender, e)

    /// <summary>
    /// 상태 변경하기 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void changeButton_Clicked(object sender, EventArgs e)
    {
        LayoutState = LayoutState switch
        {
            LayoutState.None => LayoutState.Success,
            _                => LayoutState.None
        };
    }

    #endregion
}

using CommunityToolkit.Maui.Converters;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Bindable Property

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

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

#region 레이아웃 상태 속성 - LayoutStateProperty

/// <summary>

/// 레이아웃 상태 속성

/// </summary>

public static readonly BindableProperty LayoutStateProperty = BindableProperty.Create

(

"LayoutState",

typeof(LayoutState),

typeof(MainPage),

LayoutState.None

);

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

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

#region 레이아웃 상태 - LayoutState

/// <summary>

/// 레이아웃 상태

/// </summary>

public LayoutState LayoutState

{

get => (LayoutState)GetValue(LayoutStateProperty);

set => SetValue(LayoutStateProperty, value);

}

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.changeButton.Clicked += changeButton_Clicked;

}

#endregion

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

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

#region 상태 변경하기 버튼 클릭시 처리하기 - changeButton_Clicked(sender, e)

/// <summary>

/// 상태 변경하기 버튼 클릭시 처리하기

/// </summary>

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

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

private void changeButton_Clicked(object sender, EventArgs e)

{

LayoutState = LayoutState switch

{

LayoutState.None => LayoutState.Success,

_ => LayoutState.None

};

}

#endregion

}

▶ MauiProgram.cs


using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>
/// MAUI 프로그램
/// </summary>
public static class MauiProgram
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region MAUI 앱 생성하기 - CreateMauiApp()

    /// <summary>
    /// MAUI 앱 생성하기
    /// </summary>
    /// <returns>MAUI 앱</returns>
    public static MauiApp CreateMauiApp()
    {
        MauiAppBuilder builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .ConfigureFonts
            (
                fontCollection =>
                {
                    fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );
                    fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                }
            );

        return builder.Build();
    }

    #endregion
}

using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>

/// MAUI 프로그램

/// </summary>

public static class MauiProgram

{

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

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

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

#region MAUI 앱 생성하기 - CreateMauiApp()

/// <summary>

/// MAUI 앱 생성하기

/// </summary>

/// <returns>MAUI 앱</returns>

public static MauiApp CreateMauiApp()

{

MauiAppBuilder builder = MauiApp.CreateBuilder();

builder

.UseMauiApp<App>()

.UseMauiCommunityToolkit()

.ConfigureFonts

(

fontCollection =>

{

fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );

fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");

}

);

return builder.Build();

}

#endregion

}

TestProject.zip

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] SelectedItemEventArgsConverter 클래스 : 항목 선택 이벤트 인자 변환자 사용하기

■ SelectedItemEventArgsConverter 클래스에서 항목 선택 이벤트 인자 변환자를 사용하는 방법을 보여준다. ▶ 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">
    <ListView x:Name="listView"
        ItemsSource="{Binding ItemList}"
        SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Label
                        Margin="10"
                        Text="{Binding}" />
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</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">

<ListView x:Name="listView"

ItemsSource="{Binding ItemList}"

SelectedItem="{Binding SelectedItem, Mode=TwoWay}">

<ListView.ItemTemplate>

<Label

Margin="10"

Text="{Binding}" />

</ViewCell>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</ContentPage>

▶ MainPage.xaml.cs


using System.Windows.Input;

using CommunityToolkit.Maui.Behaviors;
using CommunityToolkit.Maui.Converters;

namespace TestProject;

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

    #region 항목 리스트 - ItemList

    /// <summary>
    /// 항목 리스트
    /// </summary>
    public List<string> ItemList { get; set; }

    #endregion
    #region 선택 항목 - SelectedItem

    /// <summary>
    /// 선택 항목
    /// </summary>
    public string SelectedItem { get; set; }

    #endregion
    #region 항목 선택시 명령 - ItemSelectedCommand

    /// <summary>
    /// 항목 선택시 명령
    /// </summary>
    public ICommand ItemSelectedCommand { get; private set; }

    #endregion

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

    #region 생성자 - MainPage()

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

        ItemList = new List<string>()
        {
            "광주",
            "대전",
            "대구",
            "목포",
            "부산",
            "서울",
            "수원",
            "울산",
            "포항"
        };

        SelectedItem = ItemList[1];

        ItemSelectedCommand = new Command<string>
        (
            async (e) =>
            {
                await DisplayAlert("INFORMATION", $"{e} 항목을 선택하였습니다.", "확인");
            }
        );

        SelectedItemEventArgsConverter converter = new SelectedItemEventArgsConverter();

        EventToCommandBehavior behavior = new EventToCommandBehavior();

        behavior.EventName          = nameof(ListView.ItemSelected);
        behavior.EventArgsConverter = converter;

        behavior.SetBinding(EventToCommandBehavior.CommandProperty, nameof(ItemSelectedCommand));

        this.listView.Behaviors.Add(behavior);

        BindingContext = this;
    }

    #endregion
}

using System.Windows.Input;

using CommunityToolkit.Maui.Behaviors;

using CommunityToolkit.Maui.Converters;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

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

#region 항목 리스트 - ItemList

/// <summary>

/// 항목 리스트

/// </summary>

public List<string> ItemList { get; set; }

#endregion

#region 선택 항목 - SelectedItem

/// <summary>

/// 선택 항목

/// </summary>

public string SelectedItem { get; set; }

#endregion

#region 항목 선택시 명령 - ItemSelectedCommand

/// <summary>

/// 항목 선택시 명령

/// </summary>

public ICommand ItemSelectedCommand { get; private set; }

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

ItemList = new List<string>()

{

"광주",

"대전",

"대구",

"목포",

"부산",

"서울",

"수원",

"울산",

"포항"

};

SelectedItem = ItemList[1];

ItemSelectedCommand = new Command<string>

(

async (e) =>

{

await DisplayAlert("INFORMATION", $"{e} 항목을 선택하였습니다.", "확인");

}

);

SelectedItemEventArgsConverter converter = new SelectedItemEventArgsConverter();

EventToCommandBehavior behavior = new EventToCommandBehavior();

behavior.EventName = nameof(ListView.ItemSelected);

behavior.EventArgsConverter = converter;

behavior.SetBinding(EventToCommandBehavior.CommandProperty, nameof(ItemSelectedCommand));

this.listView.Behaviors.Add(behavior);

BindingContext = this;

}

#endregion

}

▶ MauiProgram.cs


using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>
/// MAUI 프로그램
/// </summary>
public static class MauiProgram
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region MAUI 앱 생성하기 - CreateMauiApp()

    /// <summary>
    /// MAUI 앱 생성하기
    /// </summary>
    /// <returns>MAUI 앱</returns>
    public static MauiApp CreateMauiApp()
    {
        MauiAppBuilder builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .ConfigureFonts
            (
                fontCollection =>
                {
                    fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );
                    fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                }
            );

        return builder.Build();
    }

    #endregion
}

using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>

/// MAUI 프로그램

/// </summary>

public static class MauiProgram

{

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

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

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

#region MAUI 앱 생성하기 - CreateMauiApp()

/// <summary>

/// MAUI 앱 생성하기

/// </summary>

/// <returns>MAUI 앱</returns>

public static MauiApp CreateMauiApp()

{

MauiAppBuilder builder = MauiApp.CreateBuilder();

builder

.UseMauiApp<App>()

.UseMauiCommunityToolkit()

.ConfigureFonts

(

fontCollection =>

{

fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );

fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");

}

);

return builder.Build();

}

#endregion

}

TestProject.zip