Układ kija w Xamarinie Formy na dole

Question

Składam aplikację w formularzach Xamarin, ale mam problem z przylepieniem układu do dolnej części urządzenia. Myślałem, że AbsoluteLayout zadziała, ale nie mogę pojąć, jak to działa. Zrobiłem więc RelativeLayout, który wypełniłem elementami, które chciałem wypełnić, ale teraz nie mogę sprawić, by działał cały czas na dole urządzenia.

Poniżej znajduje się zrzut ekranu, który sprawi, że sytuacja stanie się nieco bardziej przejrzysta. Mam stacklayout, który wypełniam dzięki funkcji headerlayout i contentlayout. Ale jeśli po prostu dodaję footerlayout do stosu, nie zostanie on przyklejony do dolnej części strony, ale (logicznie) tuż za poprzednim dzieckiem. Teraz myślę, że Absolutelayout mógłby zrobić lewę, ale nie mogę uchwycić funkcjonalności i Flagi układu i jej granic. Czy ktoś może mi pomóc?

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> 

Upewnij się, że nie mają więcej niż jedno dziecko z Expand opcji dla uzyskania najlepszej wydajności.

Answer 2

Można użyć VerticalOptions wysłać układ do dołu.

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

Answer 3

Zorientowałeś się już? Jeśli nie, istnieje kilka sposobów można to osiągnąć: Zauważ, że mam ten sam problem, mój własny, ale to jest moja teoria:

Tak, że można mieć StackLayout w którym wypełnić go z trzy "główne potomstwo". Pierwszy może być układem absolutnym lub względnym (jeszcze nie znam tej różnicy). Teoretycznie powinieneś być w stanie dodać element do absolutnego układu, a następnie dodać elementy na wierzchu pierwszego elementu, ponieważ układ bezwzględny używa indeksu Z, który działa jak warstwy w programie Photoshop. Więc innymi słowy zrobić to tak:

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

Następnie należy zrobić to samo ze stopką i pamiętaj, aby dodać topAbsoluteLayout do childeren w StackLayout.

Mam nadzieję, że to pomoże Ci się

Answer 4

I zdobione:

użyłem StackLayout, który zawiera trzy główne childeren

var stack = new StackLayout { 
       Children = 
        { 

         _header, 
         _grid, 
         _footer, 

        } 
      }; 

Następnie należy dodać nagłówek jako AbsoluteLayout i pamiętaj, aby użyć:

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

I dla głównego siatkę lub główną treść, powinieneś użyć siatki wewnątrz StackLayout, aby mieć pewność, że układ jest pionowy (Orientacja, jest właściwa do użycia tutaj).

I zrobić to samo na stopce i myślę, że jesteś dobry, aby przejść

Answer 5

Oto klasa, której używam do automatyzacji tego. Istnieje wiele dodatków, które możesz zrobić, rozszerzając klasę o przewijaną sekcję środkową (aby nie nakładała się na dno, jeśli jest zbyt długa) itp.

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

Następnie używać tego jako strony, na przykład:

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

ciągu RelativeLayout mam najlepsze rezultaty przy definiowaniu wysokość- i Y ograniczeń.

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

Wyniki: