Wyrównanie i położenie kontrolek .NET MAUI

Każda kontrolka interfejsu użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) pochodząca z Viewklasy , która zawiera widoki i układy, ma HorizontalOptions właściwości LayoutOptionstypu VerticalOptions . Struktura LayoutOptions hermetyzuje preferowane wyrównanie widoku, które określa jego położenie i rozmiar 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 elementów podrzędnych).

Ponadto kontrolki Margin i Padding właściwości są ustawiane względem sąsiednich kontrolek lub kontrolek podrzędnych. Aby uzyskać więcej informacji, zobacz Kontrolki położenia.

Wyrównaj widoki w układach

Wyrównanie Viewobiektu , względem jego elementu nadrzędnego, można kontrolować przez ustawienie HorizontalOptions właściwości View lub VerticalOptions na jedno z pól publicznych ze LayoutOptions struktury. Pola publiczne to Start, , CenterEndi Fill.

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.

Uwaga

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

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.

Ważne

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

W poniższym przykładzie XAML pokazano 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>
  ...
  <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>

Poniższy zrzut ekranu przedstawia wynikowe wyrównanie każdego Labelelementu :

Kontrolki położenia

Kontrolki Margin położenia właściwości i Padding względem sąsiednich kontrolek lub kontrolek podrzędnych. Marginesy i wypełnienie to powiązane pojęcia dotyczące układu:

• Właściwość Margin reprezentuje odległość między elementem a sąsiednimi elementami i służy do kontrolowania pozycji renderowania elementu oraz położenia renderowania jego sąsiadów. Margin wartości można określić w układach i widokach.
• Właściwość Padding reprezentuje odległość między elementem a jego elementami podrzędnym i służy do oddzielania kontrolki od własnej zawartości. Padding wartości można określić na stronach, układach i widokach.

Na poniższym diagramie przedstawiono dwie koncepcje:

Uwaga

Margin wartości są addytywne. W związku z tym, jeśli dwa sąsiadujące elementy określają margines 20 jednostek niezależnych od urządzenia, odległość między elementami będzie wynosić 40 jednostek niezależnych od urządzenia. Ponadto wartości marginesu i wypełnienia są addytywne, gdy są stosowane, w tej odległości między elementem a dowolną zawartością będzie margines plus dopełnienie.

Właściwości Margin i Padding są typu Thickness. Istnieją trzy możliwości tworzenia Thickness struktury:

• Thickness Utwórz strukturę zdefiniowaną przez pojedynczą jednolitą wartość. Pojedyncza wartość jest stosowana do lewej, górnej, prawej i dolnej strony elementu.
• Utwórz strukturę zdefiniowaną Thickness przez wartości poziome i pionowe. Wartość pozioma jest symetrycznie stosowana do lewej i prawej strony elementu, a wartość pionowa jest stosowana symetrycznie do góry i dolnej strony elementu.
• Utwórz strukturę zdefiniowaną Thickness przez cztery odrębne wartości, które są stosowane do lewej, górnej, prawej i dolnej strony elementu.

Poniższy przykład XAML przedstawia wszystkie trzy możliwości:

<StackLayout Padding="0,20,0,0">
  <!-- Margin defined by a single uniform value. -->
  <Label Text=".NET MAUI" Margin="20" />
  <!-- Margin defined by horizontal and vertical values. -->  
  <Label Text=".NET for iOS" Margin="10,15" />
  <!-- Margin defined by four distinct values that are applied to the left, top, right, and bottom. -->  
  <Label Text=".NET for Android" Margin="0,20,15,5" />
</StackLayout>

Równoważny kod języka C# to:

StackLayout stackLayout = new StackLayout
{
  Padding = new Thickness(0,20,0,0)
};
// Margin defined by a single uniform value.
stackLayout.Add(new Label { Text = ".NET MAUI", Margin = new Thickness(20) });
// Margin defined by horizontal and vertical values.
stackLayout.Add(new Label { Text = ".NET for iOS", Margin = new Thickness(10,25) });
// Margin defined by four distinct values that are applied to the left, top, right, and bottom.
stackLayout.Add(new Label { Text = ".NET for Android", Margin = new Thickness(0,20,15,5) });  

Uwaga

Thickness wartości mogą być ujemne, co zwykle powoduje przycinanie lub przerysowywanie zawartości.