Udostępnij za pośrednictwem

Podsumowanie rozdziału 17. Opanowanie siatki

  • Artykuł

Uwaga

Ta książka została opublikowana wiosną 2016 roku i od tego czasu nie została zaktualizowana. Jest wiele w książce, która pozostaje cenna, ale niektóre materiały są nieaktualne, a niektóre tematy nie są już całkowicie poprawne ani kompletne.

Jest Grid to zaawansowany mechanizm układu, który rozmieszcza elementy podrzędne w wiersze i kolumny komórek. W przeciwieństwie do podobnego elementu HTML table element Grid jest przeznaczony wyłącznie do celów układu, a nie prezentacji.

Podstawowa siatka

Grid element pochodzi z Layout<View>klasy , która definiuje Children właściwość, która Grid dziedziczy. Tę kolekcję można wypełnić w języku XAML lub kodzie.

Siatka w języku XAML

Definicja elementu Grid w języku XAML zwykle rozpoczyna się od wypełniania RowDefinitions kolekcji Grid RowDefinition i ColumnDefinitions obiektów i .ColumnDefinition W ten sposób określasz liczbę wierszy i kolumn Gridwłaściwości , i ich właściwości.

RowDefinitionHeight ma właściwość i ColumnDefinition ma Width właściwość , zarówno typu GridLength, jak i strukturę.

W języku XAML funkcja GridLengthTypeConverter konwertuje proste ciągi tekstowe na GridLength wartości. W tle GridLength konstruktor tworzy GridLength wartość na podstawie liczby i wartości typu GridUnitType, wyliczenia z trzema elementami członkowskimi:

  • Absolute — szerokość lub wysokość jest określona w jednostkach niezależnych od urządzenia (liczba w języku XAML)
  • Auto — wysokość lub szerokość jest automatycznie opierać się na zawartości komórki ("Auto" w języku XAML)
  • Star — wysokość lub szerokość lewej strony jest przydzielana proporcjonalnie (liczba o nazwie "*", nazywana gwiazdką w języku XAML)

Każdy element podrzędny Grid musi mieć również przypisany wiersz i kolumnę (jawnie lub niejawnie). Zakresy wierszy i zakresy kolumn są opcjonalne. Wszystkie te właściwości są określane przy użyciu dołączonych właściwości możliwych do powiązania — właściwości, które są definiowane przez Grid element podrzędny elementu Gridpodrzędnego . Grid definiuje cztery statyczne powiązane właściwości:

  • RowProperty — wiersz oparty na zerach; wartość domyślna to 0
  • ColumnProperty — kolumna oparta na zerach; wartość domyślna to 0
  • RowSpanProperty — liczba wierszy, które obejmuje element podrzędny; wartość domyślna to 1
  • ColumnSpanProperty — liczba kolumn, które obejmuje element podrzędny; wartość domyślna to 1

W kodzie program może używać ośmiu metod statycznych do ustawiania i pobierania następujących wartości:

W języku XAML do ustawiania tych wartości są używane następujące atrybuty:

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

Przykład SimpleGridDemo przedstawia tworzenie i inicjowanie elementu Grid w języku XAML.

Właściwość Grid dziedziczy Padding z Layout i definiuje dwie dodatkowe właściwości, które zapewniają odstępy między wierszami i kolumnami:

Kolekcje RowDefinitions i ColumnDefinitions nie są ściśle wymagane. Jeśli jest nieobecny, tworzy Grid wiersze i kolumny dla elementów podrzędnych Grid i daje im wszystkie wartości domyślne GridLength "*" (gwiazdka).

Siatka w kodzie

W przykładzie GridCodeDemo pokazano, jak utworzyć i wypełnić element Grid w kodzie. Dołączone właściwości dla każdego elementu podrzędnego można ustawić bezpośrednio lub pośrednio, wywołując dodatkowe Add metody, takie jak Add zdefiniowane przez interfejs T> Grid.IGridList<.

Wykres słupkowy siatki

W przykładzie GridBarChart pokazano, jak dodać wiele BoxView elementów do Grid metody zbiorczejAddHorizontal. Domyślnie te BoxView elementy mają taką samą szerokość. Wysokość każdego z nich BoxView może być następnie kontrolowana w taki sposób, aby przypominała wykres słupkowy.

Przykład w Grid tabeli GridBarChart udostępnia element AbsoluteLayout nadrzędny z początkowo niewidocznym Frameelementem . Program ustawia TapGestureRecognizer również wartość na każdą BoxView , aby użyć elementu Frame , aby wyświetlić informacje o naciśniętym pasku.

Wyrównanie w siatce

W przykładzie GridAlignment pokazano, jak używać VerticalOptions właściwości i HorizontalOptions w celu wyrównania elementów podrzędnych Grid do komórki.

Próbka odstępówButtons w równym stopniu spacje Button wyśrodkowane w Grid komórkach.

Podziały komórek i obramowania

Element Grid nie zawiera funkcji, która rysuje podziały komórek ani obramowania. Można jednak zrobić własne.

GridCellDividers pokazuje, jak zdefiniować dodatkowe wiersze i kolumny specjalnie dla elementów cienkichBoxView, aby naśladować linie podziału.

Program GridCellBorders nie tworzy żadnych dodatkowych komórek, ale zamiast tego wyrównuje BoxView elementy w każdej komórce, aby naśladować obramowanie komórki.

Prawie rzeczywiste przykłady usługi Grid

Przykład KeypadGrid używa elementu do Grid wyświetlania klawiatury:

Potrójny zrzut ekranu przedstawiający siatkę klawiatury

Reagowanie na zmiany orientacji

Może Grid pomóc w utworzeniu struktury programu w celu reagowania na zmiany orientacji. Przykład GridRgbSliders demonstruje technikę, która przenosi element między drugim rzędem telefonu zorientowanego na portret i drugą kolumnę telefonu zorientowanego poziomo.

Program inicjuje Slider elementy do zakresu od 0 do 255 i używa powiązań danych do wyświetlania wartości suwaków w szesnastkowym. Slider Ponieważ wartości są zmiennoprzecinkowe, a ciąg formatowania .NET dla szesnastkowych działa tylko z liczbami całkowitymi, DoubleToIntConvert klasa w Xamarin.Formsbibliotece Book.Toolkit pomaga.