Xamarin.Forms
Xamarin Forms Layouts

ContentPresenter

Un gestore di layout per le viste basate su modelli. Utilizzato all'interno di un oggetto ControlTemplate per indicare dove apparirà il contenuto da presentare.

contentView

Un elemento con un singolo contenuto. ContentView ha un uso molto limitato. Il suo scopo è quello di fungere da classe base per le viste composte definite dall'utente.

XAML

<ContentView>
<Label Text="Hi, I'm a simple Label inside of a simple ContentView"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</ContentView>

Codice

var contentView = new ContentView {
Content = new Label {
 Text = "Hi, I'm a simple Label inside of a simple ContentView",
 HorizontalOptions = LayoutOptions.Center,
 VerticalOptions = LayoutOptions.Center
}
};

Telaio

Un elemento contenente un singolo figlio, con alcune opzioni di framing. Frame ha un predefinito Xamarin.Forms.Layout.Padding di 20.

XAML

<Frame>
<Label Text="I've been framed!"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Frame>

Codice

var frameView = new Frame {
Content = new Label {
 Text = "I've been framed!",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
},
OutlineColor = Color.Red
};

ScrollView

Un elemento in grado di scorrere se richiesto da Content .

ScrollView contiene layout e consente loro di scorrere fuori dallo schermo. ScrollView viene anche utilizzato per consentire alle viste di spostarsi automaticamente sulla porzione visibile dello schermo quando viene visualizzata la tastiera.

Nota: ScrollViews non deve essere annidato. Inoltre, ScrollViews non deve essere annidato con altri controlli che forniscono lo scorrimento, come ListView e WebView .

Un ScrollView è facile da definire. In XAML:

<ContentPage.Content>
    <ScrollView>
        <StackLayout>
            <BoxView BackgroundColor="Red" HeightRequest="600" WidthRequest="150" />
            <Entry />
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

La stessa definizione nel codice:

var scroll = new ScrollView();
Content = scroll;
var stack = new StackLayout();
stack.Children.Add(new BoxView { BackgroundColor = Color.Red,   HeightRequest = 600, WidthRequest = 600 });
stack.Children.Add(new Entry());

TemplatedView

Un elemento che visualizza il contenuto con un modello di controllo e la classe base per ContentView .

AbsoluteLayout

AbsoluteLayout posiziona e dimensiona elementi figlio proporzionali alla propria dimensione e posizione o valori assoluti. Le viste figlio possono essere posizionate e ridimensionate utilizzando valori proporzionali o valori statici e possono essere mischiati valori proporzionali e statici.

Una definizione di AbsoluteLayout in XAML si presenta così:

<AbsoluteLayout>
    <Label Text="I'm centered on iPhone 4 but no other device"
        AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap"  />
    <Label Text="I'm bottom center on every device."
        AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"
        LineBreakMode="WordWrap"  />
    <BoxView Color="Olive"  AbsoluteLayout.LayoutBounds="1,.5, 25, 100"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,1,25"
        AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional" />
</AbsoluteLayout>

Lo stesso layout sarebbe simile a questo nel codice:

Title = "Absolute Layout Exploration - Code";
var layout = new AbsoluteLayout();

var centerLabel = new Label {
Text = "I'm centered on iPhone 4 but no other device.",
LineBreakMode = LineBreakMode.WordWrap};

AbsoluteLayout.SetLayoutBounds (centerLabel, new Rectangle (115, 159, 100, 100));
// No need to set layout flags, absolute positioning is the default

var bottomLabel = new Label { Text = "I'm bottom center on every device.", LineBreakMode = LineBreakMode.WordWrap };
AbsoluteLayout.SetLayoutBounds (bottomLabel, new Rectangle (.5, 1, .5, .1));
AbsoluteLayout.SetLayoutFlags (bottomLabel, AbsoluteLayoutFlags.All);

var rightBox = new BoxView{ Color = Color.Olive };
AbsoluteLayout.SetLayoutBounds (rightBox, new Rectangle (1, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (rightBox, AbsoluteLayoutFlags.PositionProportional);

var leftBox = new BoxView{ Color = Color.Red };
AbsoluteLayout.SetLayoutBounds (leftBox, new Rectangle (0, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (leftBox, AbsoluteLayoutFlags.PositionProportional);

var topBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 100, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional);

var twoFlagsBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 1, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional | AbsoluteLayout.WidthProportional);

layout.Children.Add (bottomLabel);
layout.Children.Add (centerLabel);
layout.Children.Add (rightBox);
layout.Children.Add (leftBox);
layout.Children.Add (topBox);

Il controllo AbsoluteLayout in Xamarin.Forms ti consente di specificare dove esattamente sullo schermo vuoi che vengano visualizzati gli elementi figli, nonché le loro dimensioni e forma (limiti).

Esistono diversi modi per impostare i limiti degli elementi figlio in base all'enumerazione AbsoluteLayoutFlags utilizzata durante questo processo. L'enumerazione AbsoluteLayoutFlags contiene i seguenti valori:

• Tutti : tutte le dimensioni sono proporzionali.
• HeightProportional : l'altezza è proporzionale al layout.
• Nessuno : nessuna interpretazione è stata eseguita.
• PositionProportional : combina XProportional e YProportional.
• SizeProportional : Combina WidthProportional e HeightProportional.
• WidthProportional: larghezza è proporzionale al layout.
• XProporzionale : la proprietà X è proporzionale al layout.
• YProporzionale : la proprietà Y è proporzionale al layout.

Il processo di lavorare con il layout del contenitore AbsoluteLayout può sembrare inizialmente poco intuitivo, ma con un po 'di uso diventerà familiare. Una volta creati gli elementi figlio, per impostarli in una posizione assoluta all'interno del contenitore, dovrai seguire tre passaggi. Dovrai impostare i flag assegnati agli elementi usando il metodo AbsoluteLayout.SetLayoutFlags () . Dovrai anche usare il metodo AbsoluteLayout.SetLayoutBounds () per dare agli elementi i loro limiti. Infine, dovrai aggiungere gli elementi figlio alla collezione Bambini. Poiché Xamarin.Forms è un livello di astrazione tra Xamarin e le implementazioni specifiche del dispositivo, i valori posizionali possono essere indipendenti dai pixel del dispositivo. È qui che entrano in gioco le bandiere di layout menzionate in precedenza. È possibile scegliere in che modo il processo di layout dei controlli Xamarin.Forms deve interpretare i valori definiti.

Griglia

Un layout contenente viste disposte in righe e colonne.

Questa è una tipica definizione di Grid in XAML.

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="2*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="200" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
    
  <ContentView Grid.Row="0" Grid.Column="0"/>
  <ContentView Grid.Row="1" Grid.Column="0"/>
  <ContentView Grid.Row="2" Grid.Column="0"/>

  <ContentView Grid.Row="0" Grid.Column="1"/>
  <ContentView Grid.Row="1" Grid.Column="1"/>
  <ContentView Grid.Row="2" Grid.Column="1"/>

</Grid>

La stessa Grid definita nel codice assomiglia a questo:

var grid = new Grid();
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(2, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(200)});
grid.ColumnDefinitions.Add (new ColumnDefinition{ Width = new GridLength (200) });

Per aggiungere elementi alla griglia: In XAML :

<Grid>
      
   <--DEFINITIONS...--!>
        
   <ContentView Grid.Row="0" Grid.Column="0"/>
   <ContentView Grid.Row="1" Grid.Column="0"/>
   <ContentView Grid.Row="2" Grid.Column="0"/>

   <ContentView Grid.Row="0" Grid.Column="1"/>
   <ContentView Grid.Row="1" Grid.Column="1"/>
   <ContentView Grid.Row="2" Grid.Column="1"/>

</Grid>

Nel codice C #:

var grid = new Grid();
//DEFINITIONS...
var topLeft = new Label { Text = "Top Left" };
var topRight = new Label { Text = "Top Right" };
var bottomLeft = new Label { Text = "Bottom Left" };
var bottomRight = new Label { Text = "Bottom Right" };
grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 0, 1);
grid.Children.Add(bottomLeft, 1, 0);
grid.Children.Add(bottomRight, 1, 1);

Per Height e Width sono disponibili un numero di unità.

• Auto : ridimensiona automaticamente il contenuto nella riga o nella colonna. Specificato come GridUnitType.Auto in C # o Auto in XAML.
• Proporzionale : misura le colonne e le righe come proporzione dello spazio rimanente. Specificato come valore e GridUnitType.Star in C # e come # * in XAML, dove # rappresenta il valore desiderato. Specificare una riga / colonna con * lo farà riempire lo spazio disponibile.
• Assoluto : consente di dimensionare colonne e righe con valori specifici di altezza e larghezza fissi. Specificato come valore e GridUnitType.Absolute in C # e come # in XAML, con # come valore desiderato.

Nota: i valori di larghezza per le colonne sono impostati automaticamente su Xamarin.Forms, il che significa che la larghezza è determinata dalla dimensione dei bambini. Si noti che questo differisce dall'implementazione di XAML su piattaforme Microsoft, dove la larghezza predefinita è *, che riempirà lo spazio disponibile.

RelativeLayout

Un Layout che utilizza i Constraints per disporre i propri figli.

RelativeLayout viene utilizzato per posizionare e dimensionare le viste relative alle proprietà delle viste di layout o di pari livello. A differenza di AbsoluteLayout , RelativeLayout non ha il concetto dell'ancora mobile e non ha le strutture per posizionare gli elementi relativi ai bordi inferiore o destro del layout. RelativeLayout supporta elementi di posizionamento al di fuori dei propri limiti.

Un RelativeLayout in XAML, è come questo:

<RelativeLayout>
    <BoxView Color="Red" x:Name="redBox"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Height,Factor=.15,Constant=0}"
        RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}" />
    <BoxView Color="Blue"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
            ElementName=redBox,Property=Y,Factor=1,Constant=20}"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
            ElementName=redBox,Property=X,Factor=1,Constant=20}"
        RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}" />
</RelativeLayout>

Lo stesso layout può essere realizzato con questo codice:

layout.Children.Add (redBox, Constraint.RelativeToParent ((parent) => {
        return parent.X;
    }), Constraint.RelativeToParent ((parent) => {
        return parent.Y * .15;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Width;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Height * .8;
    }));
layout.Children.Add (blueBox, Constraint.RelativeToView (redBox, (Parent, sibling) => {
        return sibling.X + 20;
    }), Constraint.RelativeToView (blueBox, (parent, sibling) => {
        return sibling.Y + 20;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Width * .5;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Height * .5;
    }));

stackLayout

StackLayout organizza le viste in una linea unidimensionale ("stack"), sia in orizzontale che in verticale. Views in uno StackLayout possono essere ridimensionate in base allo spazio nel layout utilizzando le opzioni di layout. Il posizionamento è determinato dalle viste dell'ordine aggiunte al layout e dalle opzioni di layout delle viste.

Utilizzo in XAML

<StackLayout>
    <Label Text="This will be on top" />
    <Button Text="This will be on the bottom" />
</StackLayout>

Utilizzo nel codice

StackLayout stackLayout = new StackLayout
{
    Spacing = 0,
    VerticalOptions = LayoutOptions.FillAndExpand,
    Children = 
    {
        new Label
        {
            Text = "StackLayout",
            HorizontalOptions = LayoutOptions.Start
        },
        new Label
        {
            Text = "stacks its children",
            HorizontalOptions = LayoutOptions.Center
        },
        new Label
        {
            Text = "vertically",
            HorizontalOptions = LayoutOptions.End
        },
        new Label
        {
            Text = "by default,",
            HorizontalOptions = LayoutOptions.Center
        },
        new Label
        {
            Text = "but horizontal placement",
            HorizontalOptions = LayoutOptions.Start
        },
        new Label
        {
            Text = "can be controlled with",
            HorizontalOptions = LayoutOptions.Center
        },
        new Label
        {
            Text = "the HorizontalOptions property.",
            HorizontalOptions = LayoutOptions.End
        },
        new Label
        {
            Text = "An Expand option allows one or more children " +
                   "to occupy the an area within the remaining " +
                   "space of the StackLayout after it's been sized " +
                   "to the height of its parent.",
            VerticalOptions = LayoutOptions.CenterAndExpand,
            HorizontalOptions = LayoutOptions.End
        },
        new StackLayout
        {
            Spacing = 0,
            Orientation = StackOrientation.Horizontal,
            Children = 
            {
                new Label
                {
                    Text = "Stacking",
                },
                new Label
                {
                    Text = "can also be",
                    HorizontalOptions = LayoutOptions.CenterAndExpand
                },
                new Label
                {
                    Text = "horizontal.",
                },
            }
        }
    }
};