.Net Maui StackLayout

Entrance

StackLayout is a basic layout control in .NET MAUI (Multi-platform App UI) that allows you to arrange child elements in a single line horizontally or vertically. It is a versatile and easy layout control that simplifies the process of organizing your UI components.

Why Should We Use StackLayout?

• Simplicity : Easy to understand and implement.

• Flexibility : Supports both horizontal and vertical editing.

• Dynamic : Can easily accommodate dynamic content.

• Cross-Platform : Works seamlessly on all platforms supported by .NET MAUI.

Basic Usage of StackLayout

Here's a basic example of using StackLayout in a .NET MAUI application.

<ContentPage xmlns="<http://schemas.microsoft.com/dotnet/2021/maui>"
             xmlns:x="<http://schemas.microsoft.com/winfx/2009/xaml>"
             x:Class="MyApp.MainPage">

    <StackLayout>
        <Label Text=".NET MAUI'ye Hoş Geldiniz!"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
        <Button Text="Beni Tıkla"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                Clicked="OnButtonClicked" />
    </StackLayout>

</ContentPage>

In this example, a Label and a Button are aligned vertically in the middle of the page.

Horizontal and Vertical Layout

You can set the Orientation property to control whether the StackLayout arranges its child elements horizontally or vertically.

• Vertical Layout (default):

<StackLayout Orientation="Vertical">
    <Label Text="Etiket 1" />
    <Label Text="Etiket 2" />
</StackLayout>

• Horizontal Layout :

<StackLayout Orientation="Horizontal">
    <Label Text="Etiket 1" />
    <Label Text="Etiket 2" />
</StackLayout>

Advanced Features

Space

You can control the spacing between child elements of the StackLayout using the Spacing property.

<StackLayout Spacing="20">
    <Label Text="Etiket 1" />
    <Label Text="Etiket 2" />
</StackLayout>

Internal Space

Padding can be used to add internal spacing to the StackLayout.

<StackLayout Padding="10,20,10,20">
    <Label Text="Etiket 1" />
    <Label Text="Etiket 2" />
</StackLayout>

Alignment of Child Elements

HorizontalOptions and VerticalOptions can be used to align child elements within the StackLayout.

<StackLayout>
    <Label Text="Üst Sol"
           HorizontalOptions="Start"
           VerticalOptions="Start" />
    <Label Text="Orta"
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
    <Label Text="Alt Sağ"
           HorizontalOptions="End"
           VerticalOptions="EndAndExpand" />
</StackLayout>

Practical Example: Creating a Simple Form

Let's create a simple form to demonstrate practical use of StackLayout.

<ContentPage xmlns="<http://schemas.microsoft.com/dotnet/2021/maui>"
             xmlns:x="<http://schemas.microsoft.com/winfx/2009/xaml>"
             x:Class="MyApp.MainPage">

    <StackLayout Padding="20" Spacing="10">
        <Label Text="Ad" />
        <Entry Placeholder="Adınızı girin" />

        <Label Text="E-posta" />
        <Entry Placeholder="E-posta adresinizi girin" />

        <Label Text="Şifre" />
        <Entry Placeholder="Şifrenizi girin" IsPassword="True" />

        <Button Text="Gönder"
                HorizontalOptions="Center"
                VerticalOptions="EndAndExpand"
                Clicked="OnSubmitClicked" />
    </StackLayout>

</ContentPage>

In this example, the Label and Entry elements are aligned vertically and there is a Button at the bottom.

Conclusion

StackLayout is an important and versatile layout control in .NET MAUI that helps you organize UI elements in a linear manner. Its simplicity and flexibility make it a preferred option for many developers. Whether you're creating a simple form or designing a complex interface, StackLayout provides the necessary tools to structure your UI efficiently.

By skillfully using StackLayout, you can enhance the user experience of your .NET MAUI applications, making them more intuitive and visually appealing.