Xamarin.Forms StackLayout

Alt StackLayout görünümleri yatay veya dikey olarak tek boyutlu bir yığında düzenler. StackLayout varsayılan olarak dikey yerleşime sahiptir. Ayrıca, diğer StackLayout alt düzenleri içeren bir üst düzen olarak da kullanılabilir.

StackLayout sınıfı aşağıdaki özellikleri tanımlar:

• Orientation, türündeki StackOrientationalt görünümlerin konumlandırıldığı yönü temsil eder. Bu özelliğin varsayılan değeridir Vertical.
• 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, cihazdan bağımsız altı birimdir.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da özelliklerin veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

sınıfı StackLayout türünde bir Children özelliği tanımlayan sınıfından IList<T>türetilirLayout<T>. Children özelliği sınıfının özelliğidir ContentPropertyLayout<T> ve bu nedenle açıkça XAML'den ayarlanması gerekmez.

Dikey yönlendirme

Aşağıdaki XAML'de farklı alt görünümler içeren dikey odaklı StackLayout bir oluşturma gösterilmektedir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage"
             Title="Vertical StackLayout demo">
    <StackLayout Margin="20">
        <Label Text="Primary colors" />
        <BoxView Color="Red" />
        <BoxView Color="Yellow" />
        <BoxView Color="Blue" />
        <Label Text="Secondary colors" />
        <BoxView Color="Green" />
        <BoxView Color="Orange" />
        <BoxView Color="Purple" />
    </StackLayout>
</ContentPage>

Bu örnek, ve BoxView nesnelerini içeren Label dikey StackLayout bir öğe oluşturur. Varsayılan olarak, alt görünümler arasında cihazdan bağımsız altı alan birimi vardır:

Eşdeğer C# kodu:

public class VerticalStackLayoutPageCS : ContentPage
{
    public VerticalStackLayoutPageCS()
    {
        Title = "Vertical StackLayout demo";
        Content = new StackLayout
        {
            Margin = new Thickness(20),
            Children =
            {
                new Label { Text = "Primary colors" },
                new BoxView { Color = Color.Red },
                new BoxView { Color = Color.Yellow },
                new BoxView { Color = Color.Blue },
                new Label { Text = "Secondary colors" },
                new BoxView { Color = Color.Green },
                new BoxView { Color = Color.Orange },
                new BoxView { Color = Color.Purple }
            }
        };
    }
}

Yatay yönlendirme

Aşağıdaki XAML, özelliğini Horizontalolarak ayarlayarak yatay olarak yönlendirilmiş StackLayout bir oluşturma işlemini Orientation gösterir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.HorizontalStackLayoutPage"
             Title="Horizontal StackLayout demo">
    <StackLayout Margin="20"
                 Orientation="Horizontal"
                 HorizontalOptions="Center">
        <BoxView Color="Red" />
        <BoxView Color="Yellow" />
        <BoxView Color="Blue" />
        <BoxView Color="Green" />
        <BoxView Color="Orange" />
        <BoxView Color="Purple" />
    </StackLayout>
</ContentPage>

Bu örnek, alt görünümler BoxView arasında cihazdan bağımsız altı boşluk içeren yatay StackLayout bir nesne oluşturur:

Eşdeğer C# kodu:

public HorizontalStackLayoutPageCS()
{
    Title = "Horizontal StackLayout demo";
    Content = new StackLayout
    {
        Margin = new Thickness(20),
        Orientation = StackOrientation.Horizontal,
        HorizontalOptions = LayoutOptions.Center,
        Children =
        {
            new BoxView { Color = Color.Red },
            new BoxView { Color = Color.Yellow },
            new BoxView { Color = Color.Blue },
            new BoxView { Color = Color.Green },
            new BoxView { Color = Color.Orange },
            new BoxView { Color = Color.Purple }
        }
    };
}

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

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.StackLayoutSpacingPage"
             Title="StackLayout Spacing demo">
    <StackLayout Margin="20"
                 Spacing="0">
        <Label Text="Primary colors" />
        <BoxView Color="Red" />
        <BoxView Color="Yellow" />
        <BoxView Color="Blue" />
        <Label Text="Secondary colors" />
        <BoxView Color="Green" />
        <BoxView Color="Orange" />
        <BoxView Color="Purple" />
    </StackLayout>
</ContentPage>

Bu örnek, aralarında boşluk olmayan bir dikey StackLayout içeren Label ve BoxView nesneleri oluşturur:

Eşdeğer C# kodu:

public class StackLayoutSpacingPageCS : ContentPage
{
    public StackLayoutSpacingPageCS()
    {
        Title = "StackLayout Spacing demo";
        Content = new StackLayout
        {
            Margin = new Thickness(20),
            Spacing = 0,
            Children =
            {
                new Label { Text = "Primary colors" },
                new BoxView { Color = Color.Red },
                new BoxView { Color = Color.Yellow },
                new BoxView { Color = Color.Blue },
                new Label { Text = "Secondary colors" },
                new BoxView { Color = Color.Green },
                new BoxView { Color = Color.Orange },
                new BoxView { Color = Color.Purple }
            }
        };
    }
}

Alt görünümlerin konumu ve boyutu

içindeki alt görünümlerin boyutu ve konumu, alt görünümlerin StackLayoutHeightRequest ve özelliklerin değerlerine ve WidthRequest bunların HorizontalOptions ve VerticalOptions özelliklerinin değerlerine bağlıdır. Dikeyde StackLayoutalt görünümler, boyutları açıkça ayarlı olmadığında kullanılabilir genişliği dolduracak şekilde genişler. Benzer şekilde, yatay StackLayoutbir içinde alt görünümler, boyutları açıkça ayarlı olmadığında kullanılabilir yüksekliği dolduracak şekilde genişler.

HorizontalOptions bir StackLayoutöğesinin ve VerticalOptions özellikleri ve alt görünümleri, iki düzen tercihini kapsayan LayoutOptions yapıdan alanlara ayarlanabilir:

• Hizalama , alt görünümün üst düzeni içindeki konumunu ve boyutunu belirler.
• Genişletme , alt görünümün kullanılabilir durumdaysa fazladan alan kullanması gerekip gerekmediğini gösterir.

Hizalama

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.AlignmentPage"
             Title="Alignment demo">
    <StackLayout Margin="20">
        <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" />
    </StackLayout>
</ContentPage>

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

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, öğesinin sol tarafına konumlandıran Label .StackLayout
• Center: Label öğesini StackLayout içinde ortalar.
• End, öğesini öğesini sağ tarafına konumlandıran LabelStackLayout.
• Fill: Label öğesinin StackLayout öğesinin genişliğine uydurulmasını sağlar.

Eşdeğer C# kodu:

public class AlignmentPageCS : ContentPage
{
    public AlignmentPageCS()
    {
        Title = "Alignment demo";
        Content = new StackLayout
        {
            Margin = new Thickness(20),
            Children =
            {
                new Label { Text = "Start", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Start },
                new Label { Text = "Center", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Center },
                new Label { Text = "End", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.End },
                new Label { Text = "Fill", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Fill }
            }
        };
    }
}

Genişleme

Aşağıdaki XAML örneği, içindeki her LabelStackLayoutbirinde genişletme tercihlerini ayarlar:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.ExpansionPage"
             Title="Expansion demo">
    <StackLayout Margin="20">
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="Start"
               BackgroundColor="Gray"
               VerticalOptions="StartAndExpand" />
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="Center"
               BackgroundColor="Gray"
               VerticalOptions="CenterAndExpand" />
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="End"
               BackgroundColor="Gray"
               VerticalOptions="EndAndExpand" />
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
        <Label Text="Fill"
               BackgroundColor="Gray"
               VerticalOptions="FillAndExpand" />
        <BoxView BackgroundColor="Red"
                 HeightRequest="1" />
    </StackLayout>
</ContentPage>

Bu örnekte, içindeki boyutlarını StackLayoutdenetlemek için nesnelerde Label genişletme tercihleri ayarlanır. StartAndExpand, CenterAndExpand, EndAndExpandve FillAndExpand alanları hizalama tercihini tanımlamak için kullanılır ve öğesinin Label üst StackLayoutöğesinde kullanılabilirse daha fazla alan kaplayıp kaplamayacağını belirtir:

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.

Eşdeğer C# kodu:

public ExpansionPageCS()
{
    Title = "Expansion demo";
    Content = new StackLayout
    {
        Margin = new Thickness(20),
        Children =
        {
            new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
            new Label { Text = "StartAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.StartAndExpand },
            new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
            new Label { Text = "CenterAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.CenterAndExpand },
            new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
            new Label { Text = "EndAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.EndAndExpand },
            new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
            new Label { Text = "FillAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.FillAndExpand },
            new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 }
        }
    };
}

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

İç içe StackLayout nesneleri

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

Aşağıdaki XAML iç içe StackLayout nesne örneği gösterir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.CombinedStackLayoutPage"
             Title="Combined StackLayouts demo">
    <StackLayout Margin="20">
        ...
        <Frame BorderColor="Black"
               Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Red" />
                <Label Text="Red"
                       FontSize="Large"
                       VerticalOptions="Center" />
            </StackLayout>
        </Frame>
        <Frame BorderColor="Black"
               Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Yellow" />
                <Label Text="Yellow"
                       FontSize="Large"
                       VerticalOptions="Center" />
            </StackLayout>
        </Frame>
        <Frame BorderColor="Black"
               Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Blue" />
                <Label Text="Blue"
                       FontSize="Large"
                       VerticalOptions="Center" />
            </StackLayout>
        </Frame>
        ...
    </StackLayout>
</ContentPage>

Bu örnekte, üst StackLayout öğe nesnelerin içinde Frame iç içe StackLayout nesneler içerir. Üst öğe StackLayout dikey olarak yönlendirilirken, alt StackLayout nesneler yatay olarak yönlendirilir:

Eşdeğer C# kodu:

public class CombinedStackLayoutPageCS : ContentPage
{
    public CombinedStackLayoutPageCS()
    {
        Title = "Combined StackLayouts demo";
        Content = new StackLayout
        {
            Margin = new Thickness(20),
            Children =
            {
                new Label { Text = "Primary colors" },
                new Frame
                {
                    BorderColor = Color.Black,
                    Padding = new Thickness(5),
                    Content = new StackLayout
                    {
                        Orientation = StackOrientation.Horizontal,
                        Spacing = 15,
                        Children =
                        {
                            new BoxView { Color = Color.Red },
                            new Label { Text = "Red", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), VerticalOptions = LayoutOptions.Center }
                        }
                    }
                },
                new Frame
                {
                    BorderColor = Color.Black,
                    Padding = new Thickness(5),
                    Content = new StackLayout
                    {
                        Orientation = StackOrientation.Horizontal,
                        Spacing = 15,
                        Children =
                        {
                            new BoxView { Color = Color.Yellow },
                            new Label { Text = "Yellow", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), VerticalOptions = LayoutOptions.Center }
                        }
                    }
                },
                new Frame
                {
                    BorderColor = Color.Black,
                    Padding = new Thickness(5),
                    Content = new StackLayout
                    {
                        Orientation = StackOrientation.Horizontal,
                        Spacing = 15,
                        Children =
                        {
                            new BoxView { Color = Color.Blue },
                            new Label { Text = "Blue", FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)), VerticalOptions = LayoutOptions.Center }
                        }
                    }
                },
                // ...
            }
        };
    }
}

İlgili bağlantılar

• Içindeki Düzen Seçenekleri Xamarin.Forms
• Düzen Xamarin.Forms Seçin
• Uygulama Performansını Geliştirme Xamarin.Forms