.NET MAUI 레이아웃

.NET MAUI WPF와 비슷한 레이아웃을 가지고 있다.

 WPF 거이 Grid 많이 사용 했는데    MAUI도 마찬가지 일까나..

StackLayout 

스택의 요소를 가로 또는 세로로 구성

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiToy.Toy1"
             Title="StackLayout">
    <StackLayout Margin="20,35,20,25">
        <Button Text="1" Background="Red" />
        <Button Text="2" Background="orange " />
        <Button Text="3" Background ="Yellow" />
        <Button Text="4" Background ="Green" />
    </StackLayout>
</ContentPage>

 

 

StackLayout

HorizontalStackLayout

요소의 크기가 명시적으로 설정되지 않은 경우 확장되어 사용 가능한 높이를 채웁

사용 할일이 있을까나?

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiToy.Toy1"
             Title="HorizontalStackLayout">
    <HorizontalStackLayout Margin="20">
        <Rectangle Fill="Red"
              HeightRequest="30"
              WidthRequest="30" />
        <Button  Text="1" FontSize="18" />
    </HorizontalStackLayout>
</ContentPage>

 

 

 

VerticalStackLayout

요소의 크기가 명시적으로 설정되지 않은 경우 확장되어 사용 가능한 너비를 채웁니다.

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiToy.Toy1"
             Title="VerticalStackLayout ">
    <VerticalStackLayout Margin="20">
        <Rectangle Fill="Red"
              HeightRequest="30"
              WidthRequest="30" />
        <Button  Text="1" FontSize="18" />
    </VerticalStackLayout >
</ContentPage>

 

VerticalStackLayout

 

HorizontalStackLayout, VerticalStackLayout 사용하는 것보다, StackLayout  Orientation 속성으로 사용하는게 더 효율적이 이지 않을까? 심지어 StackLayout 성능이 더 좋다고 한다. ㅋㅋㅋ

 

Grid

비례 또는 절대 크기를 가질 수 있는 행과 열에 요소를 표시하는 데 사용

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiToy.Toy1"
             Title="Grid">
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="100"  />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>
        <Button Text="Column 0, Row 0" Margin="10" Background="red"/>
        <Button Grid.Column="1" Text="Column 1, Row 0" Margin="10" Background="Orange"  />
        <Button Grid.Row="1" Text="Column 0, Row 1" Margin="10" Background="Blue"   />
        <Button Grid.Column="1" Grid.Row="1" Text="Column 1, Row 1" Margin="10" Background="Green" />
    </Grid>
</ContentPage>

Grid

FlexLayout

자식이 서로 다른 맞춤 및 방향 옵션으로 쌓이거나 래핑될 수 있습니다

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiToy.Toy1"
             Title="FlexLayout">
    <FlexLayout Direction="Column" AlignItems="Stretch" JustifyContent="SpaceAround"  > <!--JustifyContent 변경해봐 -->
        <Label Text="FlexLayout in Action" />
        <Button Text="Button" />
        <Label Text="Another Label" />
    </FlexLayout>
</ContentPage>

FlexLayout

 

AbsoluteLayout

값 또는 레이아웃 크기에 상대적인 값을 사용하여 요소의 위치를 지정

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiToy.Toy1"
             Title="AbsoluteLayout">
    <AbsoluteLayout Margin="40">
        <Button BackgroundColor ="Red" Text="버튼1"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="1, 0, 100, 100"
             Rotation="30" />
        <Button BackgroundColor="Green" Text="버튼2"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.2, 0, 100, 100"
             Rotation="60" />
        <Button BackgroundColor="Blue" Text="버튼3"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0.2, 100, 100" />
    </AbsoluteLayout>
</ContentPage>

AbsoluteLayout

BindableLayout

각 항목의 모양을 설정하는 옵션을 사용하여 모든 레이아웃 클래스가 항목 컬렉션에 바인딩하여 콘텐츠를 생성할 수 있음

말이 살짝 어렵다. ㅠㅠ

 

아직 잘 모르겠다. 사용을 해보고 예제를 만들어 봐야겠다.