[C#/MAUI/.NET6] Grid 엘리먼트 사용하기

■ Grid 엘리먼트를 사용하는 방법을 보여준다.

▶ 예제 코드 (XAML)


<Grid
    RowSpacing="25"
    RowDefinitions="Auto,Auto,Auto,Auto,*"
    Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">
    <Label Grid.Row="0"
        HorizontalOptions="Center"
        SemanticProperties.HeadingLevel="Level1"
        FontSize="32"
        Text="Hello, World!" />
    <Label Grid.Row="1"
        HorizontalOptions="Center"
        SemanticProperties.HeadingLevel="Level1"
        SemanticProperties.Description="Welcome to dot net Multi platform App U I"
        FontSize="18"
        Text="Welcome to .NET Multi-platform App UI" />
    <Label x:Name="counterLabel" Grid.Row="2"
        HorizontalOptions="Center"
        FontSize="18"
        FontAttributes="Bold"
        Text="Current count : 0" />
    <Button Grid.Row="3"
        HorizontalOptions="Center"
        SemanticProperties.Hint="Counts the number of times you click"
        FontAttributes="Bold"
        Text="Click me"
        Clicked="countButton_Clicked" />
    <Image Grid.Row="4"
        HorizontalOptions="Center"
        WidthRequest="250"
        HeightRequest="310"
        SemanticProperties.Description="Cute dot net bot waving hi to you!"
        Source="dotnet_bot.png" />
</Grid>

<Grid

RowSpacing="25"

RowDefinitions="Auto,Auto,Auto,Auto,*"

Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">

<Label Grid.Row="0"

HorizontalOptions="Center"

SemanticProperties.HeadingLevel="Level1"

FontSize="32"

Text="Hello, World!" />

<Label Grid.Row="1"

HorizontalOptions="Center"

SemanticProperties.HeadingLevel="Level1"

SemanticProperties.Description="Welcome to dot net Multi platform App U I"

FontSize="18"

Text="Welcome to .NET Multi-platform App UI" />

<Label x:Name="counterLabel" Grid.Row="2"

HorizontalOptions="Center"

FontSize="18"

FontAttributes="Bold"

Text="Current count : 0" />

<Button Grid.Row="3"

HorizontalOptions="Center"

SemanticProperties.Hint="Counts the number of times you click"

FontAttributes="Bold"

Text="Click me"

Clicked="countButton_Clicked" />

<Image Grid.Row="4"

HorizontalOptions="Center"

WidthRequest="250"

HeightRequest="310"

SemanticProperties.Description="Cute dot net bot waving hi to you!"

Source="dotnet_bot.png" />

</Grid>