Sdílet prostřednictvím

Shrnutí kapitoly 17. Ovládnutí mřížky

  • Článek

Poznámka:

Tato kniha byla publikována na jaře roku 2016 a od té doby nebyla aktualizována. Existuje mnoho v knize, která zůstává cenná, ale některé materiály jsou zastaralé a některá témata už nejsou zcela správná nebo úplná.

Jedná se Grid o výkonný mechanismus rozložení, který uspořádá podřízené položky do řádků a sloupců buněk. Na rozdíl od podobného elementu Grid HTML table je určen pouze pro účely rozložení místo prezentace.

Základní mřížka

Grid odvozen od Layout<View>, který definuje Children vlastnost, která Grid dědí. Tuto kolekci můžete vyplnit kódem XAML nebo kódem.

Mřížka v XAML

Definice jazyka Grid XAML obecně začíná vyplněním RowDefinitions a ColumnDefinitions kolekcemi Grid RowDefinition objektů a ColumnDefinition objektů. Tímto způsobem vytvoříte počet řádků a sloupců a Gridjejich vlastností.

RowDefinitionHeight má vlastnost a ColumnDefinition má Width vlastnost, obě typu GridLength, strukturu.

V xaml převede GridLengthTypeConverter jednoduché textové řetězce na GridLength hodnoty. Konstruktor na pozadíGridLength vytvoří GridLength hodnotu na základě čísla a hodnoty typu GridUnitType, výčet se třemi členy:

  • Absolute — šířka nebo výška je určena v jednotkách nezávislých na zařízení (číslo v XAML).
  • Auto — výška nebo šířka je automaticky založena na obsahu buňky ("Auto" v XAML)
  • Star — výška levého přechodu nebo šířka je přidělena proporcionálně (číslo s "*", označované jako hvězdička, v XAML)

Každému podřízení Grid musí být také přiřazen řádek a sloupec (explicitně nebo implicitně). Rozsahy řádků a rozsahy sloupců jsou volitelné. Všechny jsou zadány pomocí připojených vazebných vlastností – vlastnosti, které jsou definovány Grid , ale nastaveny na podřízené položky objektu Grid. Grid definuje čtyři statické připojené vlastnosti bindable:

  • RowProperty — řádek založený na nule; výchozí hodnota je 0
  • ColumnProperty — sloupec založený na nule; výchozí hodnota je 0
  • RowSpanProperty — počet řádků, které dítě zahrnuje; výchozí hodnota je 1
  • ColumnSpanProperty — počet sloupců, které dítě zahrnuje; výchozí hodnota je 1

Program v kódu může k nastavení a získání těchto hodnot použít osm statických metod:

V jazyce XAML použijete pro nastavení těchto hodnot následující atributy:

  • Grid.Row
  • Grid.Column
  • Grid.RowSpan
  • Grid.ColumnSpan

Ukázka SimpleGridDemo ukazuje vytvoření a inicializaci Grid v JAZYCE XAML.

Dědí Grid Padding vlastnost z Layout a definuje dvě další vlastnosti, které poskytují mezery mezi řádky a sloupci:

Kolekce RowDefinitions a ColumnDefinitions kolekce se nevyžadují výhradně. Pokud chybí, Grid vytvoří řádky a sloupce pro Grid podřízené položky a poskytne jim všechny výchozí GridLength hodnoty "*" (hvězdička).

Mřížka v kódu

Ukázka GridCodeDemo ukazuje, jak vytvořit a naplnit Grid kód. Připojené vlastnosti pro každé podřízené objekty můžete nastavit přímo nebo nepřímo voláním dalších Add metod, jako Add jsou definované rozhraním Grid.IGridList<T> .

Pruhový graf mřížky

Ukázka GridBarChart ukazuje, jak přidat více BoxView prvků k Grid použití hromadné AddHorizontal metody. Ve výchozím nastavení mají tyto BoxView prvky stejnou šířku. Výška každého z nich BoxView pak může být řízena tak, aby připomínala pruhový graf.

V Grid ukázce GridBarChart sdílí nadřazený objekt AbsoluteLayout s zpočátku neviditelným Frame. Program také nastaví TapGestureRecognizer jednotlivé položky BoxView tak, aby zobrazovaly Frame informace o klepnutí na panel.

Zarovnání v mřížce

Ukázka GridAlignment ukazuje, jak pomocí VerticalOptions vlastností HorizontalOptions zarovnat podřízené položky v Grid buňce.

MezeryButtons vzorek rovnoměrně mezery Button prvky zarovnané na střed v Grid buňkách.

Děliče a ohraničení buněk

Neobsahuje Grid funkci, která nakreslí oddělovače buněk nebo ohraničení. Můžete si ale vytvořit vlastní.

GridCellDividers ukazuje, jak definovat další řádky a sloupec speciálně pro tenké BoxView prvky napodobovat dělicí čáry.

Program GridCellBorders nevytvoří žádné další buňky, ale místo toho zarovná BoxView prvky v každé buňce tak, aby napodobily ohraničení buňky.

Téměř reálné příklady Gridu

Ukázka KeypadGridu používá Grid k zobrazení klávesnice:

Trojitý snímek obrazovky s mřížkou klávesnice

Reakce na změny orientace

Může Grid pomoci strukturovat program tak, aby reagoval na změny orientace. Ukázka GridRgbSliders ukazuje techniku, která přesune prvek mezi druhým řádkem telefonu orientovaného na výšku a druhým sloupcem telefonu orientovaného na šířku.

Program inicializuje Slider prvky do rozsahu 0 až 255 a používá datové vazby k zobrazení hodnoty posuvníků v šestnáctkové soustavě. Vzhledem k tomu, že Slider hodnoty jsou plovoucí desetinná čárka a formátovací řetězec .NET pro šestnáctkové hodnoty funguje pouze s celými čísly, DoubleToIntConvert pomůže to třída v Xamarin.Formsknihovně Book.Toolkit.