Udostępnij za pośrednictwem

Opcje układu w programie Xamarin.Forms

  • Artykuł

Każdy Xamarin.Forms widok ma właściwości HorizontalOptions i VerticalOptions typu LayoutOptions. W tym artykule wyjaśniono efekt, jaki każda wartość LayoutOptions ma na wyrównanie i rozszerzenie widoku.

Omówienie

Struktura LayoutOptions hermetyzuje dwie preferencje układu:

  • Wyrównanie — preferowane wyrównanie widoku, które określa jego położenie i rozmiar w układzie nadrzędnym.
  • Rozszerzenie — używane tylko przez element StackLayouti wskazuje, czy widok powinien używać dodatkowego miejsca, jeśli jest dostępny.

Te preferencje układu można zastosować do Viewobiektu , względem jego elementu nadrzędnego, ustawiając HorizontalOptions właściwość View lub VerticalOptions na jedno z pól publicznych ze LayoutOptions struktury. Pola publiczne są następujące:

Pola Start, Center, Endi Fill służą do definiowania wyrównania widoku w układzie nadrzędnym:

  • W przypadku wyrównania Start poziomego położenie View po lewej stronie układu nadrzędnego i wyrównanie w pionie powoduje położenie View u góry układu nadrzędnego.
  • W przypadku wyrównania poziomego i pionowego, Center w poziomie lub w pionie wyśrodkuje Viewelement .
  • W przypadku wyrównania End poziomego położenie View po prawej stronie układu nadrzędnego i wyrównanie w pionie powoduje położenie View w dolnej części układu nadrzędnego.
  • W przypadku wyrównania Fill w poziomie zapewnia, że View wypełnienie szerokości układu nadrzędnego i wyrównanie w pionie zapewnia View wypełnienie wysokości układu nadrzędnego.

Wartości StartAndExpand, CenterAndExpand, EndAndExpandi FillAndExpand służą do definiowania preferencji wyrównania oraz tego, czy widok zajmie więcej miejsca, jeśli jest dostępny w obiekcie nadrzędnym StackLayout.

Uwaga

Domyślna wartość właściwości widoku HorizontalOptions i VerticalOptions to LayoutOptions.Fill.

Wyrównanie

Wyrównanie określa położenie widoku w układzie nadrzędnym, gdy układ nadrzędny zawiera nieużywane miejsce (czyli układ nadrzędny jest większy niż łączny rozmiar wszystkich jego elementów podrzędnych).

Obiekt StackLayout uwzględnia Starttylko pola , , CenterEndi Fill LayoutOptions w widokach podrzędnych, które są w przeciwnym kierunku do orientacjiStackLayout. W związku z tym widoki podrzędne w orientacji StackLayout pionowej mogą ustawiać ich HorizontalOptions właściwości na jedno z Startpól , Center, Endlub Fill . Podobnie widoki podrzędne w orientacji StackLayout poziomej mogą ustawiać ich VerticalOptions właściwości na jedno z Startpól , Center, Endlub Fill .

Element A nie uwzględnia Startpól , Center, Endi Fill LayoutOptions w widokach podrzędnych, które są w tym samym kierunku co orientacjaStackLayout.StackLayout W związku z tym obiekt zorientowany StackLayout pionowo ignoruje Startpola , Center, Endlub Fill , jeśli są one ustawione we VerticalOptions właściwościach widoków podrzędnych. Podobnie obiekt zorientowany StackLayout poziomo ignoruje Startpola , Center, Endlub Fill , jeśli są one ustawione we HorizontalOptions właściwościach widoków podrzędnych.

Uwaga

LayoutOptions.Fill zazwyczaj zastępuje żądania dotyczące rozmiaru HeightRequest określone przy użyciu właściwości i WidthRequest .

Poniższy przykład kodu XAML przedstawia orientację StackLayout pionową, w której każdy element podrzędny Label ustawia jego HorizontalOptions właściwość na jedno z czterech pól wyrównania ze LayoutOptions struktury:

<StackLayout Margin="0,20,0,0">
  ...
  <Label Text="Start" BackgroundColor="Gray" HorizontalOptions="Start" />
  <Label Text="Center" BackgroundColor="Gray" HorizontalOptions="Center" />
  <Label Text="End" BackgroundColor="Gray" HorizontalOptions="End" />
  <Label Text="Fill" BackgroundColor="Gray" HorizontalOptions="Fill" />
</StackLayout>

Równoważny kod języka C# jest pokazany poniżej:

Content = new StackLayout
{
  Margin = new Thickness(0, 20, 0, 0),
  Children = {
    ...
    new Label { Text = "Start", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Start },
    new Label { Text = "Center", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Center },
    new Label { Text = "End", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.End },
    new Label { Text = "Fill", BackgroundColor = Color.Gray, HorizontalOptions = LayoutOptions.Fill }
  }
};

Kod powoduje wyświetlenie układu pokazanego na poniższych zrzutach ekranu:

Opcje układu wyrównania

Ekspansja

Rozszerzenie określa, czy widok zajmie więcej miejsca, jeśli jest dostępne, w obrębie obiektu StackLayout. Jeśli element StackLayout zawiera nieużywane miejsce (czyli StackLayout jest większy niż łączny rozmiar wszystkich elementów podrzędnych), nieużywane miejsce jest współużytkowane równomiernie przez wszystkie widoki podrzędne, które żądają rozszerzenia, ustawiając ich HorizontalOptions właściwości lub VerticalOptions na LayoutOptions pole, które używa sufiksu AndExpand . Należy pamiętać, że gdy wszystkie miejsca w obiekcie StackLayout są używane, opcje rozszerzenia nie mają żadnego efektu.

Obiekt StackLayout może rozwijać widoki podrzędne tylko w kierunku zgodnym ze swoją orientacją. W związku z tym orientacja StackLayout pionowa może rozszerzać widoki podrzędne, które ustawiają ich VerticalOptions właściwości na jedno z StartAndExpandpól , CenterAndExpand, EndAndExpandlub FillAndExpand , jeśli StackLayout zawiera nieużywane miejsce. Podobnie widok w StackLayout poziomie może rozszerzać widoki podrzędne, które ustawiają ich HorizontalOptions właściwości na jedno z StartAndExpandpól , CenterAndExpand, EndAndExpandlub FillAndExpand , jeśli StackLayout zawiera nieużywane miejsce.

Obiekt StackLayout nie może rozszerzać widoków podrzędnych w kierunku przeciwnym do orientacji. W związku z tym na orientacji StackLayoutpionowej właściwość HorizontalOptions w widoku StartAndExpand podrzędnym ma taki sam wpływ, jak ustawienie właściwości na Startwartość .

Uwaga

Należy pamiętać, że włączenie rozszerzenia nie zmienia rozmiaru widoku, chyba że używa metody LayoutOptions.FillAndExpand.

Poniższy przykład kodu XAML przedstawia orientację StackLayout pionową, w której każdy element podrzędny Label ustawia jego VerticalOptions właściwość na jedno z czterech pól rozszerzenia ze LayoutOptions struktury:

<StackLayout Margin="0,20,0,0">
  ...
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Start" BackgroundColor="Gray" VerticalOptions="StartAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Center" BackgroundColor="Gray" VerticalOptions="CenterAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="End" BackgroundColor="Gray" VerticalOptions="EndAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
  <Label Text="Fill" BackgroundColor="Gray" VerticalOptions="FillAndExpand" />
  <BoxView BackgroundColor="Red" HeightRequest="1" />
</StackLayout>

Równoważny kod języka C# jest pokazany poniżej:

Content = new StackLayout
{
  Margin = new Thickness(0, 20, 0, 0),
  Children = {
    ...
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "StartAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.StartAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "CenterAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.CenterAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "EndAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.EndAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 },
    new Label { Text = "FillAndExpand", BackgroundColor = Color.Gray, VerticalOptions = LayoutOptions.FillAndExpand },
    new BoxView { BackgroundColor = Color.Red, HeightRequest = 1 }
  }
};

Kod powoduje wyświetlenie układu pokazanego na poniższych zrzutach ekranu:

Opcje układu rozszerzenia

Każda Label z nich zajmuje taką samą ilość miejsca w obiekcie StackLayout. Tylko końcowy obiekt Label, który ustawia właściwość VerticalOptions na FillAndExpand, ma inny rozmiar. Ponadto każda z nich Label jest oddzielona małym czerwonym , BoxViewco umożliwia łatwe wyświetlanie miejsca zajmowanego Label przez miejsce.

Podsumowanie

W tym artykule wyjaśniono efekt, jaki każda LayoutOptions wartość struktury ma na wyrównanie i rozwinięcie widoku względem jego elementu nadrzędnego. Pola Start, Center, Endi Fill służą do definiowania wyrównania widoku w układzie nadrzędnym, a StartAndExpandpola , CenterAndExpand, EndAndExpandi FillAndExpand są używane do definiowania preferencji wyrównania oraz określenia, czy widok zajmie więcej miejsca, jeśli jest dostępny, w obrębie StackLayoutobiektu .