Layout stick in Xamarin Form in fondo

Question

Sto creando un'applicazione nei moduli Xamarin, ma ho qualche problema ad attaccare un layout alla parte inferiore del dispositivo. Pensavo che un AbsoluteLayout avrebbe funzionato, ma non riesco a capire come funziona. Così ho creato un RelativeLayout che ho riempito con gli elementi che volevo riempire ma ora non riesco a farlo funzionare continuando ad attaccare alla base del dispositivo in qualsiasi momento.

Di seguito è uno screenshot per rendere le cose si spera un po 'più chiare. Ho uno stacklayout che riempio con l'headerlayout e il contentlayout. Ma se aggiungo il footerlayout allo stacklayout, non sarà incollato in fondo alla pagina ma (logicamente) solo dietro al bambino precedente. Ora penso che un Absolutelayout farebbe il trucco, ma non riesco a cogliere la funzionalità e il Layoutflags e i limiti di esso. Qualcuno potrebbe aiutarmi?

Answer 1

<StackLayout> 
    <StackLayout Orientation="Horizontal" VerticalOptions="Start"> 
    <!-- top controls --> 
    </StackLayout> 

    <StackLayout VerticalOptions="CenterAndExpand"> 
    <!-- middle controls --> 
    </StackLayout> 

    <StackLayout Orientation="Horizontal" VerticalOptions="End"> 
    <!-- bottom controls --> 
    </StackLayout> 
</StackLayout> 

Assicurarsi di non avere più di un bambino con Expand opzioni per la migliore prestazione.

Answer 2

È possibile utilizzare VerticalOptions per inviare il layout a fondo.

var stacklayout = new stackLayout() 
{ 
    VerticalOptions = LayoutOptions.EndAndExpand 
    Children = { 
     //your elements 
    } 
} 

Answer 3

Avete già capito? In caso contrario, c'è un paio di modi si potrebbe ottenere questo risultato: notare che io ho lo stesso problema la mia auto, ma questa è la mia teoria:

In modo che si potrebbe avere uno stackLayout in cui si popolarlo con tre "bambini principali". Il primo potrebbe essere un layout assoluto o relativo (non conosco ancora la differenza). In teoria dovresti essere in grado di aggiungere un elemento al layout assoluto e quindi aggiungere elementi in cima al primo elemento, perché il layout assoluto usa uno z-index, che funziona come i livelli in Photoshop. Quindi, in altre parole fare in questo modo:

var topAbsoluteLayout = new AbsoluteLayout(); 

      topAbsoluteLayout.Children.Add(header, new Point(0, 0)); 
      topAbsoluteLayout.Children.Add(element1, new Point(x,y)); 
      topAbsoluteLayout.Children.Add(element2, new Point(x, y)); 

allora si dovrebbe fare la stessa cosa con il piè di pagina e ricordarsi di aggiungere topAbsoluteLayout alla Childeren nel stackLayout.

Spero che questo ti aiuta

Answer 4

ho capito:

ho usato una stackLayout, che contiene le tre Childeren principali

var stack = new StackLayout { 
       Children = 
        { 

         _header, 
         _grid, 
         _footer, 

        } 
      }; 

E poi si dovrebbe aggiungere l'intestazione come AbsoluteLayout e ricorda di utilizzare:

{ 
    AbsoluteLayout.SetLayoutFlags(_imageYouWantToUse, AbsoluteLayoutFlags.PositionProportional); 
    AbsoluteLayout.SetLayoutBounds(_imageYouWantToUse, new Rectangle(x, y, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize)); 
_headerAbsLayout.Children.Add(_imageYouWantToUse); 
    } 

E per il principale griglia o il contenuto principale, dovresti usare una griglia all'interno di uno StackLayout, in modo da essere sicuro che il layout sia verticale (Orientamento, è quello giusto da usare qui).

e fare la stessa cosa per il piè di pagina e penso che si sta bene ad andare

Answer 5

Ecco una classe che uso per automatizzare questo. C'è un sacco di aggiunte che puoi fare estendendo la classe ad avere una sezione centrale scorrevole (quindi non si sovrappone al fondo se troppo lunga) ecc!

public class CakeLayout : StackLayout 
{ 
    public CakeLayout() 
    { 
     TopStack = new StackLayout // TOP stack 
     { 
      Orientation = StackOrientation.Horizontal, 
      VerticalOptions = LayoutOptions.Start 
     }; 

     CenterStack = new StackLayout // CENTER stack 
     { 
      VerticalOptions = LayoutOptions.CenterAndExpand 
     }; 

     BottomStack = new StackLayout // BOTTOM stack 
     { 
      Orientation = StackOrientation.Horizontal, 
      VerticalOptions = LayoutOptions.End 
     }; 

     Children.Add(TopStack); 
     Children.Add(CenterStack); 
     Children.Add(BottomStack); 
    } 

    public StackLayout BottomStack { get; private set; } 
    public StackLayout CenterStack { get; private set; } 
    public StackLayout TopStack { get; private set; } 
} 

quindi di utilizzare questo come una pagina, ad esempio:

public class MyPage 
{ 
    public MyPage() 
    { 
     CakeLayout cakeLayout = new CakeLayout(); 

     cakeLayout.TopStack.Children.Add(new Label { Text = "Hello Cake" }); 
     cakeLayout.CenterStack.Children.Add(MyListView); 
     cakeLayout.BottomStack.Children.Add(MyButton); 

     // Assign the cake to the page 
     this.Content = cakeLayout; 
     ... 
    } 
... 
} 

Answer 6

Entro un RelativeLayout ho ottenuto i migliori risultati con la definizione del altezza e Y-Constraint.

<RelativeLayout> 
     <StackLayout VerticalOptions="Start" BackgroundColor="Green" 
        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" 
        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.25}"> 
      <!-- Top Content --> 
      <Button Text="Top Button" Clicked="Button_OnClicked" /> 
     </StackLayout> 

     <StackLayout VerticalOptions="Center" BackgroundColor="Aqua" 
          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" 
          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.30}" 
          RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.6}"> 
      <!-- Mid Content --> 
      <Button Text="Mid Button" Clicked="Button_OnClicked" /> 
     </StackLayout> 

     <StackLayout VerticalOptions="End" BackgroundColor="Yellow" 
          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" 
          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.90}" 
          RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.1}"> 

      <!-- Bottom Content --> 
      <Button Text="Bottom Button" Clicked="Button_OnClicked" /> 
     </StackLayout> 
</RelativeLayout> 

Risultati: