StackLayout xamarin. FormsXamarin.Forms StackLayout

Scaricare esempio Scaricare l'esempioDownload Sample Download the sample

StackLayout organizza le visualizzazioni in una riga unidimensionale ("stack"), orizzontalmente o verticalmente.StackLayout organizes views in a one-dimensional line ("stack"), either horizontally or vertically. Viste di un StackLayout può essere dimensionato base allo spazio del layout usando le opzioni di layout.Views in a StackLayout can be sized based on the space in the layout using layout options. Il posizionamento è determinato dall'ordine con le visualizzazioni sono stati aggiunti al layout e le opzioni di layout delle visualizzazioni.Positioning is determined by the order views were added to the layout and the layout options of the views.

ScopoPurpose

StackLayout è meno complesso altre viste.StackLayout is less complex than other views. È possibile creare interfacce lineare semplice semplicemente aggiungendo visualizzazioni da un StackLayoute le interfacce più complesse create da loro di annidamento.Simple linear interfaces can be created by just adding views to a StackLayout, and more complex interfaces created by nesting them.

L'utilizzo e comportamentoUsage & Behavior

Spacing (Spaziatura)Spacing

Per impostazione predefinita, StackLayout aggiungerà un margine 6px tra le visualizzazioni.By default, StackLayout will add a 6px margin between views. Ciò può essere controllata o configurata in modo non margine impostando il Spacing proprietà StackLayout.This can be controlled or set to have no margin by setting the Spacing property on StackLayout. Di seguito viene illustrato come impostare la spaziatura e l'effetto delle opzioni di spaziatura diversa:The following demonstrates how to set spacing and the effect of different spacing options:

In XAML:In XAML:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LayoutSamples.StackLayoutDemo"
Title="StackLayout Demo">
  <ContentPage.Content>
    <StackLayout Spacing="10" x:Name="layout">
      <Button Text="StackLayout" VerticalOptions="Start"
        HorizontalOptions="FillAndExpand" />
      <BoxView Color="Yellow" VerticalOptions="FillAndExpand"
        HorizontalOptions="FillAndExpand" />
            <BoxView Color="Green" VerticalOptions="FillAndExpand"
        HorizontalOptions="FillAndExpand" />
            <BoxView HeightRequest="75" Color="Blue" VerticalOptions="End"
        HorizontalOptions="FillAndExpand" />
    </StackLayout>
    </ContentPage.Content>
</ContentPage>

In C#:In C#:

public class StackLayoutCode : ContentPage
{
  public StackLayoutCode ()
  {
    var layout = new StackLayout ();
    var button = new Button { Text = "StackLayout", VerticalOptions = LayoutOptions.Start,
     HorizontalOptions = LayoutOptions.FillAndExpand };
    var yellowBox = new BoxView { Color = Color.Yellow, VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand };
    var greenBox = new BoxView { Color = Color.Green, VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand };
    var blueBox = new BoxView { Color = Color.Blue, VerticalOptions = LayoutOptions.FillAndExpand,
      HorizontalOptions = LayoutOptions.FillAndExpand, HeightRequest = 75 };

    layout.Children.Add(button);
    layout.Children.Add(yellowBox);
    layout.Children.Add(greenBox);
    layout.Children.Add(blueBox);
    layout.Spacing = 10;
    Content = layout;
  }
}

Spaziatura = 0:Spacing = 0:

Spaziatura a dieci:Spacing of ten:

RidimensionamentoSizing

Le dimensioni di una vista in un StackLayout dipendono sia le richieste di altezza e la larghezza e le opzioni di layout.The size of a view in a StackLayout depends on both the height and width requests and the layout options. StackLayout impone la spaziatura interna.StackLayout will enforce padding. Nell'esempio LayoutOptions determinerà le viste a occupare tutto lo spazio disponibile del layout:The following LayoutOptions will cause views to take up as much space as is available from the layout:

  • CenterAndExpand – Centra la visualizzazione all'interno del layout e si espande in modo da occupare tutto lo spazio verrà assegnato automaticamente il layout.CenterAndExpand – centers the view within the layout and expands to take up as much space as the layout will give it.
  • EndAndExpand – posiziona la visualizzazione al termine del layout (in basso o un limite più a destra) e si espande in modo da occupare tutto lo spazio verrà assegnato automaticamente il layout.EndAndExpand – places the view at the end of the layout (bottom or right-most boundary) and expands to take up as much space as the layout will give it.
  • FillAndExpand – posiziona la visualizzazione in modo che non ha alcun riempimento e occupa tutto lo spazio verrà assegnato automaticamente il layout.FillAndExpand – places the view so that it has no padding and takes up as much space as the layout will give it.
  • StartAndExpand – posiziona la visualizzazione all'inizio del layout e occupa tutto lo spazio fornirà l'elemento padre.StartAndExpand – places the view at the start of the layout and takes up as much space as the parent will give.

Per altre informazioni, vedere espansione.For more information, see Expansion.

PosizionamentoPositioning

Viste in un StackLayout può essere posizionate e dimensioni tramite LayoutOptions.Views in a StackLayout can be positioned and sized using LayoutOptions. Ogni vista può essere fornito VerticalOptions e HorizontalOptions, che definisce come le viste verranno posizionano in base al layout.Each view can be given VerticalOptions and HorizontalOptions, defining how the views will position themselves relative to the layout. Predefinite seguenti LayoutOptions disponibili:The following predefined LayoutOptions are available:

  • Centro – Centra la visualizzazione all'interno del layout.Center – centers the view within the layout.
  • Estremità – posiziona la visualizzazione al termine del layout (in basso o un limite più a destra).End – places the view at the end of the layout (bottom or right-most boundary).
  • Riempire – posiziona la visualizzazione in modo che non includa alcun riempimento.Fill – places the view so that it has no padding.
  • Avviare – posiziona la visualizzazione all'inizio del layout.Start – places the view at the start of the layout.

Il codice seguente illustra l'impostazione delle opzioni di layout:The following code demonstrates setting layout options:

In XAML:In XAML:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LayoutSamples.StackLayoutDemo"
Title="StackLayout Demo">
  <ContentPage.Content>
    <StackLayout x:Name="layout">
      <Button VerticalOptions="Start"
        HorizontalOptions="FillAndExpand" />
      <BoxView VerticalOptions="FillAndExpand"
        HorizontalOptions="FillAndExpand" />
            <BoxView VerticalOptions="FillAndExpand"
        HorizontalOptions="FillAndExpand" />
            <BoxView HeightRequest="75" VerticalOptions="End"
        HorizontalOptions="FillAndExpand" />
    </StackLayout>
    </ContentPage.Content>
</ContentPage>

In C#:In C#:

public class StackLayoutCode : ContentPage
{
  public StackLayoutCode ()
  {
    var layout = new StackLayout ();
    var button = new Button { VerticalOptions = LayoutOptions.Start,
     HorizontalOptions = LayoutOptions.FillAndExpand };
    var oneBox = new BoxView { VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand };
    var twoBox = new BoxView {  VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand };
    var threeBox = new BoxView {  VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand };

    layout.Children.Add(button);
    layout.Children.Add(oneBox);
    layout.Children.Add(twoBox);
    layout.Children.Add(threeBox);
    Content = layout;
  }
}

Per altre informazioni, vedere allineamento.For more information, see Alignment.

Esplorazione di un Layout complessoExploring a Complex Layout

Ognuno dei layout presentano vantaggi e svantaggi per la creazione di layout specifico.Each of the layouts have strengths and weaknesses for creating particular layouts. In questa serie di articoli di layout, un'app di esempio è stata creata con lo stesso layout di pagina implementato usando tre layout diversi.Throughout this series of layout articles, a sample app has been created with the same page layout implemented using three different layouts.

Si consideri il seguente XAML:Consider the following XAML:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TheBusinessTumble.StackLayoutPage"
BackgroundColor="Maroon"
Title="StackLayouts">
    <ContentPage.Content>
    <ScrollView>
      <StackLayout Spacing="0" Padding="0" BackgroundColor="Maroon">
        <BoxView HorizontalOptions="FillAndExpand" HeightRequest="100"
          VerticalOptions="Start" Color="Gray" />
        <Button BorderRadius="30" HeightRequest="60" WidthRequest="60"
          BackgroundColor="Red" HorizontalOptions="Center" VerticalOptions="Start" />
        <StackLayout HeightRequest="100" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Spacing="20" BackgroundColor="Maroon">
          <Label Text="User Name" FontSize="28" HorizontalOptions="Center"
            VerticalOptions="Center" FontAttributes="Bold" />
          <Entry Text="Bio + Hashtags" TextColor="White"
            BackgroundColor="Maroon" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" />
        </StackLayout>
        <StackLayout Orientation="Horizontal" HeightRequest="50" BackgroundColor="White" Padding="5">
          <StackLayout Spacing="0" BackgroundColor="White" Orientation="Horizontal" HorizontalOptions="Start">
            <BoxView BackgroundColor="Black" WidthRequest="40" HeightRequest="40"  HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
            <Label FontSize="14" TextColor="Black" Text="Accent Color" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
          </StackLayout>
          <StackLayout Spacing="0" BackgroundColor="White" Orientation="Horizontal" HorizontalOptions="EndAndExpand">
            <BoxView BackgroundColor="Maroon" WidthRequest="40" HeightRequest="40" HorizontalOptions="Start" VerticalOptions="Center" />
            <Label FontSize="14" TextColor="Black" Text="Primary Color" HorizontalOptions="StartAndExpand" VerticalOptions="Center" />
          </StackLayout>
        </StackLayout>
        <StackLayout Orientation="Horizontal">
          <Label FontSize="14" Text="Age:" TextColor="White" HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100" />
          <Entry HorizontalOptions="FillAndExpand" Text="35" TextColor="White" BackgroundColor="Maroon" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
          <Label FontSize="14" Text="Interests:" TextColor="White"
          HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100" />
          <Entry HorizontalOptions="FillAndExpand" Text="Xamarin.Forms" TextColor="White" BackgroundColor="Maroon" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
          <Label FontSize="14" Text="Ask me about:" TextColor="White"
          HorizontalOptions="Start" VerticalOptions="Center" WidthRequest="100"/>
          <Entry HorizontalOptions="FillAndExpand" Text="Xamarin, C#, .NET, Mono..." TextColor="White" BackgroundColor="Maroon" />
        </StackLayout>
      </StackLayout>
    </ScrollView>
    </ContentPage.Content>
</ContentPage>

Il codice precedente genera il layout seguente:The above code results in the following layout:

Si noti che StackLayouts sono annidati, perché in alcuni casi i layout di annidamento possono essere più semplici rispetto alla presentazione di tutti gli elementi all'interno dello stesso layout.Notice that the StackLayouts are nested, because in some cases nesting layouts can be easier than presenting all elements within the same layout. Si noti inoltre che, in quanto StackLayout non supporta elementi sovrapposti, trovare la pagina non sono in parte il niceties layout nelle pagine per gli altri layout.Also notice that, because StackLayout doesn't support overlapping items, the page doesn't have some of the layout niceties found in the pages for the other layouts.