Xamarin.Forms StackLayout Öğreticisi

Makale
Developer (Başlangıç)
Tamamlanması için 10 dakika kaldı

Bu öğreticiye başlamadan önce şunları başarıyla tamamlamış olmanız gerekir:

İlk Xamarin.Forms uygulama hızlı başlangıcınızı oluşturun.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

XAML içinde bir Xamarin.FormsStackLayout oluşturun.
StackLayout öğesinin yönünü belirtme.
StackLayout içindeki alt görünüm hizalama ve genişletme özelliklerini denetleme.

Bir StackLayout içinde denetimleri hizalamayı gösteren basit bir uygulama oluşturmak için Visual Studio 2019 veya Mac için Visual Studio kullanacaksınız. Aşağıdaki ekran görüntüleri, son uygulamayı gösterir:

Ayrıca uygulamanızı yeniden oluşturmadan kullanıcı arabirimi değişikliklerini görmek için için Xamarin.Forms XAML Çalışırken Yeniden Yükleme kullanacaksınız.

Stacklayout oluşturma

9 dakika kaldı

StackLayout, alt öğeleri tek boyutlu bir yığında yatay veya dikey olarak yerleştiren bir düzendir. StackLayout varsayılan olarak dikey yerleşime sahiptir.

Visual Studio
Mac için Visual Studio

Bu öğreticiyi tamamlamak için Visual Studio 2019 (son sürüm) ve .NET ile mobil uygulama geliştirme iş yükü sisteminizde yüklü olmalıdır. Ayrıca öğretici uygulamasını iOS üzerinde derleyebilmek için eşleştirilmiş bir Mac de gerekecektir. Xamarin platformunu yükleme hakkında bilgi için bkz. Xamarin'i Yükleme. Visual Studio 2019'u bir Mac derleme ana bilgisayarına bağlama hakkında bilgi için bkz. Xamarin.iOS geliştirme için Mac ile eşleştirme.

Visual Studio'yu başlatın ve StackLayoutTutorial adlı yeni bir boş Xamarin.Forms uygulama oluşturun.

Önemli

Bu öğreticide kullanılan C# ve XAML kod parçacıklarında çözüm adı StackLayoutTutorial olarak belirlenmiştir. Farklı bir ad kullanırsanız bu öğreticideki kodları çözüme kopyaladığınızda derleme hatalarıyla karşılaşabilirsiniz.

Oluşturulan .NET Standard kitaplığı hakkında daha fazla bilgi için Bkz. Hızlı Başlangıç Ayrıntılı Bakış'taXamarin.Forms uygulamanın Xamarin.Forms anatomisi.
Çözüm Gezgini'ndeki StackLayoutTutorial projesinde MainPage.xaml dosyasına çift tıklayıp açın. Ardından MainPage.xaml içindeki şablon kodunun tamamını silip aşağıdaki kodu ekleyin:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutTutorial.MainPage">
    <StackLayout Margin="20,35,20,25">
        <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
        <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
        <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
    </StackLayout>
</ContentPage>
```
Bu kod, sayfa için kullanıcı arabirimini bildirimli bir şekilde tanımlar ve bu da bir StackLayout içindeki üç Label örneğinden oluşur. StackLayout, alt görünümlerini (Label örneklerini) tek bir çizgi üzerine yerleştirir ve bu da varsayılan olarak dikey olur. Ayrıca Margin özelliği, ContentPage içindeki StackLayout öğesinin oluşturulacağı konumu belirtir.

Not

Margin özelliğine ek olarak StackLayout üzerinde Padding ve Spacing özellikleri de belirtilebilir. Padding özellik değeri, StackLayout içindeki görünümler arasındaki mesafeyi belirtirken Spacing özellik değeri ise StackLayout içindeki her bir alt öğe arasındaki boşluk miktarını belirtir. Daha fazla bilgi için bkz. Kenar Boşlukları ve Doldurma.
Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

hakkında StackLayoutdaha fazla bilgi için bkz Xamarin.Forms . StackLayout.

Bu öğreticiyi tamamlamak için iOS ve Android platformu desteğine sahip Mac için Visual Studio (son sürüm) uygulamasını yüklemiş olmanız gerekir. Ayrıca Xcode (son sürüm) uygulaması da gereklidir. Xamarin platformunu yükleme hakkında daha bilgi için bkz. Xamarin'i Yükleme.

Mac için Visual Studio başlatın ve StackLayoutTutorial adlı yeni bir boş Xamarin.Forms uygulama oluşturun.

Önemli

Bu öğreticide kullanılan C# ve XAML kod parçacıklarında çözüm adı StackLayoutTutorial olarak belirlenmiştir. Farklı bir ad kullanırsanız bu öğreticideki kodları çözüme kopyaladığınızda derleme hatalarıyla karşılaşabilirsiniz.

Oluşturulan .NET Standard kitaplığı hakkında daha fazla bilgi için Bkz. Hızlı Başlangıç Ayrıntılı Bakış'taXamarin.Forms uygulamanın Xamarin.Forms anatomisi.
Çözüm Bölmesi'ndeki StackLayoutTutorial projesinde MainPage.xaml dosyasına çift tıklayıp açın. Ardından MainPage.xaml içindeki şablon kodunun tamamını silip aşağıdaki kodu ekleyin:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutTutorial.MainPage">
    <StackLayout Margin="20,35,20,25">
        <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
        <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
        <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
    </StackLayout>
</ContentPage>
```
Bu kod, sayfa için kullanıcı arabirimini bildirimli bir şekilde tanımlar ve bu da bir StackLayout içindeki üç Label örneğinden oluşur. StackLayout, alt görünümlerini (Label örneklerini) tek bir çizgi üzerine yerleştirir ve bu da varsayılan olarak dikey olur. Ayrıca Margin özelliği, ContentPage içindeki StackLayout öğesinin oluşturulacağı konumu belirtir.

Not

Margin özelliğine ek olarak StackLayout üzerinde Padding ve Spacing özellikleri de belirtilebilir. Padding özellik değeri, StackLayout içindeki görünümler arasındaki mesafeyi belirtirken Spacing özellik değeri ise StackLayout içindeki her bir alt öğe arasındaki boşluk miktarını belirtir. Daha fazla bilgi için bkz. Kenar Boşlukları ve Doldurma.
Mac için Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

hakkında StackLayoutdaha fazla bilgi için bkz Xamarin.Forms . StackLayout.

Yön belirtme

6 dakika kaldı

Visual Studio
Mac için Visual Studio

MainPage.xaml içindeki StackLayout bildirimini değiştirerek alt öğelerini dikey yerine yatay olarak hizalamasını sağlayın:

<StackLayout Margin="20,35,20,25"
             Orientation="Horizontal">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

Bu kod, Orientation özelliğini Horizontal olarak ayarlar.

Uygulama çalışıyorsa dosyada yaptığınız değişiklikleri kaydettiğinizde simülatör veya öykünücü içindeki uygulama kullanıcı arabirimi otomatik olarak güncelleştirilir. Aksi takdirde Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz uzak iOS simülatöründe veya Android öykünücüsünde başlatın:

StackLayout içindeki Label örneklerinin dikey yerine yatay olarak hizalanmış olduğunu göreceksiniz.

MainPage.xaml içindeki StackLayout bildirimini değiştirerek alt öğelerini dikey yerine yatay olarak hizalamasını sağlayın:

<StackLayout Margin="20,35,20,25"
             Orientation="Horizontal">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

Bu kod, Orientation özelliğini Horizontal olarak ayarlar.

Uygulama çalışıyorsa dosyada yaptığınız değişiklikleri kaydettiğinizde simülatör veya öykünücü içindeki uygulama kullanıcı arabirimi otomatik olarak güncelleştirilir. Aksi takdirde Mac için Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

StackLayout içindeki Label örneklerinin dikey yerine yatay olarak hizalanmış olduğunu göreceksiniz.

Hizalama ve genişletme özelliklerini denetleme

4 dakika kaldı

içindeki alt görünümlerin boyutu ve konumu, alt görünümlerin StackLayoutHeightRequest ve özelliklerin değerlerine ve WidthRequest ve VerticalOptions özelliklerinin değerlerine HorizontalOptions bağlıdır.

HorizontalOptions ve VerticalOptions özellikleri, iki yerleşim tercihi sunan LayoutOptions yapısının alanlarına da ayarlanabilir:

Hizalama: Alt görünümün tercih edilen hizalamasıdır, üst düzen içindeki konumunu ve boyutunu belirler.
Genişletme: Alt görünümün mevcut olması durumunda ek alanı kullanıp kullanmayacağını belirtir (yalnızca bir StackLayout tarafından kullanılır).

Visual Studio
Mac için Visual Studio

MainPage.xaml içinde StackLayout bildirimini değiştirerek her bir Label için hizalama ve genişletme seçeneklerini ayarlayın:

<StackLayout Margin="20,35,20,25">
    <Label Text="Start"
           HorizontalOptions="Start"
           BackgroundColor="Gray" />
    <Label Text="Center"
           HorizontalOptions="Center"
           BackgroundColor="Gray" />
    <Label Text="End"
           HorizontalOptions="End"
           BackgroundColor="Gray" />
    <Label Text="Fill"
           HorizontalOptions="Fill"
           BackgroundColor="Gray" />
    <Label Text="StartAndExpand"
           VerticalOptions="StartAndExpand"
           BackgroundColor="Gray" />
    <Label Text="CenterAndExpand"
           VerticalOptions="CenterAndExpand"
           BackgroundColor="Gray" />
    <Label Text="EndAndExpand"
           VerticalOptions="EndAndExpand"
           BackgroundColor="Gray" />
    <Label Text="FillAndExpand"
           VerticalOptions="FillAndExpand"
           BackgroundColor="Gray" />
</StackLayout>

Bu kod, ilk dört Label örneğindeki hizalama tercihlerini ve son dört Label örneğindeki genişletme tercihlerini ayarlar. Start, Center, End ve Fill alanları, Label örneklerinin üst StackLayout içindeki hizalamasını tanımlamak için kullanılır. StartAndExpand, CenterAndExpand, EndAndExpand ve FillAndExpand alanları, hizalama tercihini tanımlamak ve görünümün üst StackLayout içindeki ek alanı kullanıp kullanmayacağını belirlemek için kullanılır.

Not

Bir görünümün HorizontalOptions ve VerticalOptions özelliklerinin varsayılan değeri Fill şeklindedir.

Uygulama çalışıyorsa dosyada yaptığınız değişiklikleri kaydettiğinizde simülatör veya öykünücü içindeki uygulama kullanıcı arabirimi otomatik olarak güncelleştirilir. Aksi takdirde Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz uzak iOS simülatöründe veya Android öykünücüsünde başlatın:

StackLayout yalnızca StackLayout yönünün tersindeki alt görünümlerde bulunan hizalama tercihlerini dikkate alır. Bu nedenle dikey StackLayout içindeki Label alt görünümleri, HorizontalOptions özelliklerini şu hizalama alanlarından birine göre ayarlar:
- Start: Label öğesini StackLayout öğesinin soluna yerleştirir.
- Center: Label öğesini StackLayout içinde ortalar.
- End: Label öğesini StackLayout öğesinin sağına yerleştirir.
- Fill: Label öğesinin StackLayout öğesinin genişliğine uydurulmasını sağlar.
StackLayout alt görünümleri ancak bulunduğu yönde genişletebilir. Bu nedenle dikey StackLayout, VerticalOptions özellikleri genişletme alanlarından biri olarak ayarlanmış olan Label alt görünümlerini genişletebilir. Bu da dikey hizalama için her bir Label öğesinin StackLayout içinde aynı alanı kaplayacağı anlamına gelir. Ancak yalnızca VerticalOptions özelliği FillAndExpand olarak ayarlanmış olan Label öğesinin boyutu farklı olur.

Önemli

Bir StackLayout içindeki alanın tamamı kullanıldığında genişletme tercihlerinin herhangi bir etkisi olmaz.

Visual Studio'da uygulamayı durdurun.

Hizalama ve genişletme hakkında daha fazla bilgi için, bkz . içindeki Xamarin.FormsDüzen Seçenekleri.

MainPage.xaml içinde StackLayout bildirimini değiştirerek her bir Label için hizalama ve genişletme seçeneklerini ayarlayın:

<StackLayout Margin="20,35,20,25">
    <Label Text="Start"
           HorizontalOptions="Start"
           BackgroundColor="Gray" />
    <Label Text="Center"
           HorizontalOptions="Center"
           BackgroundColor="Gray" />
    <Label Text="End"
           HorizontalOptions="End"
           BackgroundColor="Gray" />
    <Label Text="Fill"
           HorizontalOptions="Fill"
           BackgroundColor="Gray" />
    <Label Text="StartAndExpand"
           VerticalOptions="StartAndExpand"
           BackgroundColor="Gray" />
    <Label Text="CenterAndExpand"
           VerticalOptions="CenterAndExpand"
           BackgroundColor="Gray" />
    <Label Text="EndAndExpand"
           VerticalOptions="EndAndExpand"
           BackgroundColor="Gray" />
    <Label Text="FillAndExpand"
           VerticalOptions="FillAndExpand"
           BackgroundColor="Gray" />
</StackLayout>

Not

Bir görünümün HorizontalOptions ve VerticalOptions özelliklerinin varsayılan değeri Fill şeklindedir.

Uygulama çalışıyorsa dosyada yaptığınız değişiklikleri kaydettiğinizde simülatör veya öykünücü içindeki uygulama kullanıcı arabirimi otomatik olarak güncelleştirilir. Aksi takdirde Mac için Visual Studio araç çubuğunda Başlat düğmesine (Oynat düğmesine benzeyen üçgen düğme) basarak uygulamayı seçtiğiniz iOS simülatöründe veya Android öykünücüsünde başlatın:

StackLayout yalnızca StackLayout yönünün tersindeki alt görünümlerde bulunan hizalama tercihlerini dikkate alır. Bu nedenle dikey StackLayout içindeki Label alt görünümleri, HorizontalOptions özelliklerini şu hizalama alanlarından birine göre ayarlar:
- Start: Label öğesini StackLayout öğesinin soluna yerleştirir.
- Center: Label öğesini StackLayout içinde ortalar.
- End: Label öğesini StackLayout öğesinin sağına yerleştirir.
- Fill: Label öğesinin StackLayout öğesinin genişliğine uydurulmasını sağlar.
StackLayout alt görünümleri ancak bulunduğu yönde genişletebilir. Bu nedenle dikey StackLayout, VerticalOptions özellikleri genişletme alanlarından biri olarak ayarlanmış olan Label alt görünümlerini genişletebilir. Bu da dikey hizalama için her bir Label öğesinin StackLayout içinde aynı alanı kaplayacağı anlamına gelir. Ancak yalnızca VerticalOptions özelliği FillAndExpand olarak ayarlanmış olan Label öğesinin boyutu farklı olur.

Önemli

Bir StackLayout içindeki alanın tamamı kullanıldığında genişletme tercihlerinin herhangi bir etkisi olmaz.

Mac için Visual Studio'da uygulamayı durdurun.

Hizalama ve genişletme hakkında daha fazla bilgi için, bkz . içindeki Xamarin.FormsDüzen Seçenekleri.

Aracılığıyla paylaş

Xamarin.Forms StackLayout Öğreticisi

Stacklayout oluşturma

Yön belirtme

Hizalama ve genişletme özelliklerini denetleme

Tebrikler!

Sonraki adımlar

Aracılığıyla paylaş

Xamarin.Forms StackLayout Öğreticisi

Stacklayout oluşturma

Yön belirtme

Hizalama ve genişletme özelliklerini denetleme

Tebrikler!

Sonraki adımlar

İlgili bağlantılar