Stick Layout in Xamarin Forms in basso

Sto facendo 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 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 Absolucanvasyout farebbe il trucco, ma non riesco a cogliere la funzionalità e il Layoutflags e i limiti di esso. Qualcuno potrebbe aiutarmi?

La mia applicazione

           

Assicurati di non avere più di un bambino con le opzioni di Expand per prestazioni ottimali.

Puoi utilizzare VerticalOptions per inviare il layout in basso.

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

All’interno di un RelativeLayout ho ottenuto i migliori risultati con la definizione dei vincoli di altezza e Y.

               

risultati:

Risultati Android

Lo hai già capito? In caso contrario, ci sono alcuni modi in cui puoi ottenere questo risultato: noti che ho lo stesso problema da solo, ma questa è la mia teoria:

In modo da poter avere uno StackLayout in cui lo si popola con tre “childeren 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, fai così:

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

Quindi dovresti fare la stessa cosa con il footer e ricordarti di aggiungere topAbsoluteLayout a Childeren nello StackLayout.

Spero che questo ti aiuti

Ecco una class che uso per automatizzare questo. C’è un sacco di aggiunte che puoi fare estendendo la class 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 per 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; ... } ... } 

L’avevo capito:

Ho usato uno StackLayout, che contiene i tre principali Childeren

  var stack = new StackLayout { Children = { _header, _grid, _footer, } }; 

E poi dovresti aggiungere l’intestazione come AbsoluteLayout e ricordarti di usare:

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

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

E fai la stessa cosa per il footer e immagino che tu sia a posto