.Net Maui StackLayout

Giriş

StackLayout, .NET MAUI (Multi-platform App UI) içerisinde yer alan ve çocuk elemanları yatay veya dikey olarak tek bir çizgide düzenlemenizi sağlayan temel bir düzen kontrolüdür. UI bileşenlerinizi organize etme sürecini basitleştiren çok yönlü ve kolay bir düzen kontrolüdür.

Neden StackLayout Kullanmalıyız?

• Basitlik: Anlaması ve uygulaması kolaydır.

• Esneklik: Hem yatay hem de dikey düzenlemeyi destekler.

• Dinamik: Dinamik içeriği kolayca barındırabilir.

• Çapraz Platform: .NET MAUI tarafından desteklenen tüm platformlarda sorunsuz çalışır.

StackLayout'un Temel Kullanımı

İşte .NET MAUI uygulamasında StackLayout kullanmanın temel bir örneği.

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

Bu örnekte, bir Label ve bir Button sayfanın ortasında dikey olarak hizalanmıştır.

Yatay ve Dikey Düzen

StackLayout'un çocuk elemanlarını yatay veya dikey olarak düzenlemesini kontrol etmek için Orientation özelliğini ayarlayabilirsiniz.

• Dikey Düzen (varsayılan):

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

• Yatay Düzen:

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

Gelişmiş Özellikler

Boşluk

StackLayout'un çocuk elemanları arasındaki boşluğu Spacing özelliğini kullanarak kontrol edebilirsiniz.

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

İç Boşluk

StackLayout'a iç boşluk eklemek için Padding kullanılabilir.

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

Çocuk Elemanların Hizalanması

Çocuk elemanları StackLayout içinde hizalamak için HorizontalOptions ve VerticalOptions kullanılabilir.

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

Pratik Örnek: Basit Bir Form Oluşturma

StackLayout'un pratik kullanımını göstermek için basit bir form oluşturalım.

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

Bu örnekte, Label ve Entry elemanları dikey olarak hizalanmış ve en altta bir Button bulunmaktadır.

Sonuç

StackLayout, .NET MAUI içinde UI elemanlarını doğrusal bir şekilde düzenlemenize yardımcı olan önemli ve çok yönlü bir düzen kontrolüdür. Basitliği ve esnekliği, birçok geliştirici için tercih edilen bir seçenek haline getirir. İster basit bir form oluşturun, ister karmaşık bir arayüz tasarlayın, StackLayout UI'nizi verimli bir şekilde yapılandırmak için gerekli araçları sağlar.

StackLayout'u ustalıkla kullanarak, .NET MAUI uygulamalarınızın kullanıcı deneyimini artırabilir, onları daha sezgisel ve görsel olarak çekici hale getirebilirsiniz.