.NET MAUI - Controls and Layouts

View 에는 단추, 레이블 또는 텍스트 상자와 같은 단일 컨트롤이 포함될 수 있습니다.

(엄밀히 말하면 뷰 자체가 컨트롤이므로 뷰에 다른 뷰가 포함될 수 있습니다.)

레이아웃은 컨트롤이 서로 상대적으로 표시되는 규칙을 정의합니다.

레이아웃도 컨트롤이므로 View 에 추가할 수 있습니다.

기본 MainPage.xaml 파일을 보면 이 Page/View/Layout/Control 계층이 작동하는 것을 볼 수 있다.

VerticalStackLayout 은 다른 컨트롤의 레이아웃을 미세 조정할 수 있는 컨트롤이다.

 

<ContentPage ...>
    <ScrollView ...>
        <VerticalStackLayout>
            <Image ... />
            <Label ... />
            <Label ... />
            <Button ... />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

VerticalStackLayout : 위에서 아래로 정렬되는 Stack Layout

HorizontalStackLayout : 좌에서 우로 정렬되는 Stack Layout

 

 

AbsoluteLayout : 컨트롤의 정확한 좌표를 성정할 수 있는 Layout

 

FlexLayout : 단일 행이나 열에 맞지 않는 경우 포함된 자식 컨트롤을 래핑가능 (StackLayout과 유사)

 

 

예제

TestPage.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.ControlAndLayout.TestPage"
             Title="TestPage">
    <ScrollView>
        <VerticalStackLayout>
            <Label Text="Current count: 0"
                Grid.Row="0"
                FontSize="18"
                FontAttributes="Bold"
                x:Name="CounterLabel"
                   WidthRequest="200"
                HorizontalOptions="Center" />

            <Button Text="Click me"
                Grid.Row="1"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

TestPage.xaml.cs

namespace MauiApp1.ControlAndLayout;

public partial class TestPage : ContentPage
{

    int count = 0;
    public TestPage()
	{
		InitializeComponent();
	}

    private void OnCounterClicked(object sender, EventArgs e)
    {
        count++;
        CounterLabel.Text = $"Current count: {count}";

        SemanticScreenReader.Announce(CounterLabel.Text);
    }
}

AppShell.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiApp1.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp1"
    xmlns:localControlAndLayout="clr-namespace:MauiApp1.ControlAndLayout"
    Shell.FlyoutBehavior="Disabled">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate localControlAndLayout:TestPage}"
        Route="MainPage" />
</Shell>

 

실행

 

 

 

 

 

 

관련영상

https://youtu.be/a_ZhZGcILuE