MICROSOFT Archives - 30 중 2 번째 페이지

[C#/MAUI/.NET6] IMediaPicker 인터페이스 : PickPhotoAsync 메소드를 사용해 갤러리 사진 구하기 (ANDROID)

■ IMediaPicker 인터페이스의 PickPhotoAsync 메소드를 사용해 갤러리 사진을 구하는 방법을 보여준다. ▶ Platforms/Android/AndroidManifest.xml


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/appicon"
        android:roundIcon="@mipmap/appicon_round"
        android:supportsRtl="true" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
</manifest>

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

<application

android:allowBackup="true"

android:icon="@mipmap/appicon"

android:roundIcon="@mipmap/appicon_round"

android:supportsRtl="true" />

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

</manifest>

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <Border
            HorizontalOptions="Center"
            StrokeThickness="5"
            Stroke="Gray">
            <Border.StrokeShape>
                <Rectangle />
            </Border.StrokeShape>
            <Image x:Name="image"
                WidthRequest="300"
                HeightRequest="300"
                Aspect="Fill" />
        </Border>
        <Button x:Name="pickButton"
            HorizontalOptions="Center"
            Text="사진 파일 선택하기" />
    </StackLayout>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage"

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

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

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<Border

HorizontalOptions="Center"

StrokeThickness="5"

Stroke="Gray">

<Border.StrokeShape>

</Border.StrokeShape>

<Image x:Name="image"

WidthRequest="300"

HeightRequest="300"

Aspect="Fill" />

</Border>

<Button x:Name="pickButton"

HorizontalOptions="Center"

Text="사진 파일 선택하기" />

</StackLayout>

</ContentPage>

▶ MainPage.xaml.cs


namespace TestProject;

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

    #region 생성자 - MainPage()

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

        this.pickButton.Clicked += pickButton_Clicked;
    }

    #endregion

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

    #region 사진 파일 선택하기 버튼 클릭시 처리하기 - pickButton_Clicked(sender, e)

    /// <summary>
    /// 사진 파일 선택하기 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void pickButton_Clicked(object sender, EventArgs e)
    {
        if(MediaPicker.Default.IsCaptureSupported)
        {
            FileResult fileResult = await MediaPicker.Default.PickPhotoAsync();

            if(fileResult != null)
            {
                Stream stream = await fileResult.OpenReadAsync();

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

    #endregion
}

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.pickButton.Clicked += pickButton_Clicked;

}

#endregion

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

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

#region 사진 파일 선택하기 버튼 클릭시 처리하기 - pickButton_Clicked(sender, e)

/// <summary>

/// 사진 파일 선택하기 버튼 클릭시 처리하기

/// </summary>

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

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

private async void pickButton_Clicked(object sender, EventArgs e)

{

if(MediaPicker.Default.IsCaptureSupported)

{

FileResult fileResult = await MediaPicker.Default.PickPhotoAsync();

if(fileResult != null)

{

Stream stream = await fileResult.OpenReadAsync();

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

}

#endregion

}

TestProject.zip

[C#/MAUI/.NET6] ProgressBar 클래스 : ProgressTo 메소드 사용하기

■ ProgressBar 클래스의 ProgressTo 메소드를 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="30">
        <ProgressBar x:Name="progressBar"
            HorizontalOptions="Center"
            WidthRequest="300"
            HeightRequest="5"
            ProgressColor="Green" />
        <Button x:Name="increaseButton"
            HorizontalOptions="Center"
            Text="진행률 증가하기" />
    </StackLayout>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage"

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

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

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="30">

<ProgressBar x:Name="progressBar"

HorizontalOptions="Center"

WidthRequest="300"

HeightRequest="5"

ProgressColor="Green" />

<Button x:Name="increaseButton"

HorizontalOptions="Center"

Text="진행률 증가하기" />

</StackLayout>

</ContentPage>

▶ MainPage.xaml.cs


namespace TestProject;

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

    #region 생성자 - MainPage()

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

        this.increaseButton.Clicked += increaseButton_Clicked;
    }

    #endregion

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

    #region 진행률 증가하기 버튼 클릭시 처리하기 - increaseButton_Clicked(sender, e)

    /// <summary>
    /// 진행률 증가하기 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void increaseButton_Clicked(object sender, EventArgs e)
    {
        double progress = this.progressBar.Progress;

        if(progress < 1)
        {
            progress += 0.1d;

            await this.progressBar.ProgressTo(progress, 500, Easing.CubicInOut);
        }
        else
        {
            this.progressBar.Progress = 0d;
        }
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.increaseButton.Clicked += increaseButton_Clicked;

}

#endregion

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

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

#region 진행률 증가하기 버튼 클릭시 처리하기 - increaseButton_Clicked(sender, e)

/// <summary>

/// 진행률 증가하기 버튼 클릭시 처리하기

/// </summary>

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

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

private async void increaseButton_Clicked(object sender, EventArgs e)

{

double progress = this.progressBar.Progress;

if(progress < 1)

{

progress += 0.1d;

await this.progressBar.ProgressTo(progress, 500, Easing.CubicInOut);

}

else

{

this.progressBar.Progress = 0d;

}

#endregion

}

TestProject.zip

[C#/MAUI/.NET6] Button 클래스 : ContentLayout 속성 사용하기

■ Button 클래스의 ContentLayout 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (C#)


Button button = new Button
{
    ContentLayout = new Button.ButtonContentLayout(Button.ButtonContentLayout.ImagePosition.Right, 20),
    ImageSource   = new FileImageSource { File = "button.png" },
    Text          = "Button text"
};

Button button = new Button

{

ContentLayout = new Button.ButtonContentLayout(Button.ButtonContentLayout.ImagePosition.Right, 20),

ImageSource = new FileImageSource { File = "button.png" },

Text = "Button text"

};

[C#/MAUI/.NET6] WebView 클래스 : Source 속성을 사용해 로컬 HTML 표시하기

■ WebView 클래스의 Source 속성을 사용해 로컬 HTML을 표시하는 방법을 보여준다. ▶ 예제 코드 (C#)


WebView webView = new WebView
{
    Source = new HtmlWebViewSource
    {
        Html = @"<HTML><BODY><H1>.NET MAUI</H1><P>Welcome to WebView.</P></BODY></HTML>"
    }
};

WebView webView = new WebView

{

Source = new HtmlWebViewSource

{

Html = @"<HTML><BODY><H1>.NET MAUI</H1><P>Welcome to WebView.</P></BODY></HTML>"

}

};

[C#/MAUI/.NET6] WebView 엘리먼트 : Source 속성을 사용해 로컬 HTML 표시하기

■ WebView 엘리먼트의 Source 속성을 사용해 로컬 HTML을 표시하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<WebView>
    <WebView.Source>
        <HtmlWebViewSource
            Html="&lt;HTML&gt;&lt;BODY&gt;&lt;H1&gt;.NET MAUI&lt;/H1&gt;&lt;P&gt;Welcome to WebView.&lt;/P&gt;&lt;/BODY&gt;&lt;HTML&gt;" />
    </WebView.Source>
</WebView>

<WebView.Source>

<HtmlWebViewSource

Html="<HTML><BODY><H1>.NET MAUI</H1><P>Welcome to WebView.</P></BODY><HTML>" />

</WebView.Source>

</WebView>

[C#/MAUI/.NET6] WebView 클래스 : ATS(Apple Transport Security) 비활성화 설정하기 (IOS)

■ WebView 클래스에서 ATS(Apple Transport Security) 비활성화를 설정하는 방법을 보여준다. ▶ Platforms/iOS/Info.plist (XML)


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...
    <key>NSAppTransportSecurity</key>
        <dict>
            <key>NSAllowsArbitraryLoads</key>
            <true/>
        </dict>
    </key>
    ...
</dict>
</plist>

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

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">

<dict>

...

<key>NSAppTransportSecurity</key>

<dict>

<key>NSAllowsArbitraryLoads</key>

<true/>

</dict>

</key>

...

</dict>

</plist>

[C#/MAUI/.NET6] WebView 클래스 : 특정 도메인의 ATS(Apple Transport Security) 요구 사항 우회 설정하기 (IOS)

■ WebView 클래스에서 특정 도메인의 ATS(Apple Transport Security) 요구 사항을 우회 설정하는 방법을 보여준다. ▶ Platforms/iOS/Info.plist (XML)


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...
    <key>NSAppTransportSecurity</key>
        <dict>
            <key>NSExceptionDomains</key>
            <dict>
                <key>mydomain.com</key>
                <dict>
                <key>NSIncludesSubdomains</key>
                    <true/>
                    <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                    <true/>
                    <key>NSTemporaryExceptionMinimumTLSVersion</key>
                    <string>TLSv1.1</string>
                </dict>
            </dict>
        </dict>
    </key>
    ...
</dict>
</plist>

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

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">

<dict>

...

<key>NSAppTransportSecurity</key>

<dict>

<key>NSExceptionDomains</key>

<dict>

<key>mydomain.com</key>

<dict>

<key>NSIncludesSubdomains</key>

<true/>

<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>

<true/>

<key>NSTemporaryExceptionMinimumTLSVersion</key>

</dict>

</key>

...

</dict>

</plist>

※ 버전 9부터 iOS는

[C#/MAUI/.NET6] WebView 클래스 : Source 속성 사용하기

■ WebView 클래스의 Source 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (C#)


WebView webvView = new WebView
{
    Source = "https://docs.microsoft.com/dotnet/maui"
};

WebView webvView = new WebView

{

Source = "https://docs.microsoft.com/dotnet/maui"

};

[C#/MAUI/.NET6] RoundRectangleGeometry 엘리먼트 사용하기 (프리뷰 버전 오류)

■ RoundRectangleGeometry 엘리먼트를 사용하는 방법을 보여준다. ▶ 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">
    <Path
        HorizontalOptions="Center"
        VerticalOptions="Center"
        WidthRequest="300"
        HeightRequest="300"
        StrokeThickness="10"
        Stroke="Black"
        Fill="Orange"
        BackgroundColor="Yellow"
        Aspect="Fill">
        <Path.Data>
            <RoundRectangleGeometry
                Rect="10,10,150,100"
                CornerRadius="5" />
        </Path.Data>
    </Path>
</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">

<Path

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="300"

HeightRequest="300"

StrokeThickness="10"

Stroke="Black"

Fill="Orange"

BackgroundColor="Yellow"

Aspect="Fill">

<Path.Data>

<RoundRectangleGeometry

Rect="10,10,150,100"

CornerRadius="5" />

</Path.Data>

</Path>

</ContentPage>

※ 프리뷰 버전 테스트시, Path 엘리먼트가 설정된 크기대로 표시되지 않고 화면 전체를 채운

[C#/MAUI/.NET6] Label 클래스 : TextDecorations 속성 사용하기

■ Label 클래스의 TextDecorations 속성을 사용하는 방법을 보여준다. ▶ 예제 코드 (C#)


Label label1 = new Label
{
    TextDecorations = TextDecorations.Underline,
    Text            = "This is underlined text."
};

Label label2 = new Label
{
    TextDecorations = TextDecorations.Strikethrough,
    Text            = "This is text with strikethrough."
};

Label label3 = new Label
{
    TextDecorations = TextDecorations.Underline | TextDecorations.Strikethrough,
    Text            = "This is underlined text with strikethrough."
};

Label label1 = new Label

{

TextDecorations = TextDecorations.Underline,

Text = "This is underlined text."

};

Label label2 = new Label

{

TextDecorations = TextDecorations.Strikethrough,

Text = "This is text with strikethrough."

};

Label label3 = new Label

{

TextDecorations = TextDecorations.Underline | TextDecorations.Strikethrough,

Text = "This is underlined text with strikethrough."

};

[C#/MAUI/.NET6] ContentPage 클래스 : Navigation 속성을 사용해 모달 페이지 이동하기

■ ContentPage 클래스의 Navigation 속성을 사용해 모달 페이지로 이동하는 방법을 보여준다. ▶ 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"
    Title="메인 페이지"
    BackgroundColor="White">
    <Button x:Name="navigateButton"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Text="모달 페이지 이동" />
</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"

Title="메인 페이지"

BackgroundColor="White">

<Button x:Name="navigateButton"

HorizontalOptions="Center"

VerticalOptions="Center"

Text="모달 페이지 이동" />

</ContentPage>

▶ MainPage.xaml.cs


namespace TestProject;

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

    #region 생성자 - MainPage()

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

        this.navigateButton.Clicked += navigateButton_Clicked;
	}

    #endregion

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

    #region 두번째 페이지 이동 버튼 클릭시 처리하기 - navigateButton_Clicked(sender, e)

    /// <summary>
    /// 두번째 페이지 이동 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void navigateButton_Clicked(object sender, EventArgs e)
    {
        await Navigation.PushModalAsync(new ModalPage());
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.navigateButton.Clicked += navigateButton_Clicked;

}

#endregion

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

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

#region 두번째 페이지 이동 버튼 클릭시 처리하기 - navigateButton_Clicked(sender, e)

/// <summary>

/// 두번째 페이지 이동 버튼 클릭시 처리하기

/// </summary>

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

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

private async void navigateButton_Clicked(object sender, EventArgs e)

{

await Navigation.PushModalAsync(new ModalPage());

}

#endregion

}

▶ ModalPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.ModalPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="모달 페이지"
    BackgroundColor="White">
    <Button x:Name="navigateButton"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Text="메인 페이지 이동" />
</ContentPage>

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

<ContentPage x:Class="TestProject.ModalPage"

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

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

Title="모달 페이지"

BackgroundColor="White">

<Button x:Name="navigateButton"

HorizontalOptions="Center"

VerticalOptions="Center"

Text="메인 페이지 이동" />

</ContentPage>

▶ ModalPage.xaml.cs

[C#/MAUI/.NET6] FlexLayout 엘리먼트 : Shrink 첨부 속성 사용하기 (프리뷰 버전 오류)

■ FlexLayout 엘리먼트의 Shrink 첨부 속성을 사용하는 방법을 보여준다. (프리뷰 버전 오류) ▶ 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">
    <Frame
        Margin="10"
        CornerRadius="0"
        BorderColor="Black"
        Padding="2,2,2,2">
        <FlexLayout
            Direction="Column"
            AlignItems="Center">
            <BoxView
                FlexLayout.Shrink="1"
                WidthRequest="100"
                HeightRequest="100"
                Color="Red" />
            <BoxView
                FlexLayout.Shrink="1"
                WidthRequest="100"
                HeightRequest="100"
                Color="Green" />
            <BoxView
                FlexLayout.Shrink="1"
                WidthRequest="100"
                HeightRequest="100"
                Color="Blue" />
            <BoxView
                FlexLayout.Shrink="1"
                WidthRequest="100"
                HeightRequest="100"
                Color="Red" />
            <BoxView
                FlexLayout.Shrink="1"
                WidthRequest="100"
                HeightRequest="100"
                Color="Green" />
            <BoxView
                FlexLayout.Shrink="1"
                WidthRequest="100"
                HeightRequest="100"
                Color="Blue" />
            <BoxView
                FlexLayout.Shrink="1"
                WidthRequest="100"
                HeightRequest="100"
                Color="Red" />
            <BoxView
                FlexLayout.Shrink="1"
                WidthRequest="100"
                HeightRequest="100"
                Color="Green" />
            <BoxView
                FlexLayout.Shrink="1"
                WidthRequest="100"
                HeightRequest="100"
                Color="Blue" />
        </FlexLayout>
    </Frame>
</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">

<Frame

Margin="10"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

AlignItems="Center">

<BoxView

FlexLayout.Shrink="1"

WidthRequest="100"

HeightRequest="100"

Color="Red" />

<BoxView

FlexLayout.Shrink="1"

WidthRequest="100"

HeightRequest="100"

Color="Green" />

<BoxView

FlexLayout.Shrink="1"

WidthRequest="100"

HeightRequest="100"

Color="Blue" />

<BoxView

FlexLayout.Shrink="1"

WidthRequest="100"

HeightRequest="100"

Color="Red" />

<BoxView

FlexLayout.Shrink="1"

WidthRequest="100"

HeightRequest="100"

Color="Green" />

<BoxView

FlexLayout.Shrink="1"

WidthRequest="100"

HeightRequest="100"

Color="Blue" />

<BoxView

FlexLayout.Shrink="1"

WidthRequest="100"

HeightRequest="100"

Color="Red" />

<BoxView

FlexLayout.Shrink="1"

WidthRequest="100"

HeightRequest="100"

Color="Green" />

<BoxView

FlexLayout.Shrink="1"

WidthRequest="100"

HeightRequest="100"

Color="Blue" />

</FlexLayout>

</Frame>

</ContentPage>

※ 프리뷰 버전 테스트시, Shirnk 첨부 속성을

[C#/MAUI/.NET6] FlexLayout 엘리먼트 : Grow 첨부 속성을 사용해 자식의 사용 가능 공간 크기 설정하기

■ FlexLayout 엘리먼트의 Grow 첨부 속성을 사용해 자식의 사용 가능 공간 크기를 설정하는 방법을 보여준다. ▶ 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">
    <Frame
        Margin="10"
        CornerRadius="0"
        BorderColor="Black"
        Padding="2,2,2,2">
        <FlexLayout
            Direction="Column"
            AlignItems="Stretch">
            <Label
                HorizontalOptions="Fill"
                HeightRequest="100"
                BackgroundColor="Red"
                HorizontalTextAlignment="Center"
                VerticalTextAlignment="Center"
                TextColor="White"
                Text="레이블 1" />
            <Label
                HorizontalOptions="Fill"
                FlexLayout.Grow="1"
                BackgroundColor="Green"
                HorizontalTextAlignment="Center"
                VerticalTextAlignment="Center"
                TextColor="White"
                Text="레이블 2" />
            <Label
                HorizontalOptions="Fill"
                HeightRequest="100"
                BackgroundColor="Blue"
                HorizontalTextAlignment="Center"
                VerticalTextAlignment="Center"
                TextColor="White"
                Text="레이블 3" />
        </FlexLayout>
    </Frame>
</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">

<Frame

Margin="10"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

AlignItems="Stretch">

<Label

HorizontalOptions="Fill"

HeightRequest="100"

BackgroundColor="Red"

HorizontalTextAlignment="Center"

VerticalTextAlignment="Center"

TextColor="White"

Text="레이블 1" />

<Label

HorizontalOptions="Fill"

FlexLayout.Grow="1"

BackgroundColor="Green"

HorizontalTextAlignment="Center"

VerticalTextAlignment="Center"

TextColor="White"

Text="레이블 2" />

<Label

HorizontalOptions="Fill"

HeightRequest="100"

BackgroundColor="Blue"

HorizontalTextAlignment="Center"

VerticalTextAlignment="Center"

TextColor="White"

Text="레이블 3" />

</FlexLayout>

</Frame>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] FlexLayout 엘리먼트 : Basis 첨부 속성을 사용해 개별 자식의 초기 기본 축 기준 공간 크기 설정하기

■ FlexLayout 엘리먼트의 Basis 첨부 속성을 사용해 개별 자식의 초기 기본 축 기준 공간 크기를 설정하는 방법을 보여준다. ▶ 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">
    <Frame
        Margin="10"
        CornerRadius="0"
        BorderColor="Black"
        Padding="2,2,2,2">
        <FlexLayout
            Direction="Column"
            AlignItems="Center"
            JustifyContent="Center">
            <BoxView
                FlexLayout.Basis="100"
                WidthRequest="100"
                HeightRequest="100"
                Color="Red" />
            <BoxView
                FlexLayout.Basis="150"
                WidthRequest="100"
                HeightRequest="100"
                Color="Green" />
            <BoxView
                FlexLayout.Basis="200"
                WidthRequest="100"
                HeightRequest="100"
                Color="Blue" />
            <BoxView
                FlexLayout.Basis="250"
                WidthRequest="100"
                HeightRequest="100"
                Color="Magenta" />
        </FlexLayout>
    </Frame>
</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">

<Frame

Margin="10"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

AlignItems="Center"

JustifyContent="Center">

<BoxView

FlexLayout.Basis="100"

WidthRequest="100"

HeightRequest="100"

Color="Red" />

<BoxView

FlexLayout.Basis="150"

WidthRequest="100"

HeightRequest="100"

Color="Green" />

<BoxView

FlexLayout.Basis="200"

WidthRequest="100"

HeightRequest="100"

Color="Blue" />

<BoxView

FlexLayout.Basis="250"

WidthRequest="100"

HeightRequest="100"

Color="Magenta" />

</FlexLayout>

</Frame>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] FlexLayout 엘리먼트 : AlignSelf 첨부 속성을 사용해 교차 축을 따라 특정 자식에 대한 자식 사이와 주위 공간 배분하기

■ FlexLayout 엘리먼트의 AlignSelf 첨부 속성을 사용해 교차 축을 따라 특정 자식에 대한 자식 사이와 주위 공간을 배분하는 방법을 보여준다. ▶ MainPage.xaml

[C#/MAUI/.NET6] FlexLayout 엘리먼트 : AlignContent 속성을 사용해 여러 줄에 배치된 자식 사이 및 공간 배분하기

■ FlexLayout 엘리먼트의 AlignContent 속성을 사용해 여러 줄에 배치된 자식 사이 및 공간을 배분하는 방법을 보여준다. ▶ 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">
    <ScrollView
        Margin="10"
        Orientation="Vertical">
        <StackLayout Spacing="10">
            <Label
                HorizontalOptions="Start"
                Text="AlignContent 속성 : Start" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    Wrap="Wrap"
                    AlignContent="Start">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="AlignContent 속성 : Center" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    Wrap="Wrap"
                    AlignContent="Center">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="AlignContent 속성 : End" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    Wrap="Wrap"
                    AlignContent="End">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="AlignContent 속성 : SpaceAround" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    Wrap="Wrap"
                    AlignContent="SpaceAround">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="AlignContent 속성 : SpaceBetween" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    Wrap="Wrap"
                    AlignContent="SpaceBetween">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="JustifyContent 속성 : SpaceEvenly" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    Wrap="Wrap"
                    AlignContent="SpaceEvenly">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
        </StackLayout>
    </ScrollView>
</ContentPage>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

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

<ScrollView

Margin="10"

Orientation="Vertical">

<Label

HorizontalOptions="Start"

Text="AlignContent 속성 : Start" />

<Frame

Margin="0,10,0,0"

HeightRequest="200"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

Wrap="Wrap"

AlignContent="Start">

</FlexLayout>

</Frame>

<Label

HorizontalOptions="Start"

Margin="0,10,0,0"

Text="AlignContent 속성 : Center" />

<Frame

Margin="0,10,0,0"

HeightRequest="200"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

Wrap="Wrap"

AlignContent="Center">

</FlexLayout>

</Frame>

<Label

HorizontalOptions="Start"

Margin="0,10,0,0"

Text="AlignContent 속성 : End" />

<Frame

Margin="0,10,0,0"

HeightRequest="200"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

Wrap="Wrap"

AlignContent="End">

</FlexLayout>

</Frame>

<Label

HorizontalOptions="Start"

Margin="0,10,0,0"

Text="AlignContent 속성 : SpaceAround" />

<Frame

Margin="0,10,0,0"

HeightRequest="200"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

Wrap="Wrap"

AlignContent="SpaceAround">

</FlexLayout>

</Frame>

<Label

HorizontalOptions="Start"

Margin="0,10,0,0"

Text="AlignContent 속성 : SpaceBetween" />

<Frame

Margin="0,10,0,0"

HeightRequest="200"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

Wrap="Wrap"

AlignContent="SpaceBetween">

</FlexLayout>

</Frame>

<Label

HorizontalOptions="Start"

Margin="0,10,0,0"

Text="JustifyContent 속성 : SpaceEvenly" />

<Frame

Margin="0,10,0,0"

HeightRequest="200"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

Wrap="Wrap"

AlignContent="SpaceEvenly">

</FlexLayout>

</Frame>

</StackLayout>

</ScrollView>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] FlexLayout 엘리먼트 : JustifyContent 속성을 사용해 기본 축을 따라 자식 사이 및 주위 공간 배분하기

■ FlexLayout 엘리먼트의 JustifyContent 속성을 사용해 기본 축을 따라 자식 사이 및 주위 공간을 배분하는 방법을 보여준다. ▶ 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">
    <ScrollView
        Margin="10"
        Orientation="Vertical">
        <StackLayout Spacing="10">
            <Label
                HorizontalOptions="Start"
                Text="JustifyContent 속성 : Start" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    AlignItems="Center"
                    JustifyContent="Start">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="JustifyContent 속성 : Center" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    AlignItems="Center"
                    JustifyContent="Center">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="JustifyContent 속성 : End" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    AlignItems="Center"
                    JustifyContent="End">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="JustifyContent 속성 : SpaceAround" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    AlignItems="Center"
                    JustifyContent="SpaceAround">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="JustifyContent 속성 : SpaceBetween" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    AlignItems="Center"
                    JustifyContent="SpaceBetween">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="JustifyContent 속성 : SpaceEvenly" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    AlignItems="Center"
                    JustifyContent="SpaceEvenly">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
        </StackLayout>
    </ScrollView>
</ContentPage>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

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

<ScrollView

Margin="10"

Orientation="Vertical">

<Label

HorizontalOptions="Start"

Text="JustifyContent 속성 : Start" />

<Frame

Margin="0,10,0,0"

HeightRequest="200"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

AlignItems="Center"

JustifyContent="Start">

</FlexLayout>

</Frame>

<Label

HorizontalOptions="Start"

Margin="0,10,0,0"

Text="JustifyContent 속성 : Center" />

<Frame

Margin="0,10,0,0"

HeightRequest="200"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

AlignItems="Center"

JustifyContent="Center">

</FlexLayout>

</Frame>

<Label

HorizontalOptions="Start"

Margin="0,10,0,0"

Text="JustifyContent 속성 : End" />

<Frame

Margin="0,10,0,0"

HeightRequest="200"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

AlignItems="Center"

JustifyContent="End">

</FlexLayout>

</Frame>

<Label

HorizontalOptions="Start"

Margin="0,10,0,0"

Text="JustifyContent 속성 : SpaceAround" />

<Frame

Margin="0,10,0,0"

HeightRequest="200"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

AlignItems="Center"

JustifyContent="SpaceAround">

</FlexLayout>

</Frame>

<Label

HorizontalOptions="Start"

Margin="0,10,0,0"

Text="JustifyContent 속성 : SpaceBetween" />

<Frame

Margin="0,10,0,0"

HeightRequest="200"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

AlignItems="Center"

JustifyContent="SpaceBetween">

</FlexLayout>

</Frame>

<Label

HorizontalOptions="Start"

Margin="0,10,0,0"

Text="JustifyContent 속성 : SpaceEvenly" />

<Frame

Margin="0,10,0,0"

HeightRequest="200"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

AlignItems="Center"

JustifyContent="SpaceEvenly">

</FlexLayout>

</Frame>

</StackLayout>

</ScrollView>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] FlexLayout 엘리먼트 : AlignItems 속성을 사용해 교차 축을 따라 자식 사이 및 주위 공간 배분하기

■ FlexLayout 엘리먼트의 AlignItems 속성을 사용해 교차 축을 따라 자식 사이 및 주위 공간을 배분하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Grid
        Margin="10"
        RowDefinitions="Auto,*,Auto,*,Auto,*,Auto,*">
        <Label Grid.Row="0"
            HorizontalOptions="Start"
            Text="AlignItems 속성 : Start" />
        <Frame Grid.Row="1"
            Margin="0,10,0,0"
            CornerRadius="0"
            BorderColor="Black"
            Padding="2,2,2,2">
            <ScrollView Orientation="Vertical">
                <FlexLayout
                    Direction="Column"
                    AlignItems="Start">
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                </FlexLayout>
            </ScrollView>
        </Frame>
        <Label Grid.Row="2"
            HorizontalOptions="Start"
            Margin="0,10,0,0"
            Text="AlignItems 속성 : Center" />
        <Frame Grid.Row="3"
            Margin="0,10,0,0"
            CornerRadius="0"
            BorderColor="Black"
            Padding="2,2,2,2">
            <ScrollView Orientation="Vertical">
                <FlexLayout
                    Direction="Column"
                    AlignItems="Center">
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                </FlexLayout>
            </ScrollView>
        </Frame>
        <Label Grid.Row="4"
            HorizontalOptions="Start"
            Margin="0,10,0,0"
            Text="AlignItems 속성 : End" />
        <Frame Grid.Row="5"
            Margin="0,10,0,0"
            CornerRadius="0"
            BorderColor="Black"
            Padding="2,2,2,2">
            <ScrollView Orientation="Vertical">
                <FlexLayout
                    Direction="Column"
                    AlignItems="End">
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                </FlexLayout>
            </ScrollView>
        </Frame>
        <Label Grid.Row="6"
            HorizontalOptions="Start"
            Margin="0,10,0,0"
            Text="AlignItems 속성 : Stretch" />
        <Frame Grid.Row="7"
            Margin="0,10,0,0"
            CornerRadius="0"
            BorderColor="Black"
            Padding="2,2,2,2">
            <ScrollView Orientation="Vertical">
                <FlexLayout
                    Direction="Column"
                    AlignItems="Stretch">
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="50" HeightRequest="50" Color="Magenta" />
                </FlexLayout>
            </ScrollView>
        </Frame>
    </Grid>
</ContentPage>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

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

<ContentPage x:Class="TestProject.MainPage"

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

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

<Grid

Margin="10"

RowDefinitions="Auto,*,Auto,*,Auto,*,Auto,*">

<Label Grid.Row="0"

HorizontalOptions="Start"

Text="AlignItems 속성 : Start" />

<Frame Grid.Row="1"

Margin="0,10,0,0"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

AlignItems="Start">

</FlexLayout>

</ScrollView>

</Frame>

<Label Grid.Row="2"

HorizontalOptions="Start"

Margin="0,10,0,0"

Text="AlignItems 속성 : Center" />

<Frame Grid.Row="3"

Margin="0,10,0,0"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

AlignItems="Center">

</FlexLayout>

</ScrollView>

</Frame>

<Label Grid.Row="4"

HorizontalOptions="Start"

Margin="0,10,0,0"

Text="AlignItems 속성 : End" />

<Frame Grid.Row="5"

Margin="0,10,0,0"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

AlignItems="End">

</FlexLayout>

</ScrollView>

</Frame>

<Label Grid.Row="6"

HorizontalOptions="Start"

Margin="0,10,0,0"

Text="AlignItems 속성 : Stretch" />

<Frame Grid.Row="7"

Margin="0,10,0,0"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

AlignItems="Stretch">

</FlexLayout>

</ScrollView>

</Frame>

</Grid>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] FlexLayout 엘리먼트 : Wrap 속성을 사용해 자식을 여러 줄로 배치하기

■ FlexLayout 엘리먼트의 Wrap 속성을 사용해 자식을 여러 줄로 배치하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Grid
        Margin="10"
        RowDefinitions="Auto,*,Auto,*">
        <Label Grid.Row="0"
            HorizontalOptions="Start"
            Margin="0,10,0,0"
            Text="Direction 속성 : Column, Wrap 속성 : Wrap" />
        <Frame Grid.Row="1"
            Margin="0,10,0,0"
            CornerRadius="0"
            BorderColor="Black"
            Padding="2,2,2,2">
            <ScrollView Orientation="Horizontal">
                <FlexLayout
                    Direction="Column"
                    Wrap="Wrap">
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Magenta" />
                </FlexLayout>
            </ScrollView>
        </Frame>
        <Label Grid.Row="2"
            HorizontalOptions="Start"
            Margin="0,10,0,0"
            Text="Direction 속성 : Row, Wrap 속성 : Wrap" />
        <Frame Grid.Row="3"
            Margin="0,10,0,0"
            CornerRadius="0"
            BorderColor="Black"
            Padding="2,2,2,2">
            <ScrollView Orientation="Vertical">
                <FlexLayout
                    Direction="Row"
                    Wrap="Wrap">
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="100" HeightRequest="100" Color="Magenta" />
                </FlexLayout>
            </ScrollView>
        </Frame>
    </Grid>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage"

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

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

<Grid

Margin="10"

RowDefinitions="Auto,*,Auto,*">

<Label Grid.Row="0"

HorizontalOptions="Start"

Margin="0,10,0,0"

Text="Direction 속성 : Column, Wrap 속성 : Wrap" />

<Frame Grid.Row="1"

Margin="0,10,0,0"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Column"

Wrap="Wrap">

</FlexLayout>

</ScrollView>

</Frame>

<Label Grid.Row="2"

HorizontalOptions="Start"

Margin="0,10,0,0"

Text="Direction 속성 : Row, Wrap 속성 : Wrap" />

<Frame Grid.Row="3"

Margin="0,10,0,0"

CornerRadius="0"

BorderColor="Black"

Padding="2,2,2,2">

<FlexLayout

Direction="Row"

Wrap="Wrap">

</FlexLayout>

</ScrollView>

</Frame>

</Grid>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] Easing 클래스 : 커스텀 이징(Easing) 함수 사용하기

■ Easing 클래스에서 커스텀 이징(Easing) 함수를 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Grid
        Margin="10"
        RowDefinitions="*,Auto">
        <Image x:Name="image" Grid.Row="0"
            WidthRequest="250"
            HeightRequest="310"
            Source="dotnet_bot.png" />
        <Button x:Name="animationButton" Grid.Row="1"
            Margin="0,10,0,0"
            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">

<Grid

Margin="10"

RowDefinitions="*,Auto">

<Image x:Name="image" Grid.Row="0"

WidthRequest="250"

HeightRequest="310"

Source="dotnet_bot.png" />

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

Margin="0,10,0,0"

Text="애니메이션" />

</Grid>

</ContentPage>

▶ MainPage.xaml.cs


namespace TestProject;

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

    #region 생성자 - MainPage()

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

        this.animationButton.Clicked += animationButton_Clicked;
    }

    #endregion

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

    #region 애니메이션 버튼 클릭시 처리하기 - fadeInButton_Clicked(sender, e)

    /// <summary>
    /// 애니메이션 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void animationButton_Clicked(object sender, EventArgs e)
    {
        Func<double, double> easeFunction = t => 9 * t * t * t - 13.5 * t * t + 5.5 * t;

        await image.TranslateTo(0, 200, 2000, easeFunction);

        this.image.TranslationX = 0;
        this.image.TranslationY = 0;
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.animationButton.Clicked += animationButton_Clicked;

}

#endregion

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

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

#region 애니메이션 버튼 클릭시 처리하기 - fadeInButton_Clicked(sender, e)

/// <summary>

/// 애니메이션 버튼 클릭시 처리하기

/// </summary>

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

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

private async void animationButton_Clicked(object sender, EventArgs e)

{

Func<double, double> easeFunction = t => 9 * t * t * t - 13.5 * t * t + 5.5 * t;

await image.TranslateTo(0, 200, 2000, easeFunction);

this.image.TranslationX = 0;

this.image.TranslationY = 0;

}

#endregion

}

TestProject.zip

[C#/MAUI/.NET6] iOS 복수 윈도우 권한 설정하기 (IOS)

■ iOS에서 복수 윈도우 권한을 설정하는 방법을 보여준다. ▶ Platforms/iOS/Info.plist (XML)


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...
    <key>UIApplicationSupportsMultipleScenes</key>
    <true />
    <key>UISceneConfigurations</key>
    <dict>
        <key>UIWindowSceneSessionRoleApplication</key>
        <array>
            <dict>
                <key>UISceneConfigurationName</key>
                <string>__MAUI_DEFAULT_SCENE_CONFIGURATION__</string>
                <key>UISceneDelegateClassName</key>
                <string>SceneDelegate</string>
            </dict>
        </array>
    </dict>
    ...
</dict>
</plist>

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

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">

<dict>

...

<key>UIApplicationSupportsMultipleScenes</key>

<key>UISceneConfigurations</key>

<dict>

<key>UIWindowSceneSessionRoleApplication</key>

<array>

<dict>

<key>UISceneConfigurationName</key>

<string>__MAUI_DEFAULT_SCENE_CONFIGURATION__</string>

<key>UISceneDelegateClassName</key>

<string>SceneDelegate</string>

</dict>

</array>

</dict>

...

</dict>

</plist>

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

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


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <Entry
            HorizontalOptions="Center"
            WidthRequest="300"
            Placeholder="이름을 입력해 주시기 바랍니다.">
            <Entry.Triggers>
                <Trigger
                    TargetType="Entry"
                    Property="IsFocused"
                    Value="True">
                    <Setter Property="FontAttributes" Value="Bold" />
                    <Setter Property="TextColor"      Value="Blue" />
                </Trigger>
                <Trigger
                    TargetType="Entry"
                    Property="IsFocused"
                    Value="False">
                    <Setter Property="FontAttributes" Value="None"  />
                    <Setter Property="TextColor"      Value="Black" />
                </Trigger>
            </Entry.Triggers>
        </Entry>
        <Entry
            HorizontalOptions="Center"
            WidthRequest="300"
            Placeholder="장소를 입력해 주시기 바랍니다.">
            <Entry.Triggers>
                <Trigger
                    TargetType="Entry"
                    Property="IsFocused"
                    Value="True">
                    <Setter Property="FontAttributes" Value="Bold" />
                    <Setter Property="TextColor"      Value="Blue" />
                </Trigger>
                <Trigger
                    TargetType="Entry"
                    Property="IsFocused"
                    Value="False">
                    <Setter Property="FontAttributes" Value="None"  />
                    <Setter Property="TextColor"      Value="Black" />
                </Trigger>
            </Entry.Triggers>
        </Entry>
    </StackLayout>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage"

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

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

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<Entry

HorizontalOptions="Center"

WidthRequest="300"

Placeholder="이름을 입력해 주시기 바랍니다.">

<Entry.Triggers>

<Trigger

TargetType="Entry"

Property="IsFocused"

Value="True">

</Trigger>

<Trigger

TargetType="Entry"

Property="IsFocused"

Value="False">

</Trigger>

</Entry.Triggers>

</Entry>

<Entry

HorizontalOptions="Center"

WidthRequest="300"

Placeholder="장소를 입력해 주시기 바랍니다.">

<Entry.Triggers>

<Trigger

TargetType="Entry"

Property="IsFocused"

Value="True">

</Trigger>

<Trigger

TargetType="Entry"

Property="IsFocused"

Value="False">

</Trigger>

</Entry.Triggers>

</Entry>

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] DataTemplateSelector 클래스 : 데이터 템플리트 선택자 사용하기

■ DataTemplateSelector 클래스에서 데이터 템플리트 선택자를 사용하는 방법을 보여준다. ▶ PersonModel.cs


namespace TestProject
{
    /// <summary>
    /// 사람 모델
    /// </summary>
    public class PersonModel
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 이름 - Name

        /// <summary>
        /// 이름
        /// </summary>
        public string Name { get; set; }

        #endregion
        #region 나이 - Age

        /// <summary>
        /// 나이
        /// </summary>
        public int Age { get; set; }

        #endregion
        #region 위치 - Location

        /// <summary>
        /// 위치
        /// </summary>
        public string Location { get; set; }

        #endregion
    }
}

namespace TestProject

{

/// <summary>

/// 사람 모델

/// </summary>

public class PersonModel

{

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

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

#region 이름 - Name

/// <summary>

/// 이름

/// </summary>

public string Name { get; set; }

#endregion

#region 나이 - Age

/// <summary>

/// 나이

/// </summary>

public int Age { get; set; }

#endregion

#region 위치 - Location

/// <summary>

/// 위치

/// </summary>

public string Location { get; set; }

#endregion

}

▶ PersonDataTemplateSelector.cs


namespace TestProject;

/// <summary>
/// 사람 데이터 템플리트 선택자
/// </summary>
public class PersonDataTemplateSelector : DataTemplateSelector
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 젊은 사람 템플리트 - YoungPersonTemplate

    /// <summary>
    /// 젊은 사람 템플리트
    /// </summary>
    public DataTemplate YoungPersonTemplate { get; set; }

    #endregion
    #region 늙은 사람 템플리트 - OldPersonTemplate

    /// <summary>
    /// 늙은 사람 템플리트
    /// </summary>
    public DataTemplate OldPersonTemplate { get; set; }

    #endregion

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

    #region 템플리트 선택시 처리하기 - OnSelectTemplate(item, container)

    /// <summary>
    /// 템플리트 선택시 처리하기
    /// </summary>
    /// <param name="item">항목</param>
    /// <param name="container">컨테이너</param>
    /// <returns>선택 데이터 템플리트</returns>
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return ((PersonModel)item).Age < 35 ? YoungPersonTemplate : OldPersonTemplate;
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 사람 데이터 템플리트 선택자

/// </summary>

public class PersonDataTemplateSelector : DataTemplateSelector

{

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

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

#region 젊은 사람 템플리트 - YoungPersonTemplate

/// <summary>

/// 젊은 사람 템플리트

/// </summary>

public DataTemplate YoungPersonTemplate { get; set; }

#endregion

#region 늙은 사람 템플리트 - OldPersonTemplate

/// <summary>

/// 늙은 사람 템플리트

/// </summary>

public DataTemplate OldPersonTemplate { get; set; }

#endregion

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

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 템플리트 선택시 처리하기 - OnSelectTemplate(item, container)

/// <summary>

/// 템플리트 선택시 처리하기

/// </summary>

/// <param name="item">항목</param>

/// <param name="container">컨테이너</param>

/// <returns>선택 데이터 템플리트</returns>

protected override DataTemplate OnSelectTemplate(object item, BindableObject container)

{

return ((PersonModel)item).Age < 35 ? YoungPersonTemplate : OldPersonTemplate;

}

#endregion

}

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <ContentPage.Resources>
        <DataTemplate x:Key="YoungPersonDataTemplateKey">
             <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0"
                    FontAttributes="Bold"
                    Text="{Binding Name}" />
                <Label Grid.Column="1"
                    TextColor="Blue"
                    Text="{Binding Age}" />
                <Label Grid.Column="2"
                    HorizontalTextAlignment="End"
                    Text="{Binding Location}" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="OldPersonDataTemplateKey">
             <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0"
                    FontAttributes="Bold"
                    Text="{Binding Name}" />
                <Label Grid.Column="1"
                    TextColor="Red"
                    Text="{Binding Age}" />
                <Label Grid.Column="2"
                    HorizontalTextAlignment="End"
                    Text="{Binding Location}" />
            </Grid>
        </DataTemplate>
        <local:PersonDataTemplateSelector x:Key="PersonDataTemplateSelectorKey"
            YoungPersonTemplate="{StaticResource YoungPersonDataTemplateKey}"
            OldPersonTemplate="{StaticResource OldPersonDataTemplateKey}" />
    </ContentPage.Resources>
    <CollectionView
        ItemTemplate="{StaticResource PersonDataTemplateSelectorKey}"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Margin="10">
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type local:PersonModel}">
                <local:PersonModel Name="Steve" Age="21" Location="USA"     />
                <local:PersonModel Name="John"  Age="37" Location="USA"     />
                <local:PersonModel Name="Tom"   Age="42" Location="UK"      />
                <local:PersonModel Name="Lucas" Age="29" Location="Germany" />
                <local:PersonModel Name="Tariq" Age="39" Location="UK"      />
                <local:PersonModel Name="Jane"  Age="30" Location="USA"     />
            </x:Array>
        </CollectionView.ItemsSource>
    </CollectionView>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage"

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

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

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

<ContentPage.Resources>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Label Grid.Column="0"

FontAttributes="Bold"

Text="{Binding Name}" />

<Label Grid.Column="1"

TextColor="Blue"

Text="{Binding Age}" />

<Label Grid.Column="2"

HorizontalTextAlignment="End"

Text="{Binding Location}" />

</Grid>

</DataTemplate>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Label Grid.Column="0"

FontAttributes="Bold"

Text="{Binding Name}" />

<Label Grid.Column="1"

TextColor="Red"

Text="{Binding Age}" />

<Label Grid.Column="2"

HorizontalTextAlignment="End"

Text="{Binding Location}" />

</Grid>

</DataTemplate>

<local:PersonDataTemplateSelector x:Key="PersonDataTemplateSelectorKey"

YoungPersonTemplate="{StaticResource YoungPersonDataTemplateKey}"

OldPersonTemplate="{StaticResource OldPersonDataTemplateKey}" />

</ContentPage.Resources>

<CollectionView

ItemTemplate="{StaticResource PersonDataTemplateSelectorKey}"

HorizontalOptions="Center"

VerticalOptions="Center"

Margin="10">

<CollectionView.ItemsSource>

<x:Array Type="{x:Type local:PersonModel}">

<local:PersonModel Name="Steve" Age="21" Location="USA" />

<local:PersonModel Name="John" Age="37" Location="USA" />

<local:PersonModel Name="Tom" Age="42" Location="UK" />

<local:PersonModel Name="Lucas" Age="29" Location="Germany" />

<local:PersonModel Name="Tariq" Age="39" Location="UK" />

<local:PersonModel Name="Jane" Age="30" Location="USA" />

</x:Array>

</CollectionView.ItemsSource>

</CollectionView>

</ContentPage>

TestProject.zip

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

■ DataTemplate 엘리먼트를 사용해 리소스로 데이터 템플리트를 사용하는 방법을 보여준다. ▶ PersonModel.cs


namespace TestProject
{
    /// <summary>
    /// 사람 모델
    /// </summary>
    public class PersonModel
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 이름 - Name

        /// <summary>
        /// 이름
        /// </summary>
        public string Name { get; set; }

        #endregion
        #region 나이 - Age

        /// <summary>
        /// 나이
        /// </summary>
        public int Age { get; set; }

        #endregion
        #region 위치 - Location

        /// <summary>
        /// 위치
        /// </summary>
        public string Location { get; set; }

        #endregion
    }
}

namespace TestProject

{

/// <summary>

/// 사람 모델

/// </summary>

public class PersonModel

{

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

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

#region 이름 - Name

/// <summary>

/// 이름

/// </summary>

public string Name { get; set; }

#endregion

#region 나이 - Age

/// <summary>

/// 나이

/// </summary>

public int Age { get; set; }

#endregion

#region 위치 - Location

/// <summary>

/// 위치

/// </summary>

public string Location { get; set; }

#endregion

}

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <ContentPage.Resources>
        <DataTemplate x:Key="PersonDataTemplateKey">
             <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0"
                    FontAttributes="Bold"
                    Text="{Binding Name}" />
                <Label Grid.Column="1"
                    Text="{Binding Age}" />
                <Label Grid.Column="2"
                    HorizontalTextAlignment="End"
                    Text="{Binding Location}" />
            </Grid>
        </DataTemplate>
    </ContentPage.Resources>
    <CollectionView
        ItemTemplate="{StaticResource PersonDataTemplateKey}"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Margin="10">
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type local:PersonModel}">
                <local:PersonModel Name="Steve" Age="21" Location="USA"     />
                <local:PersonModel Name="John"  Age="37" Location="USA"     />
                <local:PersonModel Name="Tom"   Age="42" Location="UK"      />
                <local:PersonModel Name="Lucas" Age="29" Location="Germany" />
                <local:PersonModel Name="Tariq" Age="39" Location="UK"      />
                <local:PersonModel Name="Jane"  Age="30" Location="USA"     />
            </x:Array>
        </CollectionView.ItemsSource>
    </CollectionView>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage"

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

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

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

<ContentPage.Resources>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Label Grid.Column="0"

FontAttributes="Bold"

Text="{Binding Name}" />

<Label Grid.Column="1"

Text="{Binding Age}" />

<Label Grid.Column="2"

HorizontalTextAlignment="End"

Text="{Binding Location}" />

</Grid>

</DataTemplate>

</ContentPage.Resources>

<CollectionView

ItemTemplate="{StaticResource PersonDataTemplateKey}"

HorizontalOptions="Center"

VerticalOptions="Center"

Margin="10">

<CollectionView.ItemsSource>

<x:Array Type="{x:Type local:PersonModel}">

<local:PersonModel Name="Steve" Age="21" Location="USA" />

<local:PersonModel Name="John" Age="37" Location="USA" />

<local:PersonModel Name="Tom" Age="42" Location="UK" />

<local:PersonModel Name="Lucas" Age="29" Location="Germany" />

<local:PersonModel Name="Tariq" Age="39" Location="UK" />

<local:PersonModel Name="Jane" Age="30" Location="USA" />

</x:Array>

</CollectionView.ItemsSource>

</CollectionView>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] DataTemplate 엘리먼트 : 타입을 갖는 데이터 템플리트 사용하기

■ DataTemplate 엘리먼트를 사용해 타입을 갖는 데이터 템플리트를 사용하는 방법을 보여준다. ▶ PersonModel.cs


namespace TestProject
{
    /// <summary>
    /// 사람 모델
    /// </summary>
    public class PersonModel
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 이름 - Name

        /// <summary>
        /// 이름
        /// </summary>
        public string Name { get; set; }

        #endregion
        #region 나이 - Age

        /// <summary>
        /// 나이
        /// </summary>
        public int Age { get; set; }

        #endregion
        #region 위치 - Location

        /// <summary>
        /// 위치
        /// </summary>
        public string Location { get; set; }

        #endregion
    }
}

namespace TestProject

{

/// <summary>

/// 사람 모델

/// </summary>

public class PersonModel

{

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

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

#region 이름 - Name

/// <summary>

/// 이름

/// </summary>

public string Name { get; set; }

#endregion

#region 나이 - Age

/// <summary>

/// 나이

/// </summary>

public int Age { get; set; }

#endregion

#region 위치 - Location

/// <summary>

/// 위치

/// </summary>

public string Location { get; set; }

#endregion

}

▶ PersonView.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentView x:Class="TestProject.PersonView"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
     <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="0"
            FontAttributes="Bold"
            Text="{Binding Name}" />
        <Label Grid.Column="1"
            Text="{Binding Age}" />
        <Label Grid.Column="2"
            HorizontalTextAlignment="End"
            Text="{Binding Location}" />
    </Grid>
</ContentView>

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

<ContentView x:Class="TestProject.PersonView"

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

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

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Label Grid.Column="0"

FontAttributes="Bold"

Text="{Binding Name}" />

<Label Grid.Column="1"

Text="{Binding Age}" />

<Label Grid.Column="2"

HorizontalTextAlignment="End"

Text="{Binding Location}" />

</Grid>

</ContentView>

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <CollectionView
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Margin="10">
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type local:PersonModel}">
                <local:PersonModel Name="Steve" Age="21" Location="USA"     />
                <local:PersonModel Name="John"  Age="37" Location="USA"     />
                <local:PersonModel Name="Tom"   Age="42" Location="UK"      />
                <local:PersonModel Name="Lucas" Age="29" Location="Germany" />
                <local:PersonModel Name="Tariq" Age="39" Location="UK"      />
                <local:PersonModel Name="Jane"  Age="30" Location="USA"     />
            </x:Array>
        </CollectionView.ItemsSource>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <local:PersonView />
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage"

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

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

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

<CollectionView

HorizontalOptions="Center"

VerticalOptions="Center"

Margin="10">

<CollectionView.ItemsSource>

<x:Array Type="{x:Type local:PersonModel}">

<local:PersonModel Name="Steve" Age="21" Location="USA" />

<local:PersonModel Name="John" Age="37" Location="USA" />

<local:PersonModel Name="Tom" Age="42" Location="UK" />

<local:PersonModel Name="Lucas" Age="29" Location="Germany" />

<local:PersonModel Name="Tariq" Age="39" Location="UK" />

<local:PersonModel Name="Jane" Age="30" Location="USA" />

</x:Array>

</CollectionView.ItemsSource>

<CollectionView.ItemTemplate>

<local:PersonView />

</DataTemplate>

</CollectionView.ItemTemplate>

</CollectionView>

</ContentPage>

TestProject.zip