Xamarin.Forms StackLayout

  • Článek
  • 9 min ke čtení

Stáhnout ukázku Stažení ukázky

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

Objekt StackLayout uspořádá podřízené zobrazení do jednorozměrného zásobníku, a to buď vodorovně, nebo svisle. Ve výchozím nastavení má objekt StackLayout svislé uspořádání. Kromě toho lze použít jako nadřazené rozložení, StackLayout které obsahuje další podřízené rozložení.

Třída StackLayout definuje následující vlastnosti:

Tyto vlastnosti jsou zálohovány objekty, což znamená, že vlastnosti mohou být cíle datových vazeb a BindableProperty se stylem.

Třída StackLayout je odvozena z Layout<T> třídy , která definuje vlastnost typu ChildrenIList<T> . Vlastnost je třída , a proto není nutné explicitně ChildrenContentProperty nastavovat z Layout<T> XAML.

Tip

Pokud chcete dosáhnout nejlepšího možného výkonu rozložení, postupujte podle pokynů v části Optimalizace výkonu rozložení.

Svislá orientace

Následující kód XAML ukazuje, jak vytvořit svisle orientovaný StackLayout objekt, který obsahuje různá podřízený zobrazení:

<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>

Tento příklad vytvoří svislou obsahující objekty a StackLayoutLabelBoxView . Ve výchozím nastavení je mezi podřízenými zobrazeními šest jednotek místa nezávislých na zařízení:

obrazovky s vertikálně orientovanýmobjektem StackLayout

Ekvivalentní kód jazyka C# je:

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 }
            }
        };
    }
}

Poznámka

Hodnota vlastnosti Xamarin_Forms _View_Margin" data-linktype="absolute-path">představuje vzdálenost mezi prvkem a jeho Margin sousedními prvky. Další informace najdete v článku o okrajích a odsazeních.

Vodorovná orientace

Následující kód XAML ukazuje, jak vytvořit vodorovně orientovaný objekt nastavením jeho StackLayout Xamarin_Forms StackLayout _StackLayout_Orientation" data-linktype="absolute-path">Orientation vlastnost na Horizontal :

<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>

Tento příklad vytvoří vodorovně obsahující objekty se šesti jednotkami místa mezi podřízenými zobrazeními StackLayoutBoxView nezávislými na zařízení:

obrazovky StackLayout s vodorovně orientovanýmobjektem StackLayout s

Ekvivalentní kód jazyka C# je:

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 }
        }
    };
}

Mezera mezi podřízenými zobrazeními

Mezery mezi podřízenými zobrazeními v objektu lze změnit nastavením vlastnosti StackLayout Xamarin_Forms StackLayout _StackLayout_Spacing" data-linktype="absolute-path">Spacing na double hodnotu:

<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>

Tento příklad vytvoří svislou obsahující objekty a StackLayoutLabel , které nemají BoxView mezery mezi nimi:

Snímek obrazovky s objektem StackLayoutbez mezer

Tip

Vlastnost Xamarin_Forms _StackLayout_Spacing" data-linktype="absolute-path">lze nastavit na záporné hodnoty, aby se podřízené Spacing zobrazení překrývala.

Ekvivalentní kód jazyka C# je:

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 }
            }
        };
    }
}

Umístění a velikost podřízených zobrazení

Velikost a umístění podřízených zobrazení v rámci objektu závisí na hodnotách podřízených zobrazení StackLayout Xamarin_Forms StackLayout _VisualElement_HeightRequest" data-linktype="absolutní_cesta">a HeightRequest Xamarin_Forms _VisualElement_WidthRequest" data-linktype="absolutní_cesta">vlastnosti a hodnoty jejich WidthRequest vlastností Xamarin_Forms HeightRequest _View_HorizontalOptions" data-linktype="absolutní_cesta">HorizontalOptions a Xamarin_Forms _View_VerticalOptions" data-linktype="absolute-path">VerticalOptions vlastnosti. Ve StackLayout svislém zobrazení se podřízené zobrazení rozbalí, aby vyplnilo dostupnou šířku, pokud jejich velikost není explicitně nastavená. Podobně ve vodorovném zobrazení se podřízené zobrazení rozšiřují tak, aby vyplnily dostupnou výšku, pokud jejich velikost StackLayout není explicitně nastavená.

Vlastnosti Xamarin_Forms _View_HorizontalOptions" data-linktype="absolute-path">a Xamarin_Forms HorizontalOptionsHorizontalOptions _View_VerticalOptions" data-linktype="absolute-path">VerticalOptionsStackLayout vlastnosti LayoutOptions objektu a jeho podřízených zobrazení lze nastavit na pole ze struktury, která zapouzdřuje dvě předvolby rozložení:

  • Zarovnání určuje umístění a velikost podřízeného zobrazení v jeho nadřazeném rozložení.
  • Rozšíření označuje, jestli má podřízené zobrazení používat dodatečné místo, pokud je k dispozici.

Tip

Nenastavovat Xamarin_Forms _View_HorizontalOptions" data-linktype="absolute-path">HorizontalOptions a Xamarin_Forms HorizontalOptions _View_VerticalOptions" data-linktype="absolute-path">VerticalOptions vlastností StackLayout objektu , pokud to nepotřebujete. Výchozí hodnoty a LayoutOptions.FillLayoutOptions.FillAndExpand umožňují nejlepší optimalizaci rozložení. Změna těchto vlastností má náklady a spotřebovává paměť, i když je nastavíte zpět na výchozí hodnoty.

Zarovnání

Následující příklad XAML nastaví předvolby zarovnání pro každé podřízené zobrazení v StackLayout :

<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>

V tomto příkladu jsou pro objekty nastaveny předvolby zarovnání, které Label řídí jejich pozici v objektu StackLayout . Pole , , a Start slouží k definování zarovnání objektů v CenterEndFillLabel nadřazeném objektu StackLayout :

Snímek obrazovky s objektem StackLayout s možnostmi zarovnání nastavenými na

Objekt StackLayout respektuje jenom předvolby zarovnání podřízených zobrazení, které jsou v opačném směru k orientaci objektu StackLayout. Proto podřízené zobrazení v rámci svisle orientovaného objektu nastavují své LabelStackLayout Xamarin_Forms Label _View_HorizontalOptions" data-linktype="absolutní_cesta">HorizontalOptions vlastnosti na jedno z polí zarovnání:

Ekvivalentní kód jazyka C# je:

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 }
            }
        };
    }
}

Rozšíření

Následující příklad XAML nastavuje předvolby rozšíření pro každý Label z nich v souboru StackLayout :

<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>

V tomto příkladu jsou pro objekty nastaveny předvolby rozšíření, které Label řídí jejich velikost v rámci objektu StackLayout . Pole , , a slouží k definování předvolby zarovnání a zda bude objekt zabírat více místa, pokud je k dispozici StartAndExpandCenterAndExpand v rámci EndAndExpandFillAndExpandLabel nadřazeného objektu StackLayout :

Snímek obrazovky s objektem StackLayout s možnostmi rozšíření nastavenýmina

Objekt StackLayout může rozšířit podřízená zobrazení jenom ve směru své orientace. Svisle orientovaný objekt proto může rozbalit podřízené zobrazení, které nastaví jejich StackLayoutLabel Xamarin_Forms StackLayout _View_VerticalOptions" data-linktype="absolute-path">vlastnosti na jedno z VerticalOptions rozšiřujících polí. Pro svislé zarovnání to znamená, že každý objekt Label zabírá v rámci objektu StackLayout stejně velké místo. Má ale jinou velikost pouze poslední Xamarin_Forms _View_VerticalOptions , která nastaví její vlastnost LabelLabel data-linktype="absolute-path">na VerticalOptionsFillAndExpand .

Tip

Pokud používáte , ujistěte se, že je pouze jedno podřízené zobrazení Xamarin_Forms StackLayoutStackLayout _LayoutOptions_Expands" data-linktype="absolute-path">LayoutOptions.Expands . Tato vlastnost zajišťuje, že zadaná podřízený objekt zabírá největší prostor, který jí může poskytnout, a je plýtvání prováděním těchto výpočtů StackLayout více než jednou.

Ekvivalentní kód jazyka C# je:

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 }
        }
    };
}

Důležité

Když je využité veškeré místo v objektu StackLayout, nemají předvolby rozšíření žádný vliv.

Další informace o zarovnání a rozšíření najdete v tématu Layout Options in Xamarin.Forms .

Vnořené objekty StackLayout

Lze StackLayout použít jako nadřazené rozložení, které obsahuje vnořené podřízené StackLayout objekty nebo jiná podřízený rozložení.

Následující kód XAML ukazuje příklad vnořování StackLayout objektů:

<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>

V tomto příkladu nadřazený objekt StackLayout obsahuje vnořené StackLayout objekty uvnitř Frame objektů. Nadřazený objekt StackLayout je orientovaný svisle, zatímco podřízené StackLayout objekty jsou orientované vodorovně:

svnořenými objekty StackLayout

Důležité

Čím hlouběji budete StackLayout vnořovat objekty a další rozložení, tím více budou mít vnořená rozložení vliv na výkon. Další informace najdete v tématu Volba správného rozložení.

Ekvivalentní kód jazyka C# je:

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 }
                        }
                    }
                },
                // ...
            }
        };
    }
}