COMMUNITY TOOLKIT Archives

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] AnimationBehavior 엘리먼트 : 버튼 클릭시 페이드 인/아웃 애니메이션 사용하기

■ AnimationBehavior 엘리먼트를 사용해 버튼 클릭시 페이드 인/아웃 애니메이션을 만드는 방법을 보여준다. ▶ MainPage.xml


<?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">
    <Button
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Padding="10"
        Text="애니메이션 테스트">
        <Button.Behaviors>
            <toolkit:AnimationBehavior EventName="Clicked">
                <toolkit:AnimationBehavior.AnimationType>
                    <toolkit:FadeAnimation Opacity="0.2" />
                </toolkit:AnimationBehavior.AnimationType>
            </toolkit:AnimationBehavior>
        </Button.Behaviors>
    </Button>
</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">

<Button

HorizontalOptions="Center"

VerticalOptions="Center"

Padding="10"

Text="애니메이션 테스트">

<Button.Behaviors>

<toolkit:AnimationBehavior EventName="Clicked">

<toolkit:AnimationBehavior.AnimationType>

<toolkit:FadeAnimation Opacity="0.2" />

</toolkit:AnimationBehavior.AnimationType>

</toolkit:AnimationBehavior>

</Button.Behaviors>

</Button>

</ContentPage>

▶ 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] AnimationBehavior 엘리먼트 : 버튼 클릭시 버튼 크기 변경 애니메이션 사용하기

■ AnimationBehavior 엘리먼트를 사용해 버튼 클릭시 버튼 크기 변경 애니메이션을 만드는 방법을 보여준다. ▶ ScaleAnimation.cs


using CommunityToolkit.Maui.Animations;

namespace TestProject
{
    /// <summary>
    /// 스케일 애니메이션
    /// </summary>
    public class ScaleAnimation : BaseAnimation
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 애니메이션 처리하기 - Animate(view)

        /// <summary>
        /// 애니메이션 처리하기
        /// </summary>
        /// <param name="view">뷰</param>
        /// <returns>태스크</returns>
        public override async Task Animate(VisualElement view)
        {
            await view.ScaleTo(1.2, Length, Easing);
            await view.ScaleTo(1  , Length, Easing);
        }

        #endregion
    }
}

using CommunityToolkit.Maui.Animations;

namespace TestProject

{

/// <summary>

/// 스케일 애니메이션

/// </summary>

public class ScaleAnimation : BaseAnimation

{

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

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

#region 애니메이션 처리하기 - Animate(view)

/// <summary>

/// 애니메이션 처리하기

/// </summary>

/// <param name="view">뷰</param>

/// <returns>태스크</returns>

public override async Task Animate(VisualElement view)

{

await view.ScaleTo(1.2, Length, Easing);

await view.ScaleTo(1 , Length, Easing);

}

#endregion

}

▶ MainPage.xml


<?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"
    xmlns:local="clr-namespace:TestProject">
    <Button
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Padding="10"
        Text="테스트">
        <Button.Behaviors>
            <toolkit:AnimationBehavior EventName="Clicked">
                <toolkit:AnimationBehavior.AnimationType>
                    <local:ScaleAnimation
                        Easing="{x:Static Easing.Linear}"
                        Length="100"/>
                </toolkit:AnimationBehavior.AnimationType>
            </toolkit:AnimationBehavior>
        </Button.Behaviors>
    </Button>
</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"

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

<Button

HorizontalOptions="Center"

VerticalOptions="Center"

Padding="10"

Text="테스트">

<Button.Behaviors>

<toolkit:AnimationBehavior EventName="Clicked">

<toolkit:AnimationBehavior.AnimationType>

<local:ScaleAnimation

Easing="{x:Static Easing.Linear}"

Length="100"/>

</toolkit:AnimationBehavior.AnimationType>

</toolkit:AnimationBehavior>

</Button.Behaviors>

</Button>

</ContentPage>

▶ 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] StatusBarBehavior 클래스 : StatusBarColor/StatusBarStyle 속성을 사용해 상태바 색상 및 스타일 설정하기

■ StatusBarBehavior 클래스의 StatusBarColor/StatusBarStyle 속성을 사용해 상태바 색상 및 스타일을 설정하는 방법을 보여준다. ▶ 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">
    <Page.Behaviors>
        <toolkit:StatusBarBehavior x:Name="statusBarBehavior" />
    </Page.Behaviors>
</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">

<Page.Behaviors>

<toolkit:StatusBarBehavior x:Name="statusBarBehavior" />

</Page.Behaviors>

</ContentPage>

▶ MainPage.xaml.cs


using CommunityToolkit.Maui.Core;

namespace TestProject;

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

    #region 생성자 - MainPage()

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

        Loaded += ContentPage_Loaded;
    }

    #endregion

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

    #region 컨텐트 페이지 로드시 처리하기 - ContentPage_Loaded(sender, e)

    /// <summary>
    /// 컨텐트 페이지 로드시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void ContentPage_Loaded(object sender, EventArgs e)
    {
        // 생성자나 XAML에서 설정하면 예외가 발생한다.
        this.statusBarBehavior.StatusBarColor = Colors.Orange;
        this.statusBarBehavior.StatusBarStyle = StatusBarStyle.LightContent;
    }

    #endregion
}

using CommunityToolkit.Maui.Core;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

Loaded += ContentPage_Loaded;

}

#endregion

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

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

#region 컨텐트 페이지 로드시 처리하기 - ContentPage_Loaded(sender, e)

/// <summary>

/// 컨텐트 페이지 로드시 처리하기

/// </summary>

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

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

private void ContentPage_Loaded(object sender, EventArgs e)

{

// 생성자나 XAML에서 설정하면 예외가 발생한다.

this.statusBarBehavior.StatusBarColor = Colors.Orange;

this.statusBarBehavior.StatusBarStyle = StatusBarStyle.LightContent;

}

#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] Popup 엘리먼트 : 팝업 표시하기

■ Popup 엘리먼트를 사용해 팝업을 표시하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup x:Class="TestProject.CustomPopup"
    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"
    HorizontalOptions="Center"
    VerticalOptions="Center"
    Color="White"
    CanBeDismissedByTappingOutsideOfPopup="True">
    <Grid
        WidthRequest="300"
        HeightRequest="400">
        <VerticalStackLayout
            HorizontalOptions="Center"
            VerticalOptions="Center"
            Spacing="10">
            <Label
                HorizontalOptions="Center"
                FontSize="24"
                Text="샘플 팝업 입니다." />
            <HorizontalStackLayout
                HorizontalOptions="Center"
                Margin="10">
                <Button x:Name="okButton"
                    HorizontalOptions="Center"
                    Text="확인" />
                <Button x:Name="cancelButton"
                    Margin="10,0,0,0"
                    HorizontalOptions="Center"
                    Text="취소" />
            </HorizontalStackLayout>
        </VerticalStackLayout>
    </Grid>
</toolkit:Popup>

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

<toolkit:Popup x:Class="TestProject.CustomPopup"

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"

HorizontalOptions="Center"

VerticalOptions="Center"

Color="White"

CanBeDismissedByTappingOutsideOfPopup="True">

<Grid

WidthRequest="300"

HeightRequest="400">

<VerticalStackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<Label

HorizontalOptions="Center"

FontSize="24"

Text="샘플 팝업 입니다." />

<HorizontalStackLayout

HorizontalOptions="Center"

Margin="10">

<Button x:Name="okButton"

HorizontalOptions="Center"

Text="확인" />

<Button x:Name="cancelButton"

Margin="10,0,0,0"

HorizontalOptions="Center"

Text="취소" />

</HorizontalStackLayout>

</VerticalStackLayout>

</Grid>

</toolkit:Popup>

▶ MainPage.xaml.cs


using CommunityToolkit.Maui.Views;

namespace TestProject;

/// <summary>
/// 커스텀 팝업
/// </summary>
public partial class CustomPopup : Popup
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - CustomPopup()

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

        ResultWhenUserTapsOutsideOfPopup = "외부";

        this.okButton.Clicked     += okButton_Clicked;
        this.cancelButton.Clicked += cancelButton_Clicked;
    }

    #endregion

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

    #region 확인 버튼 클릭시 처리하기 - okButton_Clicked(sender, e)

    /// <summary>
    /// 확인 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void okButton_Clicked(object sender, EventArgs e)
    {
        Close("확인");
    }

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

    /// <summary>
    /// 취소 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void cancelButton_Clicked(object sender, EventArgs e)
    {
        Close("취소");
    }

    #endregion
}

using CommunityToolkit.Maui.Views;

namespace TestProject;

/// <summary>

/// 커스텀 팝업

/// </summary>

public partial class CustomPopup : Popup

{

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

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

#region 생성자 - CustomPopup()

/// <summary>

/// 생성자

/// </summary>

public CustomPopup()

{

InitializeComponent();

ResultWhenUserTapsOutsideOfPopup = "외부";

this.okButton.Clicked += okButton_Clicked;

this.cancelButton.Clicked += cancelButton_Clicked;

}

#endregion

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

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

#region 확인 버튼 클릭시 처리하기 - okButton_Clicked(sender, e)

/// <summary>

/// 확인 버튼 클릭시 처리하기

/// </summary>

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

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

private void okButton_Clicked(object sender, EventArgs e)

{

Close("확인");

}

#endregion

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

/// <summary>

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

/// </summary>

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

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

private void cancelButton_Clicked(object sender, EventArgs e)

{

Close("취소");

}

#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] DrawingView 클래스 : DrawingLine 객체를 생성해 선 추가하기

■ DrawingView 클래스를 사용해 DrawingLine 객체를 생성해 선을 추가하는 방법을 보여준다. ▶ 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">
    <Grid
        Margin="10"
        RowDefinitions="*,10,Auto">
        <toolkit:DrawingView x:Name="drawingView" Grid.Row="0"
            Margin="10"
            Background="Beige"
            IsMultiLineModeEnabled="true"
            ShouldClearOnFinish="false"
            LineWidth="5"
            LineColor="Blue" />
        <Button x:Name="addButton" Grid.Row="2"
            Margin="10"
            Text="선 추가하기" />
    </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"

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

<Grid

Margin="10"

RowDefinitions="*,10,Auto">

<toolkit:DrawingView x:Name="drawingView" Grid.Row="0"

Margin="10"

Background="Beige"

IsMultiLineModeEnabled="true"

ShouldClearOnFinish="false"

LineWidth="5"

LineColor="Blue" />

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

Margin="10"

Text="선 추가하기" />

</Grid>

</ContentPage>

▶ MainPage.xaml.cs


using System.Collections.ObjectModel;

using CommunityToolkit.Maui.Core;
using CommunityToolkit.Maui.Core.Views;

namespace TestProject;

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

    #region Field

    /// <summary>
    /// 선 컬렉션
    /// </summary>
    private ObservableCollection<IDrawingLine> lineCollection = new ObservableCollection<IDrawingLine>();

    #endregion

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

    #region 생성자 - MainPage()

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

        this.drawingView.Lines = this.lineCollection;

        this.addButton.Clicked += addButton_Clicked;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private
    //////////////////////////////////////////////////////////////////////////////// Event

    #region 선 추가하기 버튼 클릭시 처리하기 - addButton_Clicked(sender, e)

    /// <summary>
    /// 선 추가하기 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void addButton_Clicked(object sender, EventArgs e)
    {
        double viewWidth  = double.IsNaN(this.drawingView.Width ) || this.drawingView.Width  <= 1 ? 200 : this.drawingView.Width;
        double viewHeight = double.IsNaN(this.drawingView.Height) || this.drawingView.Height <= 1 ? 200 : this.drawingView.Height;

        this.lineCollection.Add
        (
            new DrawingLine()
            {
                Granularity               = 5,
                ShouldSmoothPathWhenDrawn = true,
                LineWidth                 = 10,
                LineColor                 = Color.FromRgb(Random.Shared.Next(255), Random.Shared.Next(255), Random.Shared.Next(255)),
                Points                    = new(GetPointEnumerable(10, viewWidth, viewHeight))
            }
        );
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////// Function

    #region 포인트 열거 가능형 구하기 - GetPointEnumerable(pointCount, viewWidth, viewHeight)

    /// <summary>
    /// 포인트 열거 가능형 구하기
    /// </summary>
    /// <param name="pointCount">포인트 수</param>
    /// <param name="viewWidth">뷰 너비</param>
    /// <param name="viewHeight">뷰 높이</param>
    /// <returns>포인트 열거 가능형</returns>
    private IEnumerable<PointF> GetPointEnumerable(int pointCount, double viewWidth, double viewHeight)
    {
        double paddedViewWidth  = Math.Clamp(viewWidth  - 10, 1, viewWidth );
        double paddedViewHeight = Math.Clamp(viewHeight - 10, 1, viewHeight);

        int maximumWidth  = (int)Math.Round(paddedViewWidth , MidpointRounding.AwayFromZero);
        int maximumHeight = (int)Math.Round(paddedViewHeight, MidpointRounding.AwayFromZero);

        for(int i = 0; i < pointCount; i++)
        {
            yield return new PointF(Random.Shared.Next(1, maximumWidth), Random.Shared.Next(1, maximumHeight));
        }
    }

    #endregion
}

100

101

102

103

using System.Collections.ObjectModel;

using CommunityToolkit.Maui.Core;

using CommunityToolkit.Maui.Core.Views;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

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

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

#region Field

/// <summary>

/// 선 컬렉션

/// </summary>

private ObservableCollection<IDrawingLine> lineCollection = new ObservableCollection<IDrawingLine>();

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.drawingView.Lines = this.lineCollection;

this.addButton.Clicked += addButton_Clicked;

}

#endregion

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

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

//////////////////////////////////////////////////////////////////////////////// Event

#region 선 추가하기 버튼 클릭시 처리하기 - addButton_Clicked(sender, e)

/// <summary>

/// 선 추가하기 버튼 클릭시 처리하기

/// </summary>

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

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

private void addButton_Clicked(object sender, EventArgs e)

{

double viewWidth = double.IsNaN(this.drawingView.Width ) || this.drawingView.Width <= 1 ? 200 : this.drawingView.Width;

double viewHeight = double.IsNaN(this.drawingView.Height) || this.drawingView.Height <= 1 ? 200 : this.drawingView.Height;

this.lineCollection.Add

(

new DrawingLine()

{

Granularity = 5,

ShouldSmoothPathWhenDrawn = true,

LineWidth = 10,

LineColor = Color.FromRgb(Random.Shared.Next(255), Random.Shared.Next(255), Random.Shared.Next(255)),

Points = new(GetPointEnumerable(10, viewWidth, viewHeight))

}

);

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 포인트 열거 가능형 구하기 - GetPointEnumerable(pointCount, viewWidth, viewHeight)

/// <summary>

/// 포인트 열거 가능형 구하기

/// </summary>

/// <param name="pointCount">포인트 수</param>

/// <param name="viewWidth">뷰 너비</param>

/// <param name="viewHeight">뷰 높이</param>

/// <returns>포인트 열거 가능형</returns>

private IEnumerable<PointF> GetPointEnumerable(int pointCount, double viewWidth, double viewHeight)

{

double paddedViewWidth = Math.Clamp(viewWidth - 10, 1, viewWidth );

double paddedViewHeight = Math.Clamp(viewHeight - 10, 1, viewHeight);

int maximumWidth = (int)Math.Round(paddedViewWidth , MidpointRounding.AwayFromZero);

int maximumHeight = (int)Math.Round(paddedViewHeight, MidpointRounding.AwayFromZero);

for(int i = 0; i < pointCount; i++)

{

yield return new PointF(Random.Shared.Next(1, maximumWidth), Random.Shared.Next(1, maximumHeight));

}

#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] DrawingView 클래스 : GetImageStream 메소드를 사용해 이미지 구하기

■ DrawingView 클래스의 GetImageStream 메소드를 사용해 이미지를 구하는 방법을 보여준다. ▶ 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">
    <Grid
        Margin="10"
        RowDefinitions="*,Auto,*">
        <toolkit:DrawingView x:Name="drawingView" Grid.Row="0"
            Margin="10"
            Background="Beige"
            IsMultiLineModeEnabled="true"
            ShouldClearOnFinish="false"
            LineWidth="5"
            LineColor="Blue" />
        <Button x:Name="captureButton" Grid.Row="1"
            Margin="10"
            Text="이미지 캡처" />
        <Image x:Name="image" Grid.Row="2" />
    </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"

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

<Grid

Margin="10"

RowDefinitions="*,Auto,*">

<toolkit:DrawingView x:Name="drawingView" Grid.Row="0"

Margin="10"

Background="Beige"

IsMultiLineModeEnabled="true"

ShouldClearOnFinish="false"

LineWidth="5"

LineColor="Blue" />

<Button x:Name="captureButton" Grid.Row="1"

Margin="10"

Text="이미지 캡처" />

</Grid>

</ContentPage>

▶ MainPage.xaml.cs


using System.Collections.ObjectModel;

using CommunityToolkit.Maui.Core;

namespace TestProject;

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

    #region 생성자 - MainPage()

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

        this.drawingView.Lines = new ObservableCollection<IDrawingLine>();

        this.captureButton.Clicked += captureButton_Clicked;
    }

    #endregion

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

    #region 이미지 캡처 버튼 클릭시 처리하기 - captureButton_Clicked(sender, e)

    /// <summary>
    /// 이미지 캡처 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void captureButton_Clicked(object sender, EventArgs e)
    {
        Stream stream = await drawingView.GetImageStream(this.image.Width, this.image.Height);

        this.image.Source = ImageSource.FromStream(() => stream);
    }

    #endregion
}

using System.Collections.ObjectModel;

using CommunityToolkit.Maui.Core;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.drawingView.Lines = new ObservableCollection<IDrawingLine>();

this.captureButton.Clicked += captureButton_Clicked;

}

#endregion

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

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

#region 이미지 캡처 버튼 클릭시 처리하기 - captureButton_Clicked(sender, e)

/// <summary>

/// 이미지 캡처 버튼 클릭시 처리하기

/// </summary>

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

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

private async void captureButton_Clicked(object sender, EventArgs e)

{

Stream stream = await drawingView.GetImageStream(this.image.Width, this.image.Height);

this.image.Source = ImageSource.FromStream(() => stream);

}

#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] DrawingView 클래스 : DrawingLineCompleted 이벤트를 사용해 선 그리기 완료시 처리하기

■ DrawingView 클래스의 DrawingLineCompleted 이벤트를 사용해 선 그리기 완료시 처리하는 방법을 보여준다. ▶ 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">
    <Grid
        Margin="10"
        RowDefinitions="*,10,*">
        <toolkit:DrawingView x:Name="drawingView" Grid.Row="0"
            Margin="10"
            Background="Beige"
            IsMultiLineModeEnabled="true"
            ShouldClearOnFinish="false"
            LineWidth="5"
            LineColor="Blue" />
        <Image x:Name="image" Grid.Row="2" />
    </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"

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

<Grid

Margin="10"

RowDefinitions="*,10,*">

<toolkit:DrawingView x:Name="drawingView" Grid.Row="0"

Margin="10"

Background="Beige"

IsMultiLineModeEnabled="true"

ShouldClearOnFinish="false"

LineWidth="5"

LineColor="Blue" />

</Grid>

</ContentPage>

▶ MainPage.xaml.cs


using System.Collections.ObjectModel;

using CommunityToolkit.Maui.Core;

namespace TestProject;

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

    #region 생성자 - MainPage()

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

        this.drawingView.Lines = new ObservableCollection<IDrawingLine>();

        this.drawingView.DrawingLineCompleted += drawingView_DrawingLineCompleted;
    }

    #endregion

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

    #region 드로잉 뷰 선 그리기 완료시 처리하기 - drawingView_DrawingLineCompleted(sender, e)

    /// <summary>
    /// 드로잉 뷰 선 그리기 완료시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void drawingView_DrawingLineCompleted(object sender, DrawingLineCompletedEventArgs e)
    {
        Stream stream = await e.LastDrawingLine.GetImageStream(this.image.Width, this.image.Height, Colors.Gray.AsPaint());

        this.image.Source = ImageSource.FromStream(() => stream);
    }

    #endregion
}

using System.Collections.ObjectModel;

using CommunityToolkit.Maui.Core;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.drawingView.Lines = new ObservableCollection<IDrawingLine>();

this.drawingView.DrawingLineCompleted += drawingView_DrawingLineCompleted;

}

#endregion

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

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

#region 드로잉 뷰 선 그리기 완료시 처리하기 - drawingView_DrawingLineCompleted(sender, e)

/// <summary>

/// 드로잉 뷰 선 그리기 완료시 처리하기

/// </summary>

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

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

private async void drawingView_DrawingLineCompleted(object sender, DrawingLineCompletedEventArgs e)

{

Stream stream = await e.LastDrawingLine.GetImageStream(this.image.Width, this.image.Height, Colors.Gray.AsPaint());

this.image.Source = ImageSource.FromStream(() => stream);

}

#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] DrawingView 클래스 : IsMultiLineModeEnabled/ShouldClearOnFinish 속성을 사용해 2개 이상의 선 그리기

■ DrawingView 클래스의 IsMultiLineModeEnabled/ShouldClearOnFinish 속성을 사용해 2개 이상의 선을 그리는 방법을 보여준다. ▶ 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">
</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">

</ContentPage>

▶ MainPage.xaml.cs


using System.Collections.ObjectModel;

using CommunityToolkit.Maui.Core;
using CommunityToolkit.Maui.Views;

namespace TestProject;

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

    #region 생성자 - MainPage()

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

        DrawingView drawingView = new DrawingView();

        drawingView.Margin                 = new Thickness(10);
        drawingView.BackgroundColor        = Colors.Beige;
        drawingView.IsMultiLineModeEnabled = true;
        drawingView.ShouldClearOnFinish    = false;
        drawingView.LineWidth              = 5;
        drawingView.LineColor              = Colors.Blue;
        drawingView.Lines                  = new ObservableCollection<IDrawingLine>();

        Content = drawingView;
    }

    #endregion
}

using System.Collections.ObjectModel;

using CommunityToolkit.Maui.Core;

using CommunityToolkit.Maui.Views;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

DrawingView drawingView = new DrawingView();

drawingView.Margin = new Thickness(10);

drawingView.BackgroundColor = Colors.Beige;

drawingView.IsMultiLineModeEnabled = true;

drawingView.ShouldClearOnFinish = false;

drawingView.LineWidth = 5;

drawingView.LineColor = Colors.Blue;

drawingView.Lines = new ObservableCollection<IDrawingLine>();

Content = drawingView;

}

#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] DrawingView 엘리먼트 : IsMultiLineModeEnabled/ShouldClearOnFinish 속성을 사용해 2개 이상의 선 그리기

■ DrawingView 엘리먼트의 IsMultiLineModeEnabled/ShouldClearOnFinish 속성을 사용해 2개 이상의 선을 그리는 방법을 보여준다. ▶ LineCollection.cs


using System.Collections.ObjectModel;

using CommunityToolkit.Maui.Core;

namespace TestProject;

/// <summary>
/// 라인 컬렉션
/// </summary>
public class LineCollection : ObservableCollection<IDrawingLine>
{
}

using System.Collections.ObjectModel;

using CommunityToolkit.Maui.Core;

namespace TestProject;

/// <summary>

/// 라인 컬렉션

/// </summary>

public class LineCollection : ObservableCollection<IDrawingLine>

{

}

▶ 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"
    xmlns:local="clr-namespace:TestProject">
    <ContentPage.Resources>
        <local:LineCollection x:Key="LineCollectionKey" />
    </ContentPage.Resources>
    <toolkit:DrawingView
        Margin="10"
        Background="Beige"
        IsMultiLineModeEnabled="true"
        ShouldClearOnFinish="false"
        LineWidth="5"
        LineColor="Blue"
        Lines="{StaticResource LineCollectionKey}" />
</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"

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

<ContentPage.Resources>

<local:LineCollection x:Key="LineCollectionKey" />

</ContentPage.Resources>

<toolkit:DrawingView

Margin="10"

Background="Beige"

IsMultiLineModeEnabled="true"

ShouldClearOnFinish="false"

LineWidth="5"

LineColor="Blue"

Lines="{StaticResource LineCollectionKey}" />

</ContentPage>

▶ 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] DrawingView 클래스 : LineWidth/LineColor/Lines 속성 사용하기

■ DrawingView 클래스의 LineWidth/LineColor/Lines 속성을 사용하는 방법을 보여준다. ▶ 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">
</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">

</ContentPage>

▶ MainPage.xaml.cs


using System.Collections.ObjectModel;

using CommunityToolkit.Maui.Core;
using CommunityToolkit.Maui.Views;

namespace TestProject;

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

    #region 생성자 - MainPage()

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

        DrawingView drawingView = new DrawingView();

        drawingView.Margin          = new Thickness(10);
        drawingView.BackgroundColor = Colors.Beige;
        drawingView.LineWidth       = 5;
        drawingView.LineColor       = Colors.Blue;
        drawingView.Lines           = new ObservableCollection<IDrawingLine>();

        Content = drawingView;
    }

    #endregion
}

using System.Collections.ObjectModel;

using CommunityToolkit.Maui.Core;

using CommunityToolkit.Maui.Views;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

DrawingView drawingView = new DrawingView();

drawingView.Margin = new Thickness(10);

drawingView.BackgroundColor = Colors.Beige;

drawingView.LineWidth = 5;

drawingView.LineColor = Colors.Blue;

drawingView.Lines = new ObservableCollection<IDrawingLine>();

Content = drawingView;

}

#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] DrawingView 엘리먼트 : LineWidth/LineColor/Lines 속성 사용하기

■ DrawingView 엘리먼트의 LineWidth/LineColor/Lines 속성을 사용하는 방법을 보여준다. ▶ LineCollection.cs


using System.Collections.ObjectModel;

using CommunityToolkit.Maui.Core;

namespace TestProject;

/// <summary>
/// 라인 컬렉션
/// </summary>
public class LineCollection : ObservableCollection<IDrawingLine>
{
}

using System.Collections.ObjectModel;

using CommunityToolkit.Maui.Core;

namespace TestProject;

/// <summary>

/// 라인 컬렉션

/// </summary>

public class LineCollection : ObservableCollection<IDrawingLine>

{

}

▶ 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"
    xmlns:local="clr-namespace:TestProject">
    <ContentPage.Resources>
        <local:LineCollection x:Key="LineCollectionKey" />
    </ContentPage.Resources>
    <toolkit:DrawingView
        Margin="10"
        Background="Beige"
        LineWidth="5"
        LineColor="Blue"
        Lines="{StaticResource LineCollectionKey}" />
</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"

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

<ContentPage.Resources>

<local:LineCollection x:Key="LineCollectionKey" />

</ContentPage.Resources>

<toolkit:DrawingView

Margin="10"

Background="Beige"

LineWidth="5"

LineColor="Blue"

Lines="{StaticResource LineCollectionKey}" />

</ContentPage>

▶ 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] UniformItemsLayout 엘리먼트 : MaxColumns 속성을 사용해 최대 컬럼 수 설정하기

■ UniformItemsLayout 엘리먼트의 MaxColumns 속성을 사용해 최대 컬럼 수를 설정하는 방법을 보여준다. ▶ 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">
    <toolkit:UniformItemsLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Padding="10"
        MaxColumns="2">
        <BoxView Margin="10" WidthRequest="25" HeightRequest="25" BackgroundColor="Blue"   />
        <BoxView Margin="10" WidthRequest="25" HeightRequest="25" BackgroundColor="Yellow" />
        <BoxView Margin="10" WidthRequest="25" HeightRequest="25" BackgroundColor="Red"    />
        <BoxView Margin="10" WidthRequest="25" HeightRequest="25" BackgroundColor="Black"  />
    </toolkit:UniformItemsLayout>
</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">

<toolkit:UniformItemsLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Padding="10"

MaxColumns="2">

</toolkit:UniformItemsLayout>

</ContentPage>

▶ 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] UniformItemsLayout 클래스 사용하기

■ UniformItemsLayout 클래스를 사용하는 방법을 보여준다. ▶ 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">
</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">

</ContentPage>

▶ MainPage.xaml.cs


using CommunityToolkit.Maui.Layouts;

namespace TestProject;

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

    #region 생성자 - MainPage()

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

        UniformItemsLayout layout = new UniformItemsLayout();

        layout.HorizontalOptions = LayoutOptions.Center;
        layout.VerticalOptions   = LayoutOptions.Center;
        layout.Padding           = new Thickness(10);

        layout.Children.Add(new BoxView { Margin = 10, WidthRequest = 25, HeightRequest = 25, BackgroundColor = Colors.Blue   });
        layout.Children.Add(new BoxView { Margin = 10, WidthRequest = 25, HeightRequest = 25, BackgroundColor = Colors.Yellow });
        layout.Children.Add(new BoxView { Margin = 10, WidthRequest = 25, HeightRequest = 25, BackgroundColor = Colors.Red    });
        layout.Children.Add(new BoxView { Margin = 10, WidthRequest = 25, HeightRequest = 25, BackgroundColor = Colors.Black  });

        Content = layout;
    }

    #endregion
}

using CommunityToolkit.Maui.Layouts;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

UniformItemsLayout layout = new UniformItemsLayout();

layout.HorizontalOptions = LayoutOptions.Center;

layout.VerticalOptions = LayoutOptions.Center;

layout.Padding = new Thickness(10);

layout.Children.Add(new BoxView { Margin = 10, WidthRequest = 25, HeightRequest = 25, BackgroundColor = Colors.Blue });

layout.Children.Add(new BoxView { Margin = 10, WidthRequest = 25, HeightRequest = 25, BackgroundColor = Colors.Yellow });

layout.Children.Add(new BoxView { Margin = 10, WidthRequest = 25, HeightRequest = 25, BackgroundColor = Colors.Red });

layout.Children.Add(new BoxView { Margin = 10, WidthRequest = 25, HeightRequest = 25, BackgroundColor = Colors.Black });

Content = layout;

}

#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] UniformItemsLayout 엘리먼트 사용하기

■ UniformItemsLayout 엘리먼트를 사용하는 방법을 보여준다. ▶ 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">
    <toolkit:UniformItemsLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Padding="10">
        <BoxView Margin="10" WidthRequest="25" HeightRequest="25" BackgroundColor="Blue"   />
        <BoxView Margin="10" WidthRequest="25" HeightRequest="25" BackgroundColor="Yellow" />
        <BoxView Margin="10" WidthRequest="25" HeightRequest="25" BackgroundColor="Red"    />
        <BoxView Margin="10" WidthRequest="25" HeightRequest="25" BackgroundColor="Black"  />
    </toolkit:UniformItemsLayout>
</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">

<toolkit:UniformItemsLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Padding="10">

</toolkit:UniformItemsLayout>

</ContentPage>

▶ 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] ServiceCollectionExtensions 클래스 : AddTransientWithShellRoute 확장 메소드를 사용해 MVVM 패턴에서 의존성 주입 사용하기

■ ServiceCollectionExtensions 클래스의 AddTransientWithShellRoute 확장 메소드를 사용해 MVVM 패턴에서 의존성 주입을 설정하는 방법을 보여준다. ▶ VIEWMODEL/BaseViewModel.cs


using CommunityToolkit.Mvvm.ComponentModel;

namespace TestProject;

/// <summary>
/// 베이스 뷰 모델
/// </summary>
[INotifyPropertyChanged]
public abstract partial class BaseViewModel
{
}

using CommunityToolkit.Mvvm.ComponentModel;

namespace TestProject;

/// <summary>

/// 베이스 뷰 모델

/// </summary>

[INotifyPropertyChanged]

public abstract partial class BaseViewModel

{

}

▶ VIEWMODEL/MainPageViewModel.cs


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

namespace TestProject
{
    /// <summary>
    /// 메인 페이지 뷰 모델
    /// </summary>
    public partial class MainPageViewModel : BaseViewModel
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// 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 상세 페이지로 이동하기 - MoveDetailPage()

        /// <summary>
        /// 상세 페이지로 이동하기
        /// </summary>
        [RelayCommand]
        private async Task MoveDetailPage()
        {
            await Shell.Current.GoToAsync("//메인페이지/메인상세페이지");
        }

        #endregion
    }
}

using CommunityToolkit.Mvvm.ComponentModel;

using CommunityToolkit.Mvvm.Input;

namespace TestProject

{

/// <summary>

/// 메인 페이지 뷰 모델

/// </summary>

public partial class MainPageViewModel : BaseViewModel

{

//////////////////////////////////////////////////////////////////////////////////////////////////// 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 상세 페이지로 이동하기 - MoveDetailPage()

/// <summary>

/// 상세 페이지로 이동하기

/// </summary>

[RelayCommand]

private async Task MoveDetailPage()

{

await Shell.Current.GoToAsync("//메인페이지/메인상세페이지");

}

#endregion

}

▶ VIEWMODEL/MainDetailPageViewMode.cs

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ServiceCollectionExtensions 클래스 : AddTransient 확장 메소드를 사용해 MVVM 패턴에서 의존성 주입 사용하기

■ ServiceCollectionExtensions 클래스의 AddTransient 확장 메소드를 사용해 MVVM 패턴에서 의존성 주입을 설정하는 방법을 보여준다. ▶ VIEWMODEL/BaseViewModel.cs


using CommunityToolkit.Mvvm.ComponentModel;

namespace TestProject;

/// <summary>
/// 베이스 뷰 모델
/// </summary>
[INotifyPropertyChanged]
public abstract partial class BaseViewModel
{
}

using CommunityToolkit.Mvvm.ComponentModel;

namespace TestProject;

/// <summary>

/// 베이스 뷰 모델

/// </summary>

[INotifyPropertyChanged]

public abstract partial class BaseViewModel

{

}

▶ VIEWMODEL/MainPageViewModel.cs


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

namespace TestProject
{
    /// <summary>
    /// 메인 페이지 뷰 모델
    /// </summary>
    public partial class MainPageViewModel : BaseViewModel
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// 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 상세 페이지로 이동하기 - MoveDetailPage()

        /// <summary>
        /// 상세 페이지로 이동하기
        /// </summary>
        [RelayCommand]
        private async Task MoveDetailPage()
        {
            await Shell.Current.GoToAsync("//메인페이지/메인상세페이지");
        }

        #endregion
    }
}

using CommunityToolkit.Mvvm.ComponentModel;

using CommunityToolkit.Mvvm.Input;

namespace TestProject

{

/// <summary>

/// 메인 페이지 뷰 모델

/// </summary>

public partial class MainPageViewModel : BaseViewModel

{

//////////////////////////////////////////////////////////////////////////////////////////////////// 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 상세 페이지로 이동하기 - MoveDetailPage()

/// <summary>

/// 상세 페이지로 이동하기

/// </summary>

[RelayCommand]

private async Task MoveDetailPage()

{

await Shell.Current.GoToAsync("//메인페이지/메인상세페이지");

}

#endregion

}

▶ VIEWMODEL/MainDetailPageViewMode.cs

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ColorConversionExtensions 클래스 : WithYellow 확장 메소드를 사용해 노란색 값 설정한 색상 구하기

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


using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.White;

Color targetColor = sourceColor.WithYellow(0.5);

using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.White;

Color targetColor = sourceColor.WithYellow(0.5);

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ColorConversionExtensions 클래스 : WithBlackKey 확장 메소드를 사용해 검정색 값 설정한 색상 구하기

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


using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.White;

Color targetColor = sourceColor.WithBlackKey(0.5);

using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.White;

Color targetColor = sourceColor.WithBlackKey(0.5);

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ColorConversionExtensions 클래스 : WithMagenta 확장 메소드를 사용해 자홍색 값 설정한 색상 구하기

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


using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.White;

Color targetColor = sourceColor.WithMagenta(0.5);

using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.White;

Color targetColor = sourceColor.WithMagenta(0.5);

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

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


using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.White;

Color targetColor = sourceColor.WithCyan(0.5);

using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.White;

Color targetColor = sourceColor.WithCyan(0.5);

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ColorConversionExtensions 클래스 : WithGreen 확장 메소드를 사용해 녹색 값 설정한 색상 구하기

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


using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.White;

Color targetColor = sourceColor.WithGreen(255);

using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.White;

Color targetColor = sourceColor.WithGreen(255);

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

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


using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.White;

Color targetColor = sourceColor.WithBlue(255);

using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.White;

Color targetColor = sourceColor.WithBlue(255);

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

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


using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.White;

Color targetColor = sourceColor.WithRed(255);

using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.White;

Color targetColor = sourceColor.WithRed(255);

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ColorConversionExtensions 클래스 : ToRgbString 확장 메소드를 사용해 RGB 문자열 구하기

■ ColorConversionExtensions 클래스의 ToRgbString 확장 메소드를 사용해 RGB 문자열을 구하는 방법을 보여준다. ▶ 예제 코드 (C#)


using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Red;

string rgb = sourceColor.ToRgbString();

using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Red;

string rgb = sourceColor.ToRgbString();

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] ColorConversionExtensions 클래스 : ToHslString 확장 메소드를 사용해 HSL 문자열 구하기

■ ColorConversionExtensions 클래스의 ToHslString 확장 메소드를 사용해 HSL 문자열을 구하는 방법을 보여준다. ▶ 예제 코드 (C#)


using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Red;

string hsl = sourceColor.ToHslString();

using CommunityToolkit.Maui.Core.Extensions;

Color sourceColor = Colors.Red;

string hsl = sourceColor.ToHslString();