Xamarin.Forms StackLayout

Örneği indirme

StackLayout" data-linktype="relative-path">Xamarin.Forms StackLayout" title=" Xamarin.Forms StackLayout" data-linktype="relative-path"/>

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

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

• _StackLayout_Orientation" data-linktype="absolute-path">, türü, alt görünümlerin OrientationStackOrientation konumlandırma yönünü temsil eder. Bu özelliğin varsayılan değeri Vertical olur.
• Xamarin_Forms _StackLayout_Spacing" data-linktype="absolute-path">, türünde, her alt görünüm Spacing arasındaki boşluk miktarını double gösterir. Bu özelliğin varsayılan değeri, cihazdan bağımsız altı birimdir.

Bu özellikler nesneler tarafından desteklene, bu da özelliklerin veri bağlamalarının hedefi ve BindableProperty stile sahip olması anlamına gelir.

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

Dikey yönlendirme

Aşağıdaki XAML, farklı alt görünümler içeren dikey olarak StackLayout yönlendirilen bir oluşturmayı gösterir:

<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 nesneleri içeren StackLayout dikey Label bir BoxView 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 şöyledir:

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, StackLayoutStackLayout "data-linktype="absolute-path"Xamarin_Forms _StackLayout_Orientation özelliğini olarak ayarerek yatay olarak >Orientation nasıl oluşturulacaklarını Horizontal 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 StackLayoutBoxView görünümler arasında altı cihazdan bağımsız alan birimi içeren bir yatay nesne oluşturur:

olarak

Eşdeğer C# kodu şöyledir:

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

bir içinde alt görünümler arasındaki boşluk, StackLayout Xamarin_Forms StackLayout _StackLayout_Spacing" data-linktype="absolute-path">özelliği bir değere ayar >Spacingdouble 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 StackLayout olan ve içeren dikey bir nesne LabelBoxView oluşturur:

boşluksuz

Eşdeğer C# kodu şöyledir:

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 StackLayout Xamarin_Forms StackLayout _VisualElement_HeightRequest" data-linktype="absolute-path">HeightRequest and Xamarin_Forms _VisualElement_WidthRequest" data-linktype="absolute-path">özelliklerinin değerlerine ve bunların WidthRequest Xamarin_Forms HeightRequest _View_HorizontalOptions" data-linktype="absolute-path">HorizontalOptions ve Xamarin_Forms _View_VerticalOptions" data-linktype="absolute-path">VerticalOptions özellikleri. Dikey bir StackLayout görünümde alt görünümler, boyutları açıkça ayarlenmezken kullanılabilir genişliği dolduracak şekilde genişler. Benzer şekilde, yatay bir içinde alt görünümler, boyutları açıkça ayarlenmezken kullanılabilir StackLayout yüksekliği dolduracak şekilde genişler.

Xamarin_Forms _View_HorizontalOptions" data-linktype="absolute-path">and HorizontalOptions Xamarin_Forms HorizontalOptions _View_VerticalOptions" data-linktype="absolute-path">VerticalOptionsStackLayout özellikleri ve alt görünümleri, LayoutOptions yapısından iki düzen tercihini kapsüller:

• Hizalama, bir alt görünümün üst düzeni içindeki konumunu ve boyutunu belirler.
• Genişletme, alt görünümün varsa fazladan alan kullanması gerektiğini gösterir.

Hizalama

Aşağıdaki XAML örneği, 'daki her alt görünümde hizalama tercihlerini StackLayout 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, içindeki konumlarını kontrol etmek Label için nesneler üzerinde hizalama tercihleri StackLayout ayarlanır. Start, Center , ve EndFill alanları, üst öğe içindeki nesnelerin Label hizalamasını tanımlamak için StackLayout kullanılır:

ile hizalama seçeneklerinin

StackLayout yalnızca StackLayout yönünün tersindeki alt görünümlerde bulunan hizalama tercihlerini dikkate alır. Bu nedenle, dikey yönelimli içindeki alt görünümler Xamarin_Forms LabelStackLayoutLabel _View_HorizontalOptions" data-linktype="absolute-path">HorizontalOptions özelliklerini hizalama alanlarından biri olarak ayarlayın:

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

Eşdeğer C# kodu şöyledir:

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, genişletme tercihlerini içinde her Label biri için StackLayout 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çinde boyutlarını kontrol etmek için Label nesneler üzerinde genişletme tercihleri StackLayout ayarlanır. , , ve alanları hizalama tercihini tanımlamak ve üst öğesi içinde varsa daha fazla alan kaplayacak StartAndExpandCenterAndExpandEndAndExpandFillAndExpandLabel mı? için StackLayout kullanılır:

genişletme seçenekleriyle ayarlama ile

StackLayout alt görünümleri ancak bulunduğu yönde genişletebilir. Bu nedenle dikey yönelimli alt görünümleri genişletip Xamarin_Forms StackLayoutLabelStackLayout _View_VerticalOptions" data-linktype="absolute-path">özelliklerini VerticalOptions genişletme alanlarından biri olarak ayarlayın. Bu da dikey hizalama için her bir Label öğesinin StackLayout içinde aynı alanı kaplayacağı anlamına gelir. Ancak, yalnızca son olan , Xamarin_Forms LabelLabel _View_VerticalOptions" data-linktype="absolute-path">özelliğini farklı VerticalOptions bir FillAndExpand boyuta sahip olacak şekilde ayarlar.

Eşdeğer C# kodu şöyledir:

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. Layout Options in Xamarin.Forms .

İç içe StackLayout nesneleri

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

Aşağıdaki XAML, nesneleri iç içe yerleştirme örneğini StackLayout 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 öğe StackLayout nesnelerin içinde iç içe nesneler StackLayoutFrame içerir. Üst StackLayout öğe dikey olarak, alt nesneler StackLayout ise yatay olarak yönlendirildi:

Eşdeğer C# kodu şöyledir:

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

• StackLayout tanıtımları (örnek)
• Layout Options in Xamarin.Forms
• Choose a Xamarin.Forms Layout
• Improve Xamarin.Forms App Performance