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

TestProject.zip

0.15MB

▶ 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>