VerticalStackLayout

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI), VerticalStackLayout alt görünümleri tek boyutlu bir dikey yığında düzenler ve öğesine daha yüksek performanslı bir StackLayoutalternatiftir. Ayrıca, diğer VerticalStackLayout alt düzenleri içeren bir üst düzen olarak da kullanılabilir.

aşağıdaki VerticalStackLayout özellikleri tanımlar:

• Spacing, türündeki doubleher alt görünüm arasındaki boşluk miktarını gösterir. Bu özelliğin varsayılan değeri 0'dır.

Bu özellik bir BindableProperty nesne tarafından desteklenir, bu da veri bağlamalarının hedefi olabileceği ve stillendirilebileceği anlamına gelir.

Aşağıdaki XAML,farklı alt görünümler içeren bir VerticalStackLayout öğesinin nasıl oluşturulacağını gösterir:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20">
        <Label Text="Primary colors" />
        <Rectangle Fill="Red"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Yellow"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Blue"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Label Text="Secondary colors" />
        <Rectangle Fill="Green"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Orange"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Purple"
                   HeightRequest="30"
                   WidthRequest="300" />
    </VerticalStackLayout>
</ContentPage>

Bu örnek, içeren VerticalStackLayoutLabel ve Rectangle nesneleri oluşturur. Varsayılan olarak, alt görünümler arasında boşluk yoktur:

Dekont

özelliğinin Margin değeri, bir öğe ile bitişik öğeleri arasındaki uzaklığı temsil eder. Daha fazla bilgi için bkz . Konum denetimleri.

Alt görünümler arasındaki boşluk

içindeki alt görünümler VerticalStackLayout arasındaki aralık, özelliği bir double değere Spacing ayarlanarak değiştirilebilir:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="10">
        <Label Text="Primary colors" />
        <Rectangle Fill="Red"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Yellow"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Blue"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Label Text="Secondary colors" />
        <Rectangle Fill="Green"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Orange"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Purple"
                   HeightRequest="30"
                   WidthRequest="300" />
    </VerticalStackLayout>
</ContentPage>

Bu örnek, alt görünümler arasında cihazdan bağımsız on boşluk birimine sahip bir VerticalStackLayout ve içeren LabelRectangle ve nesneleri oluşturur:

Bahşiş

Özellik, Spacing alt görünümlerin çakışmasını sağlamak için negatif değerlere ayarlanabilir.

Alt görünümleri konumlandırma ve boyutlandırma

içindeki alt görünümlerin boyutu ve konumu, alt görünümlerin VerticalStackLayoutHeightRequest ve özelliklerin değerlerine ve WidthRequest bunların HorizontalOptions özelliklerinin değerlerine bağlıdır. içinde VerticalStackLayout, alt görünümler, boyutları açıkça ayarlı olmadığında kullanılabilir genişliği dolduracak şekilde genişler.

Bir HorizontalOptionsVerticalStackLayoutöğesinin özellikleri ve alt görünümleri, yapısından LayoutOptions alanlara ayarlanabilir ve bu da hizalama düzeni tercihini kapsüller. Bu düzen tercihi, bir alt görünümün üst düzeni içindeki konumunu ve boyutunu belirler.

Bahşiş

gerekmedikçe özelliğini VerticalStackLayout ayarlamayınHorizontalOptions. varsayılan değeri LayoutOptions.Fill , en iyi düzen iyileştirmesine olanak tanır. Bu özelliği değiştirmenin bir maliyeti vardır ve varsayılan değerine geri ayarlarken bile bellek tüketir.

Aşağıdaki XAML örneği, içindeki her alt görünümde VerticalStackLayouthizalama tercihlerini ayarlar:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="6">
        <Label Text="Start"
               BackgroundColor="Gray"
               HorizontalOptions="Start" />
        <Label Text="Center"
               BackgroundColor="Gray"
               HorizontalOptions="Center" />
        <Label Text="End"
               BackgroundColor="Gray"
               HorizontalOptions="End" />
        <Label Text="Fill"
               BackgroundColor="Gray"
               HorizontalOptions="Fill" />
    </VerticalStackLayout>
</ContentPage>

Bu örnekte, nesnelerin içindeki VerticalStackLayoutkonumlarını denetlemek için hizalama tercihleri ayarlanırLabel. , , ve alanları, üst VerticalStackLayoutiçindeki nesnelerin hizalamasını Label tanımlamak için kullanılır:FillEndCenterStart

Yalnızca VerticalStackLayout alt görünümlerde düzenin yönüne ters yönde olan hizalama tercihlerini dikkate alır. Bu nedenle, Label içindeki alt görünümler VerticalStackLayoutHorizontalOptions özelliklerini hizalama alanlarından birine ayarlayın:

• Start, öğesinin sol tarafına konumlandıran Label .VerticalStackLayout
• Center: Label öğesini VerticalStackLayout içinde ortalar.
• End, öğesini öğesini sağ tarafına konumlandıran LabelVerticalStackLayout.
• Fill: Label öğesinin VerticalStackLayout öğesinin genişliğine uydurulmasını sağlar.

VerticalStackLayout nesnelerini iç içe yerleştirme

, VerticalStackLayout diğer iç içe alt düzenleri içeren bir üst düzen olarak kullanılabilir.

Aşağıdaki XAML'de bir içindeki VerticalStackLayoutnesneleri iç içe geçirme HorizontalStackLayout örneği gösterilmektedir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="6">
       <Label Text="Primary colors" />
       <Frame BorderColor="Black"
              Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Red"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Red"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Frame>
       <Frame BorderColor="Black"
              Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Yellow"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Yellow"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Frame>
       <Frame BorderColor="Black"
              Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Blue"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Blue"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Frame>
    </VerticalStackLayout>
</ContentPage>

Bu örnekte, üst VerticalStackLayout öğe nesnelerin içinde Frame iç içe HorizontalStackLayout nesneler içerir:

Önemli

Düzen nesnelerini ne kadar derin iç içe yerleştirdiyseniz, performansı etkileyebilecek daha fazla düzen hesaplaması yapılır. Daha fazla bilgi için bkz . Doğru düzeni seçme.