[C#/MAUI/.NET6] FlexLayout 엘리먼트 : Grow/Order/Basis 첨부 속성 사용하기

■ FlexLayout 엘리먼트의 Grow/Order/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">
    <FlexLayout Direction="Column">
        <!-- 머리말 -->
        <Label
            BackgroundColor="Orange"
            HorizontalTextAlignment="Center"
            FontSize="18"
            Text="HEADER" />
        <!-- 본문 -->
        <FlexLayout FlexLayout.Grow="1">
            <!-- 내용 -->
            <Label
                FlexLayout.Grow="1"
                BackgroundColor="White"
                HorizontalTextAlignment="Center"
                VerticalTextAlignment="Center"
                FontSize="18"
                Text="CONTENT" />
            <!-- 탐색 항목 -->
            <BoxView
                FlexLayout.Basis="50"
                FlexLayout.Order="-1"
                Color="Blue" />
            <!-- 부가 항목 -->
            <BoxView
                FlexLayout.Basis="50"
                Color="Yellow" />
        </FlexLayout>
        <!-- 꼬리말 -->
        <Label
            BackgroundColor="Red"
            HorizontalTextAlignment="Center"
            FontSize="18"
            Text="FOOTER" />
    </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">

<Label

BackgroundColor="Orange"

HorizontalTextAlignment="Center"

FontSize="18"

Text="HEADER" />

<Label

FlexLayout.Grow="1"

BackgroundColor="White"

HorizontalTextAlignment="Center"

VerticalTextAlignment="Center"

FontSize="18"

Text="CONTENT" />

<BoxView

FlexLayout.Basis="50"

FlexLayout.Order="-1"

Color="Blue" />

<BoxView

FlexLayout.Basis="50"

Color="Yellow" />

</FlexLayout>

<Label

BackgroundColor="Red"

HorizontalTextAlignment="Center"

FontSize="18"

Text="FOOTER" />

</FlexLayout>

</ContentPage>

TestProject.zip