Sdílet prostřednictvím


Zarovnání a umístění ovládacích prvků .NET MAUI

Každý ovládací prvek .NET Multi-Platform App UI (.NET MAUI), který je odvozen od View, který zahrnuje zobrazení a rozložení, má HorizontalOptions a VerticalOptions vlastnosti typu LayoutOptions. Struktura LayoutOptions zapouzdřuje upřednostňované zarovnání zobrazení, které určuje jeho pozici a velikost v rámci nadřazeného rozložení, pokud nadřazené rozložení obsahuje nepoužité místo (to znamená, že nadřazené rozložení je větší než kombinovaná velikost všech podřízených položek).

Kromě toho ovládací Margin prvky umístění a Padding vlastnosti vzhledem k sousedním nebo podřízeným ovládacím prvkům. Další informace naleznete v tématu Ovládací prvky pozice.

Zarovnání zobrazení v rozloženích

Zarovnání objektu View, vzhledem k jeho nadřazené, lze řídit nastavením HorizontalOptions nebo VerticalOptions vlastnosti View na jedno z veřejných polí ze LayoutOptions struktury. Veřejná pole jsou Start, Center, Enda Fill.

Pole Start, Center, Enda Fill pole slouží k definování zarovnání zobrazení v rámci nadřazeného rozložení:

  • U vodorovného zarovnání Start se umístí View na levou stranu nadřazeného rozložení a pro svislé zarovnání umístí View do horní části nadřazeného rozložení.
  • Pro vodorovné a svislé zarovnání, Center vodorovně nebo svisle zarovná View.
  • U vodorovného zarovnání End se umístí View na pravou stranu nadřazeného rozložení a pro svislé zarovnání umístí View do dolní části nadřazeného rozložení.
  • U vodorovného zarovnání zajistíte, Fill že View vyplní šířku nadřazeného rozložení a pro svislé zarovnání zajistí, že View se výška nadřazeného rozložení vyplní.

Poznámka:

Výchozí hodnota vlastností HorizontalOptions a VerticalOptions pro zobrazení je LayoutOptions.Fill.

Respektuje StackLayout pouze Startpole , , CenterEnda Fill LayoutOptions pole v podřízených zobrazeních, které jsou v opačném směru než StackLayout orientace. Podřízená zobrazení v rámci svisle orientovaného StackLayout objektu Startproto mohou nastavit jejich HorizontalOptions vlastnosti na jeden z , Center, Endnebo Fill polí. Podobně podřízená zobrazení v rámci vodorovně orientovaného StackLayout objektu Startmohou nastavit jejich VerticalOptions vlastnosti na jednu z hodnot , Center, Endnebo Fill polí.

A StackLayout nerespektuje Startpole , a Fill LayoutOptions CenterEndpole v podřízených zobrazeních, které jsou ve stejném směru jako StackLayout orientace. Proto svisle orientovaný StackLayout ignoruje Startpole , Center, Endnebo Fill pole, pokud jsou nastaveny na VerticalOptions vlastnosti podřízených zobrazení. Podobně vodorovně orientovaný StackLayout ignoruje Startpole , Center, Endnebo Fill pole, pokud jsou nastaveny na HorizontalOptions vlastnosti podřízených zobrazení.

Důležité

LayoutOptions.Fill obecně přepíše požadavky na velikost zadané pomocí HeightRequest vlastností a WidthRequest vlastností.

Následující příklad XAML ukazuje svisle orientované StackLayout , kde každá podřízená Label nastaví svou HorizontalOptions vlastnost na jedno ze čtyř polí zarovnání 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>

Následující snímek obrazovky znázorňuje výsledné zarovnání každého Labelz nich:

Snímek obrazovky s možnostmi rozložení zarovnání

Ovládací prvky pozice

Ovládací Margin prvky a Padding vlastnosti se umístí vzhledem k sousedním nebo podřízeným ovládacím prvkům. Koncepty rozložení okrajů a odsazení jsou související:

  • Vlastnost Margin představuje vzdálenost mezi prvkem a jeho sousedními prvky a slouží k řízení pozice vykreslování elementu a pozice vykreslování jeho sousedů. Margin hodnoty lze zadat v rozloženích a zobrazeních.
  • Vlastnost Padding představuje vzdálenost mezi elementem a jeho podřízenými prvky a slouží k oddělení ovládacího prvku od vlastního obsahu. Padding hodnoty lze zadat na stránkách, rozloženích a zobrazeních.

Následující diagram znázorňuje dva koncepty:

Koncepty okrajů a odsazení

Poznámka:

Margin hodnoty jsou přídatné. Proto pokud dva sousední prvky určují okraj 20 jednotek nezávislých na zařízení, vzdálenost mezi prvky bude 40 jednotek nezávislých na zařízení. Kromě toho jsou hodnoty okrajů a odsazení při použití obou při použití doplňkové, v tom, že vzdálenost mezi prvkem a jakýmkoli obsahem bude okraj plus odsazení.

Oba typy Margin a Padding vlastnosti jsou Thicknesstypu . Při vytváření Thickness struktury existují tři možnosti:

  • Vytvořte Thickness strukturu definovanou jednou jednotnou hodnotou. Jednoduchá hodnota se použije na levé, horní, pravé a dolní strany prvku.
  • Vytvořte strukturu definovanou Thickness vodorovnými a svislými hodnotami. Vodorovná hodnota je symetricky použita na levé a pravé straně prvku, přičemž svislá hodnota je symetricky použita na horní a dolní strany prvku.
  • Vytvořte strukturu definovanou Thickness čtyřmi jedinečnými hodnotami, které se použijí na levé, horní, pravé a dolní strany prvku.

Následující příklad XAML ukazuje všechny tři možnosti:

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

Ekvivalentní kód jazyka C# je:

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

Poznámka:

Thickness hodnoty můžou být záporné, což obvykle klipuje nebo překreslí obsah.