Rozmieszczanie widoków za pomocą siatki

Ukończone

Załóżmy, że tworzysz stronę, która wyświetla obrazy w siatce 7x5. Można utworzyć tę stronę z wieloma kontenerami poziomymi i pionowymi StackLayout . Jednak kod byłby żmudny i może powodować problemy z wydajnością ze względu na wymagania dotyczące pamięci i przetwarzania wielu paneli układu. Panel Grid układu jest lepszym wyborem dla interfejsów użytkownika, które wymagają zarówno wierszy, jak i kolumn. W tej lekcji dowiesz się, jak zdefiniować Grid widoki i w jej komórkach.

Co to jest siatka?

Element to Grid panel układu składający się z wierszy i kolumn. Poniższa ilustracja przedstawia koncepcyjny widok siatki.

Widoki są umieszczane w komórkach utworzonych na podstawie przecięcia wierszy i kolumn. Jeśli na przykład utworzysz obiekt Grid zawierający trzy kolumny i dwa wiersze, dla widoków jest dostępnych sześć komórek. Wiersze i kolumny mogą mieć różne rozmiary lub można je ustawić tak, aby automatycznie dostosowywać się do rozmiaru elementów podrzędnych umieszczonych wewnątrz nich. Widoki podrzędne mogą zajmować jedną komórkę lub rozciągać się na wiele komórek. Ta elastyczność sprawia, że Grid dobrym wyborem jest panel układu głównego dla wielu aplikacji.

Jak określić wiersze i kolumny siatki

Podczas tworzenia obiektu Gridmożna zdefiniować poszczególne wiersze i kolumny osobno. Ten system zapewnia pełną kontrolę nad wysokością każdego wiersza i szerokością każdej kolumny. Każdy Grid obiekt ma kolekcję RowDefinition obiektów i ColumnDefinition definiujących kształt siatki. Te kolekcje są wypełniane wystąpieniami RowDefinition elementów i ColumnDefinition, z których każda reprezentuje wiersz lub kolumnę w interfejsie użytkownika.

Poniżej przedstawiono dwa fragmenty kodu, które pokazują definicje klas dla RowDefinition i ColumnDefinition:

public sealed class RowDefinition : ...
{
    ...
    public GridLength Height { get; set; }
}

public sealed class ColumnDefinition : ...
{
    ...
    public GridLength Width { get; set; }
}

Zwróć uwagę, że RowDefinition ma właściwość o nazwie Height i ColumnDefinition ma właściwość o nazwie Width. Te właściwości służą do ustawiania wysokości wiersza i szerokości kolumny zgodnie z opisem w poniższych sekcjach.

Co to jest GridLength?

Typ danych właściwości Width i Height to GridLength. Ten typ zawiera dwie właściwości: GridUnitType i Value. Oto fragment kodu, który pokazuje część definicji typu.

public struct GridLength
{
    ...
    public GridUnitType GridUnitType { get; }
    public double Value { get; }
}

Właściwość można ustawić GridUnitType na jedną z następujących wartości:

• Absolute
• Auto
• Star

Przyjrzyjmy się bliżej każdej z tych wartości.

Bezwzględna wartość GridUnitType

Absolute określa, że wiersz lub kolumna powinny być stałe w rozmiarze. Właściwość służy Value do wskazywania rozmiaru. Oto przykład pokazujący, jak ustawić wysokość wiersza na stały rozmiar 100 jednostek urządzeń w języku C#. Zwróć uwagę, jak używasz konstruktora GridLength , który przyjmuje wartość liczbową. Ten konstruktor ustawia GridUnitType wartość automatycznie Absolute .

var row = new RowDefinition() { Height = new GridLength(100) };

W rozszerzalnym języku znaczników aplikacji (XAML) wystarczy podać wartość liczbową. Analizator XAML wywołuje konwerter typów w celu utworzenia GridLength wystąpienia. Oto przykład pokazujący to samo w języku XAML:

<RowDefinition Height="100" />

Auto GridUnitType

Auto automatycznie rozmiaruje wiersz lub kolumnę w celu dopasowania do widoków podrzędnych. Skanuje Grid wszystkie widoki podrzędne w tym wierszu lub kolumnie, wybiera największy widok, a następnie sprawia, że wiersz lub kolumna są wystarczająco duże, aby dopasować je do tego elementu podrzędnego. Podczas tworzenia definicji wiersza w kodzie wartość liczbowa jest ignorowana. Możesz użyć dowolnej wartości. Oto przykład pokazujący, jak ustawić wysokość wiersza na automatyczne rozmiary w języku C#. Zwróć uwagę, że dla wartości wybrano 1 dowolnie.

var row = new RowDefinition() { Height = new GridLength(1, GridUnitType.Auto) };

W języku XAML należy użyć wartości Auto. Oto przykład pokazujący to samo w języku XAML.

<RowDefinition Height="Auto" />

Star GridUnitType

Star zapewnia proporcjonalny rozmiar. W proporcjonalnym określaniu rozmiaru łączna ilość dostępnego miejsca i współczynnik zapytań o rozmiar każdego wiersza lub kolumny określa rozmiar. W rozmowie ludzie często nazywają tę gwiazdę rozmiarem zamiast proporcjonalnego rozmiaru.

Przyjrzyjmy się procesowi używania proporcjonalnego określania rozmiaru wierszy w siatce.

1. Określ dostępne miejsce: Skanuje Grid wszystkie wiersze, które nie używają rozmiaru gwiazdy. Sumuje wysokość wszystkich tych wierszy i odejmuje sumę od wysokości Grid samego siebie. To obliczenie zapewnia ilość miejsca dostępnego dla wszystkich wierszy o rozmiarze gwiazdy.

2. Podziel dostępne miejsce: następnie Grid dzieli dostępne miejsce między wszystkie wiersze o rozmiarze gwiazdy na Value podstawie ustawienia dla każdego wiersza. Właściwość należy traktować Value jako mnożnik, który określa współczynnik między wszystkimi wierszami zdefiniowanymi jako rozmiar gwiazdy. Jeśli na przykład mieliśmy dwa wiersze o rozmiarze gwiazdy, oba 1 jako mnożnik, dostępne miejsce zostanie równomiernie podzielone między nimi. Ale gdyby jeden z nich miał 2 wartość, otrzyma dwa razy więcej miejsca, niż drugi.

Oto przykład pokazujący, jak ustawić wysokość wiersza na 2 Star C#:

var row = new RowDefinition() { Height = new GridLength(2, GridUnitType.Star) };

W języku XAML symbol jest używany do reprezentowania rozmiaru * gwiazdy. Połączysz wartość i * w jednym ciągu, a konwerter typów utworzy dla GridLength Ciebie wartość . Oto ten sam przykład w języku XAML.

<RowDefinition Height="2*" />

Kolekcje siatki

Po zdefiniowaniu wierszy i kolumn przy użyciu elementów RowDefinition i ColumnDefinitionmożna dodać je do elementu Grid. Używasz RowDefinitions właściwości i ColumnDefinitions kolekcji obiektu Grid. Wypełnianie tych kolekcji jest najczęściej wykonywane w języku XAML.

W tym przykładzie pokazano, jak zdefiniować cztery wiersze i dodać je do obiektu Grid przy użyciu RowDefinitions właściwości :

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="1*" />
        <RowDefinition Height="2*" />
    </Grid.RowDefinitions>
    ...
</Grid>

Tę definicję można skrócić do:

<Grid RowDefinitions="100, Auto, 1*, 2*">
    ...
</Grid>

Kod XAML do definiowania kolumn jest analogiczny do poprzedniego kodu XAML. Z wyjątkiem tego, że należy użyć ColumnDefinitions i ustawić .Width

W czasie wykonywania ten kod XAML tworzy obiekt Grid z czterema wierszami. Pierwszy wiersz ma stałą wysokość 100 jednostek urządzeń. Drugi wiersz ma wysokość najwyższego widoku w wierszu. Trzecie i czwarte wiersze używają rozmiaru gwiazdy, co oznacza, że zajmują pozostałe dostępne miejsce i dzielą je proporcjonalnie na podstawie ich Value mnożnika. Ponieważ trzeci wiersz to 1* i czwarty wiersz to 2*, czwarty wiersz jest dwa razy większy niż trzeci wiersz.

Domyślny rozmiar wiersza i kolumny

Wartością domyślną dla wierszy i kolumn jest 1* rozmiar. Na przykład przyjrzyj się następującej kodzie XAML.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    ...
</Grid>

Tę definicję można skrócić do:

<Grid RowDefinitions="*, *, *" ColumnDefinitions="*, *">
    ...
</Grid>

Ponieważ żaden z wierszy lub kolumn nie ma określonych rozmiarów, 1* jest stosowany do wszystkich z nich. W czasie wykonywania ta konfiguracja tworzy jednolite Grid , co oznacza, że wszystkie wiersze mają taką samą wysokość, a wszystkie kolumny mają taką samą szerokość.

Jak dodać widoki do siatki

Po dodaniu widoku do elementu Gridnależy dodać go do określonej komórki. Komórki są tworzone w miejscach, w których przecinają się wiersze i kolumny. Aby umieścić widok w komórce, musisz znać lokalizację komórki. Aby zidentyfikować komórkę, należy użyć kombinacji numeru wiersza i numeru kolumny.

Numerowanie wierszy i kolumn

Liczba wierszy i kolumn rozpoczyna się od zera. Początek to lewy górny róg. Oto ilustracja przedstawiająca numerowanie elementu Grid z czterema wierszami i dwiema kolumnami.

Jeśli na przykład chcemy dodać widok do komórki w prawym dolnym rogu, załóżmy, że pozycja widoku to row 3 column 1.

Dodawanie widoku do siatki przy użyciu dołączonych właściwości

Musisz określić wiersz i numer kolumny widoku podczas dodawania go do siatki. Jednym z rozwiązań byłoby zdefiniowanie Row właściwości i Column w klasie bazowej View , aby można było określić położenie w widoku bezpośrednio. Ta technika będzie działać, ale nie jest to najbardziej wydajne podejście. Widoki nie zawsze będą znajdować się w Gridobiekcie , więc czasami te właściwości nie będą potrzebne. Lepszym rozwiązaniem jest użycie dołączonych właściwości.

Dołączona właściwość jest właściwością zdefiniowaną w jednej klasie, ale ustawioną na obiekty innych typów.

Należy traktować dołączone właściwości jako kolekcję par klucz-wartość, które są częścią widoku. Po dodaniu widoku do Gridelementu należy określić wiersz i kolumnę. Za pomocą dołączonych właściwości można dodać parę klucz-wartość z kluczem Grid.Row i wartością określającą numer wiersza. Grid Gdy obiekt jest gotowy do pozycjonowania widoku, sprawdza kolekcję, aby sprawdzić, czy istnieje klucz o nazwie Grid.Row. Jeśli tak jest, użyje wartości , Grid aby ustawić widok.

W tym przykładzie pokazano, jak utworzyć Grid widok i dodać go przy użyciu dołączonych właściwości:

<Grid RowDefinitions="*, *, *" ColumnDefinitions="*, *">

    <BoxView Grid.Row="1" Grid.Column="0" Color="Navy" />
    
</Grid>

W tym przykładzie Grid.Row=1 i Grid.Column=0 są parami klucz-wartość, które są dodawane do wewnętrznej kolekcji .BoxView Funkcja Grid używa tych wartości do określenia, gdzie powinien być umieszczony widok. Oto jak wyglądałoby to Grid w przypadku uruchomienia aplikacji na urządzeniu.

Jak utworzyć widok obejmujący wiele wierszy lub kolumn

Istnieją jeszcze dwie dołączone właściwości, o których należy pamiętać: Grid.RowSpan i Grid.ColumnSpan. Te właściwości określają, ile wierszy lub kolumn ma zajmować widok. Na przykład przyjrzyj się następującej kodzie XAML.

<Grid RowDefinitions="*, *, *" ColumnDefinitions="*, *">

    <BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Color="Navy" />
    
</Grid>

Zwróć uwagę, że w tym przykładzie ustawiono ColumnSpan wartość .2 Ten widok zajmuje dwie kolumny rozpoczynające się od Column 0. Oto jak wyglądałoby to Grid w przypadku uruchomienia aplikacji na urządzeniu.

Test wiedzy

1.

Jaki jest cel ?Star GridUnitType

Naprawiono ustalanie rozmiaru kolumny lub wiersza. Określona liczba określa rozmiar.

Proporcjonalne ustalanie rozmiaru kolumny lub wiersza. Łączna ilość dostępnego miejsca i stosunek, o który prosi każdy wiersz lub kolumna, określa rozmiar.

Automatycznie zezwól na Grid określenie rozmiaru wiersza lub kolumny na podstawie widoku podrzędnego, który zawiera.

Przed sprawdzeniem pracy musisz odpowiedzieć na wszystkie pytania.