[C#/MAUI/.NET6] FlexLayout 엘리먼트 : Direction/AlignItems/JustifyContent 속성을 사용해 항목 나열하기

■ FlexLayout 엘리먼트의 Direction/AlignItems/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">
    <FlexLayout
        Direction="Column"
        AlignItems="Center"
        JustifyContent="SpaceEvenly">
        <Label
            FontSize="18"
            Text="FlexLayout in Action" />
        <Image
            HeightRequest="300"
            Source="dotnet_bot.png" />
        <Button Text="Do-Nothing Button" />
        <Label Text="Another Label" />
    </FlexLayout>
</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">

<FlexLayout

Direction="Column"

AlignItems="Center"

JustifyContent="SpaceEvenly">

<Label

FontSize="18"

Text="FlexLayout in Action" />

<Image

HeightRequest="300"

Source="dotnet_bot.png" />

</FlexLayout>

</ContentPage>

TestProject.zip