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

icodebroker MICROSOFT 2024-06-19

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

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

.NET6 C# CONTROL LAYOUT MAUI MICROSOFT