Xamarin.Forms Samouczek dotyczący siatki

Artykuł
Developer (Początkujący)
Czas do ukończenia: 9 min

Zanim podejmiesz próbę ukończenia tego samouczka, musisz pomyślnie ukończyć następujące szkolenia:

Skompiluj swój pierwszy Xamarin.Forms przewodnik Szybki start dotyczący aplikacji .

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

Utwórz element Xamarin.FormsGrid w języku XAML.
Określanie kolumn i wierszy dla obiektu Grid.
Umieszczanie zawartości w wielu kolumnach lub wielu wierszach w obiekcie Grid.

Użyjesz programu Visual Studio 2019 lub Visual Studio dla komputerów Mac, aby utworzyć prostą aplikację, która pokazuje, jak określić układ kontrolek w elemencie Grid. Na poniższych zrzutach ekranu przedstawiono ostateczną wersję aplikacji:

Użyjesz również Przeładowywanie na gorąco XAML, Xamarin.Forms aby zobaczyć zmiany interfejsu użytkownika bez ponownego kompilowania aplikacji.

Tworzenie obiektu grid

Pozostały czas: 8 min

Grid to układ, w którym elementy podrzędne są organizowane w wiersze i kolumny o rozmiarach proporcjonalnych lub bezwzględnych. Domyślnie układ Grid zawiera jeden wiersz i jedną kolumnę.

Program Visual Studio
Visual Studio dla komputerów Mac

Do ukończenia tego samouczka jest potrzebny program Visual Studio 2019 (najnowsza wersja) z zainstalowanym pakietem roboczym Opracowywanie aplikacji mobilnych za pomocą środowiska .NET. Ponadto będzie potrzebny sparowany komputer Mac w celu kompilowania aplikacji samouczka w systemie iOS. Aby uzyskać informacje na temat instalowania platformy Xamarin, zobacz Instalowanie platformy Xamarin. Aby uzyskać informacje na temat łączenia programu Visual Studio 2019 z hostem kompilacji Mac, zobacz Parowanie z komputerem Mac w celu opracowywania aplikacji platformy Xamarin.iOS.

Uruchom program Visual Studio i utwórz nową pustą Xamarin.Forms aplikację o nazwie GridTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę GridTutorial. Użycie innej nazwy spowoduje błędy kompilacji po skopiowaniu kodu z tego samouczka do rozwiązania.

Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji w przewodnikuXamarin.Forms Szybki start — szczegółowe omówienie.
W Eksploratorze rozwiązań w projekcie GridTutorial kliknij dwukrotnie plik MainPage.xaml, aby go otworzyć. Następnie w pliku MainPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z obiektu Label w obiekcie Grid. Domyślnie obiekt Grid umieszcza widoki podrzędne w obrębie jednej lokalizacji. W związku z tym obiekt Grid zawierający wiele elementów podrzędnych powinien określać kolumny i wiersze, które zostaną omówione w następnym ćwiczeniu. Ponadto właściwość Margin wskazuje miejsce renderowania obiektu Grid w ramach obiektu ContentPage.

Uwaga

Oprócz właściwości Margin w obiekcie Grid można również ustawić właściwość Padding. Wartość właściwości Padding określa odległość między granicami elementu Grid a jego elementami podrzędnymi. Aby uzyskać więcej informacji, zobacz Margines i wypełnienie.
Na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w ramach wybranego zdalnego symulatora systemu iOS lub emulatora systemu Android:

Aby uzyskać więcej informacji na temat obiektu , zobaczXamarin.Forms SiatkaGrid.

Do ukończenia tego samouczka jest potrzebny program Visual Studio dla komputerów Mac (najnowsza wersja) z zainstalowaną obsługą platform iOS i Android. Ponadto będzie również potrzebne środowisko Xcode (najnowsza wersja). Aby uzyskać więcej informacji na temat instalowania platformy Xamarin, zobacz Instalowanie platformy Xamarin.

Uruchom Visual Studio dla komputerów Mac i utwórz nową pustą Xamarin.Forms aplikację o nazwie GridTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę GridTutorial. Użycie innej nazwy spowoduje błędy kompilacji po skopiowaniu kodu z tego samouczka do rozwiązania.

Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji w przewodnikuXamarin.Forms Szybki start — szczegółowe omówienie.
W okienku rozwiązania w projekcie GridTutorial kliknij dwukrotnie plik MainPage.xaml, aby go otworzyć. Następnie w pliku MainPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GridTutorial.MainPage">
    <Grid Margin="20,35,20,20">
        <Label Text="The Grid has its Margin property set, to control the rendering position of the Grid." />
    </Grid>
</ContentPage>
```
Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z obiektu Label w obiekcie Grid. Domyślnie obiekt Grid umieszcza widoki podrzędne w obrębie jednej lokalizacji. W związku z tym obiekt Grid zawierający wiele elementów podrzędnych powinien określać kolumny i wiersze, które zostaną omówione w następnym ćwiczeniu. Ponadto właściwość Margin wskazuje miejsce renderowania obiektu Grid w ramach obiektu ContentPage.

Uwaga

Oprócz właściwości Margin w obiekcie Grid można również ustawić właściwość Padding. Wartość właściwości Padding określa odległość między widokami w obiekcie Grid. Aby uzyskać więcej informacji, zobacz Margines i wypełnienie.
Na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Aby uzyskać więcej informacji na temat obiektu , zobaczXamarin.Forms SiatkaGrid.

Określanie kolumn i wierszy

Pozostały czas: 6 min

Program Visual Studio
Visual Studio dla komputerów Mac

W pliku MainPage.xaml zmodyfikuj deklarację obiektu Grid, aby zdefiniować kolumny i wiersze, a następnie umieść zawartość w kolumnach i wierszach:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
Ten kod definiuje kolumny oraz wiersze dla obiektu Grid i umieszcza wystąpienia obiektu Label w określonych kolumnach i wierszach. Dane kolumn i wierszy są przechowywane we właściwościach ColumnDefinitions i RowDefinitions, które są odpowiednio kolekcjami obiektów ColumnDefinition i RowDefinition. Szerokość każdego obiektu ColumnDefinition jest ustawiana za pomocą właściwości ColumnDefinition.Width, a wysokość każdego obiektu RowDefinition — za pomocą właściwości RowDefinition.Height. Prawidłowe wartości szerokości i wysokości to:
- Wartość Auto, która określa rozmiar kolumny lub wiersza w celu dopasowania go do zawartości.
- Wartości proporcjonalne, które określają rozmiar kolumn i wierszy proporcjonalnie do pozostałego miejsca. Wartości proporcjonalne kończą się znakiem *.
- Wartości bezwzględne, które określają rozmiar kolumn i wierszy przy użyciu określonych wartości stałych.
Dlatego w powyższym kodzie każda kolumna ma połowę szerokości obiektu Grid, a każdy wiersz ma wysokość 50 jednostek niezależnych od urządzenia.

Położenie każdego obiektu Label w obiekcie Grid jest określane za pomocą dołączonych właściwości Grid.Column i Grid.Row przy użyciu indeksu liczonego od zera. W związku z tym pierwsza kolumna to kolumna 0, a pierwszy wiersz to wiersz 0. Pierwszy obiekt Label nie ma tych dołączonych właściwości, ponieważ wszystkie widoki podrzędne, które ich nie ustawiają, będą automatycznie renderowane w kolumnie 0 i wierszu 0.

Uwaga

Odstępy między kolumnami i wierszami w obiekcie Grid można ustawić za pomocą właściwości ColumnSpacing i RowSpacing. Aby uzyskać więcej informacji, zobacz Odstępy w przewodniku Xamarin.Forms siatki .
Jeśli aplikacja nadal działa, zapisz zmiany w pliku, a interfejs użytkownika aplikacji zostanie automatycznie zaktualizowany w symulatorze lub w emulatorze. W przeciwnym razie na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android:

W pliku MainPage.xaml zmodyfikuj deklarację obiektu Grid, aby zdefiniować kolumny i wiersze, a następnie umieść zawartość w kolumnach i wierszach:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Label Text="Column 0, Row 0" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>
```
Ten kod definiuje kolumny oraz wiersze dla obiektu Grid i umieszcza wystąpienia obiektu Label w określonych kolumnach i wierszach. Dane kolumn i wierszy są przechowywane we właściwościach ColumnDefinitions i RowDefinitions, które są odpowiednio kolekcjami obiektów ColumnDefinition i RowDefinition. Szerokość każdego obiektu ColumnDefinition jest ustawiana za pomocą właściwości ColumnDefinition.Width, a wysokość każdego obiektu RowDefinition — za pomocą właściwości RowDefinition.Height. Prawidłowe wartości szerokości i wysokości to:
- Wartość Auto, która określa rozmiar kolumny lub wiersza w celu dopasowania go do zawartości.
- Wartości proporcjonalne, które określają rozmiar kolumn i wierszy proporcjonalnie do pozostałego miejsca. Wartości proporcjonalne kończą się znakiem *.
- Wartości bezwzględne, które określają rozmiar kolumn i wierszy przy użyciu określonych wartości stałych.
Dlatego w powyższym kodzie każda kolumna ma połowę szerokości obiektu Grid, a każdy wiersz ma wysokość 50 jednostek niezależnych od urządzenia.

Położenie każdego obiektu Label w obiekcie Grid jest określane za pomocą dołączonych właściwości Grid.Column i Grid.Row przy użyciu indeksu liczonego od zera. W związku z tym pierwsza kolumna to kolumna 0, a pierwszy wiersz to wiersz 0. Pierwszy obiekt Label nie ma tych dołączonych właściwości, ponieważ wszystkie widoki podrzędne, które ich nie ustawiają, będą automatycznie renderowane w kolumnie 0 i wierszu 0.

Uwaga

Odstępy między kolumnami i wierszami w obiekcie Grid można ustawić za pomocą właściwości ColumnSpacing i RowSpacing. Aby uzyskać więcej informacji, zobacz Odstępy w przewodniku Xamarin.Forms siatki .
Jeśli aplikacja nadal działa, zapisz zmiany w pliku, a interfejs użytkownika aplikacji zostanie automatycznie zaktualizowany w symulatorze lub w emulatorze. W przeciwnym razie na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Rozmieszczanie wielu kolumn lub wierszy

Pozostały czas: 2 min

Program Visual Studio
Visual Studio dla komputerów Mac

W pliku MainPage.xaml zmodyfikuj deklarację obiektu Grid, aby zdefiniować kolumny i wiersze, a następnie umieść zawartość, która będzie obejmować kolumny i wiersze:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>
```
Ten kod definiuje kolumny oraz wiersze dla obiektu Grid i umieszcza wystąpienia obiektu Label w określonych kolumnach i wierszach. Pierwszy obiekt Label ustawia dołączoną właściwość ColumnSpan, aby tekst obejmował wiele kolumn. Właściwości ColumnSpan jest ustawiona na wartość 2, która reprezentuje liczbę kolumn, które będzie obejmować obiekt Label. Drugi obiekt Label ustawia dołączoną właściwość RowSpan, aby tekst obejmował wiele wierszy. Właściwości RowSpan jest ustawiona na wartość 2, która reprezentuje liczbę wierszy, które będzie obejmować obiekt Label.
Jeśli aplikacja nadal działa, zapisz zmiany w pliku, a interfejs użytkownika aplikacji zostanie automatycznie zaktualizowany w symulatorze lub w emulatorze. W przeciwnym razie na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w ramach wybranego zdalnego symulatora systemu iOS lub emulatora systemu Android:

Zatrzymaj aplikację w programie Visual Studio.

Aby uzyskać więcej informacji na temat tworzenia kolumn i wierszy, zobacz Wiersze i kolumny w przewodniku SiatkaXamarin.Forms.

W pliku MainPage.xaml zmodyfikuj deklarację obiektu Grid, aby zdefiniować kolumny i wiersze, a następnie umieść zawartość, która będzie obejmować kolumny i wiersze:
```
<Grid Margin="20,35,20,20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="30" />
        <RowDefinition Height="30" />
    </Grid.RowDefinitions>
    <Label Grid.ColumnSpan="2"
           Text="This text uses the ColumnSpan property to span both columns." />
    <Label Grid.Row="1"
           Grid.RowSpan="2"
           Text="This text uses the RowSpan property to span two rows." />
</Grid>
```
Ten kod definiuje kolumny oraz wiersze dla obiektu Grid i umieszcza wystąpienia obiektu Label w określonych kolumnach i wierszach. Pierwszy obiekt Label ustawia dołączoną właściwość ColumnSpan, aby tekst obejmował wiele kolumn. Właściwości ColumnSpan jest ustawiona na wartość 2, która reprezentuje liczbę kolumn, które będzie obejmować obiekt Label. Drugi obiekt Label ustawia dołączoną właściwość RowSpan, aby tekst obejmował wiele wierszy. Właściwości RowSpan jest ustawiona na wartość 2, która reprezentuje liczbę wierszy, które będzie obejmować obiekt Label.
Jeśli aplikacja nadal działa, zapisz zmiany w pliku, a interfejs użytkownika aplikacji zostanie automatycznie zaktualizowany w symulatorze lub w emulatorze. W przeciwnym razie na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android:

Zatrzymaj aplikację w programie Visual Studio dla komputerów Mac.

Aby uzyskać więcej informacji na temat tworzenia kolumn i wierszy, zobacz Wiersze i kolumny w przewodniku SiatkaXamarin.Forms.

Xamarin.Forms Samouczek dotyczący siatki

Tworzenie obiektu grid

Określanie kolumn i wierszy

Rozmieszczanie wielu kolumn lub wierszy

Gratulacje!

Następne kroki

Xamarin.Forms Samouczek dotyczący siatki

Tworzenie obiektu grid

Określanie kolumn i wierszy

Rozmieszczanie wielu kolumn lub wierszy

Gratulacje!

Następne kroki

Pokrewne łącza