HorizontalStackLayout

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

aşağıdaki HorizontalStackLayout ö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 HorizontalStackLayout öğ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.HorizontalStackLayoutPage">
    <HorizontalStackLayout Margin="20">
       <Rectangle Fill="Red"
                  HeightRequest="30"
                  WidthRequest="30" />
       <Label Text="Red"
              FontSize="18" />
    </HorizontalStackLayout>
</ContentPage>

Bu örnek, ve nesnesini içeren Rectangle bir Label oluştururHorizontalStackLayout. 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 HorizontalStackLayout 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.HorizontalStackLayoutPage">
    <HorizontalStackLayout Margin="20"
                           Spacing="10">
       <Rectangle Fill="Red"
                  HeightRequest="30"
                  WidthRequest="30" />
       <Label Text="Red"
              FontSize="18" />
    </HorizontalStackLayout>
</ContentPage>

Bu örnek, aralarında cihazdan bağımsız on boşluk birimi olan bir ve nesnesi içeren Rectangle bir HorizontalStackLayoutLabel 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 HorizontalStackLayoutHeightRequest ve özelliklerin değerlerine ve WidthRequest bunların VerticalOptions özelliklerinin değerlerine bağlıdır. içinde HorizontalStackLayout, alt görünümler, boyutları açıkça ayarlı olmadığında kullanılabilir yüksekliği dolduracak şekilde genişler.

Bir VerticalOptionsHorizontalStackLayoutöğ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.

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

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.HorizontalStackLayoutPage">
    <HorizontalStackLayout Margin="20"
                           HeightRequest="200">
        <Label Text="Start"
               BackgroundColor="Gray"
               VerticalOptions="Start" />
        <Label Text="Center"
               BackgroundColor="Gray"
               VerticalOptions="Center" />
        <Label Text="End"
               BackgroundColor="Gray"
               VerticalOptions="End" />
        <Label Text="Fill"
               BackgroundColor="Gray"
               VerticalOptions="Fill" />
    </HorizontalStackLayout>
</ContentPage>

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

Yalnızca HorizontalStackLayout 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 HorizontalStackLayoutVerticalOptions özelliklerini hizalama alanlarından birine ayarlayın:

• Start, öğesinin başlangıcına konumlandıran Label .HorizontalStackLayout
• Center, öğesini dikey olarak içinde ortalar LabelHorizontalStackLayout.
• End, öğesinin Label sonuna konumlandıran .HorizontalStackLayout
• Fill, öğesinin Label yüksekliğini doldurmasını HorizontalStackLayoutsağlar.

Hizalama hakkında daha fazla bilgi için bkz . .NET MAUI denetimlerini hizalama ve konumlandırma.

HorizontalStackLayout nesnelerini iç içe yerleştirme

, HorizontalStackLayout 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 HorizontalStackLayoutnesneleri iç içe geçirme VerticalStackLayout ö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.HorizontalStackLayoutPage">
    <HorizontalStackLayout Margin="20"
                           Spacing="6">
        <Label Text="Primary colors:" />
        <VerticalStackLayout Spacing="6">
            <Rectangle Fill="Red"
                       WidthRequest="30"
                       HeightRequest="30" />
            <Rectangle Fill="Yellow"
                       WidthRequest="30"
                       HeightRequest="30" />
            <Rectangle Fill="Blue"
                       WidthRequest="30"
                       HeightRequest="30" />
        </VerticalStackLayout>
        <Label Text="Secondary colors:" />
        <VerticalStackLayout Spacing="6">
            <Rectangle Fill="Green"
                       WidthRequest="30"
                       HeightRequest="30" />
            <Rectangle Fill="Orange"
                       WidthRequest="30"
                       HeightRequest="30" />
            <Rectangle Fill="Purple"
                       WidthRequest="30"
                       HeightRequest="30" />
        </VerticalStackLayout>
    </HorizontalStackLayout>
</ContentPage>

Bu örnekte üst HorizontalStackLayout öğe iki iç içe VerticalStackLayout nesne 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.