Xamarin.Forms: Tutorial zum Raster

Artikel
Developer (Anfänger)
9 Minuten bis zum Abschluss

Bevor Sie mit diesem Tutorial fortfahren, sollten Sie zunächst Folgendes erfolgreich abgeschlossen haben:

Schnellstartanleitung Erstellen Ihrer ersten Xamarin.Forms-App

In diesem Tutorial lernen Sie, wie die folgenden Aufgaben ausgeführt werden:

Erstellen eines Xamarin.FormsGrid-Elements in XAML
Angeben von Spalten und Zeilen für das Grid-Element
Aufteilen von Inhalten über mehrere Spalten oder Zeilen im Grid-Element

Sie verwenden Visual Studio 2019 oder Visual Studio für Mac, um eine einfache Anwendung zu erstellen, die zeigt, wie Sie die Layoutsteuerelemente innerhalb eines Grid anpassen können. Die folgenden Screenshots zeigen die finale Anwendung:

Außerdem verwenden Sie XAML Hot Reload für Xamarin.Forms, um Änderungen an der Benutzeroberfläche anzuzeigen, ohne die Anwendung neu zu erstellen.

Erstellen eines Rasters

8 Minuten verbleibend

Bei einem Grid handelt es sich um ein Layout, das untergeordnete Elemente in Zeilen und Spalten anordnet, die proportionale oder absolute Abmessungen aufweisen können. Standardmäßig enthält ein Grid eine Zeile und eine Spalte.

Visual Studio
Visual Studio für Mac

Für dieses Tutorial benötigen Sie das neueste Release von Visual Studio 2019 und die Workload Mobile-Entwicklung mit .NET. Außerdem müssen Sie über einen gekoppelten Mac verfügen, um die Tutorial-App unter iOS zu kompilieren. Informationen zur Installation der Xamarin-Plattform finden Sie unter Installieren von Xamarin. Informationen zum Verbinden von Visual Studio 2019 mit einem Mac-Buildhost finden Sie unter Durchführen einer Kopplung mit einem Mac für die Xamarin.iOS-Entwicklung.

Starten Sie Visual Studio, und erstellen Sie eine neue leere Xamarin.Forms-App mit dem Namen GridTutorial.

Wichtig

Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe GridTutorial genannt wird. Die Verwendung eines anderen Namens führt zu Buildfehlern, wenn Sie Code aus diesem Tutorial in die Projektmappe kopieren.

Weitere Informationen zur .NET Standard-Bibliothek, die erstellt wird, finden Sie unter Struktur einer Xamarin.Forms-Anwendung im Artikel Xamarin.Forms: Ausführliche Erläuterungen zum Schnellstart.
Doppelklicken Sie im Projektmappen-Explorer im Projekt GridTutorial auf die Datei MainPage.xaml, um sie zu öffnen. Entfernen Sie dann in MainPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:
```
<?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>
```
In diesem Codeausschnitt wird die Benutzeroberfläche deklarativ für die Seite definiert, die ein Label-Element in einem Grid enthält. Grid positioniert die untergeordneten Ansichten standardmäßig an einem einzelnen Ort. Daher sollte ein Grid-Element, das mehrere untergeordnete Elemente enthält, Spalten und Zeilen angeben. Dies wird in der nächsten Übung behandelt. Darüber hinaus gibt die Margin-Eigenschaft die Renderingposition der Grid-Klasse innerhalb von ContentPage an.

Hinweis

Neben der Margin-Eigenschaft kann die Padding-Eigenschaft auch auf eine Grid-Klasse festgelegt werden. Der Eigenschaftswert Padding gibt die Entfernung zwischen den Begrenzungen von Grid und dessen untergeordnetem Element an. Weitere Informationen finden Sie unter Ränder und Abstände.
Klicken Sie in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten:

Weitere Informationen zu Grid finden Sie unter Xamarin.Forms-Raster.

Für dieses Tutorial benötigen Sie Visual Studio für Mac (neuestes Release) mit Plattformunterstützung für iOS und Android. Zudem ist Xcode (neuestes Release) erforderlich. Weitere Informationen zur Installation der Xamarin-Plattform finden Sie unter Installieren von Xamarin.

Starten Sie Visual Studio für Mac, und erstellen Sie eine neue leere Xamarin.Forms-App mit dem Namen GridTutorial.

Wichtig

Für die C#- und XAML-Codeausschnitte in diesem Tutorial ist es erforderlich, dass die Projektmappe GridTutorial genannt wird. Die Verwendung eines anderen Namens führt zu Buildfehlern, wenn Sie Code aus diesem Tutorial in die Projektmappe kopieren.

Weitere Informationen zur .NET Standard-Bibliothek, die erstellt wird, finden Sie unter Struktur einer Xamarin.Forms-Anwendung im Artikel Xamarin.Forms: Ausführliche Erläuterungen zum Schnellstart.
Doppelklicken Sie im Lösungspad im Projekt GridTutorial auf die Datei MainPage.xaml, um sie zu öffnen. Entfernen Sie dann in MainPage.xaml den gesamten Vorlagencode, und ersetzen Sie ihn durch den folgenden:
```
<?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>
```
In diesem Codeausschnitt wird die Benutzeroberfläche deklarativ für die Seite definiert, die ein Label-Element in einem Grid enthält. Grid positioniert die untergeordneten Ansichten standardmäßig an einem einzelnen Ort. Daher sollte ein Grid-Element, das mehrere untergeordnete Elemente enthält, Spalten und Zeilen angeben. Dies wird in der nächsten Übung behandelt. Darüber hinaus gibt die Margin-Eigenschaft die Renderingposition der Grid-Klasse innerhalb von ContentPage an.

Hinweis

Neben der Margin-Eigenschaft kann die Padding-Eigenschaft auch auf eine Grid-Klasse festgelegt werden. Der Eigenschaftswert Padding legt den Abstand zwischen den Ansichten im Grid-Element fest. Weitere Informationen finden Sie unter Ränder und Abstände.
Klicken Sie in der Symbolleiste von Visual Studio für Mac auf die Schaltfläche zum Starten (die dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Simulator oder Android-Emulator zu starten.

Weitere Informationen zu Grid finden Sie unter Xamarin.Forms-Raster.

Angeben von Spalten und Zeilen

6 Minuten verbleibend

Visual Studio
Visual Studio für Mac

Ändern Sie in MainPage.xaml die Grid-Deklaration, um Spalten und Zeilen zu definieren und Inhalte in den Spalten und Zeilen zu platzieren:
```
<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>
```
Dieser Code gibt Spalten und Zeilen für die Grid-Klasse an, und positioniert Label-Instanzen in bestimmten Spalten und Zeilen. Die Spalten- und Zeilendaten werden in den ColumnDefinitions- und RowDefinitions-Eigenschaften gespeichert. Diese sind jeweils Sammlungen von ColumnDefinition- und RowDefinition-Objekten. Die Breite jeder ColumnDefinition-Eigenschaft wird von der ColumnDefinition.Width-Eigenschaft festgelegt; die Höhe jeder RowDefinition-Klasse wird von der RowDefinition.Height-Eigenschaft festgelegt. Gültige Breiten- und Höhenwerte sind die folgenden:
- Auto: Dadurch wird die Größe der Spalte oder Zeile auf den Inhalt abgestimmt.
- Proportionale Werte: Dadurch werden die Spalten- und Zeilengrößen proportional zum verbleibenden Platz angepasst. Proportionale Werte werden dadurch angezeigt, dass sie auf * enden.
- Absolute Werte: Diese bestimmen die Größe der Spalten und Zeilen mit bestimmten, festgelegten Werten.
Deshalb hat im obigen Code jede Spalte eine Breite, die der Hälfte der Grid-Klasse entspricht, während jede Zeile eine Höhe von 50 geräteunabhängigen Einheiten hat.

Die Position jeder Label-Klasse in der Grid-Klasse wird durch die angefügten Eigenschaften Grid.Column und Grid.Row angegeben. Hierbei wird ein nullbasierter Index verwendet. Deshalb ist die erste Spalte die Spalte 0, und die erste Zeile die Zeile 0. Die erste Label-Klasse verfügt nicht über diese angefügten Eigenschaften, da sämtliche Ansichten untergeordneter Elemente, die diese nicht festlegen, automatisch in Spalte 0, Zeile 0 gerendert werden.

Hinweis

Der Abstand zwischen Spalten und Zeilen in einer Grid-Klasse wird mithilfe der Eigenschaften ColumnSpacing und RowSpacing festgelegt. Weitere Informationen finden Sie unter Abstände im Leitfaden zu Xamarin.Forms-Rastern.
Wenn die Anwendung noch ausgeführt wird, speichern Sie die Änderungen an der Datei, und die Benutzeroberfläche der Anwendung wird in Ihrem Simulator oder Emulator automatisch aktualisiert. Klicken Sie andernfalls in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten:

Ändern Sie in MainPage.xaml die Grid-Deklaration, um Spalten und Zeilen zu definieren und Inhalte in den Spalten und Zeilen zu platzieren:
```
<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>
```
Dieser Code gibt Spalten und Zeilen für die Grid-Klasse an, und positioniert Label-Instanzen in bestimmten Spalten und Zeilen. Die Spalten- und Zeilendaten werden in den ColumnDefinitions- und RowDefinitions-Eigenschaften gespeichert. Diese sind jeweils Sammlungen von ColumnDefinition- und RowDefinition-Objekten. Die Breite jeder ColumnDefinition-Eigenschaft wird von der ColumnDefinition.Width-Eigenschaft festgelegt; die Höhe jeder RowDefinition-Klasse wird von der RowDefinition.Height-Eigenschaft festgelegt. Gültige Breiten- und Höhenwerte sind die folgenden:
- Auto: Dadurch wird die Größe der Spalte oder Zeile auf den Inhalt abgestimmt.
- Proportionale Werte: Dadurch werden die Spalten- und Zeilengrößen proportional zum verbleibenden Platz angepasst. Proportionale Werte werden dadurch angezeigt, dass sie auf * enden.
- Absolute Werte: Diese bestimmen die Größe der Spalten und Zeilen mit bestimmten, festgelegten Werten.
Deshalb hat im obigen Code jede Spalte eine Breite, die der Hälfte der Grid-Klasse entspricht, während jede Zeile eine Höhe von 50 geräteunabhängigen Einheiten hat.

Die Position jeder Label-Klasse in der Grid-Klasse wird durch die angefügten Eigenschaften Grid.Column und Grid.Row angegeben. Hierbei wird ein nullbasierter Index verwendet. Deshalb ist die erste Spalte die Spalte 0, und die erste Zeile die Zeile 0. Die erste Label-Klasse verfügt nicht über diese angefügten Eigenschaften, da sämtliche Ansichten untergeordneter Elemente, die diese nicht festlegen, automatisch in Spalte 0, Zeile 0 gerendert werden.

Hinweis

Der Abstand zwischen Spalten und Zeilen in einer Grid-Klasse wird mithilfe der Eigenschaften ColumnSpacing und RowSpacing festgelegt. Weitere Informationen finden Sie unter Abstände im Leitfaden zu Xamarin.Forms-Rastern.
Wenn die Anwendung noch ausgeführt wird, speichern Sie die Änderungen an der Datei, und die Benutzeroberfläche der Anwendung wird in Ihrem Simulator oder Emulator automatisch aktualisiert. Klicken Sie andernfalls in der Symbolleiste von Visual Studio für Mac auf die Schaltfläche zum Starten (dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Simulator oder Android-Emulator zu starten:

Überspannen mehrerer Spalten und Zeilen

2 Minuten verbleibend

Visual Studio
Visual Studio für Mac

Ändern Sie in MainPage.xaml die Grid-Deklaration, um Spalten und Zeilen zu definieren und Inhalte über die Spalten und Zeilen hinweg zu platzieren:
```
<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>
```
Dieser Code gibt Spalten und Zeilen für die Grid-Klasse an, und positioniert Label-Instanzen in bestimmten Spalten und Zeilen. Die erste Label-Klasse legt die angefügte ColumnSpan-Eigenschaft fest, sodass der Text mehrere Spalten umfasst. Die ColumnSpan-Eigenschaft ist auf 2 festgelegt, also auf die Anzahl der Spalten, die die Label-Klasse umfassen wird. Die zweite Label-Klasse legt die angefügte RowSpan-Eigenschaft fest, sodass der Text mehrere Zeilen umfasst. Die RowSpan-Eigenschaft ist auf 2 festgelegt, also auf die Anzahl der Zeilen, die die Label-Klasse umfassen wird.
Wenn die Anwendung noch ausgeführt wird, speichern Sie die Änderungen an der Datei, und die Benutzeroberfläche der Anwendung wird in Ihrem Simulator oder Emulator automatisch aktualisiert. Klicken Sie andernfalls in der Symbolleiste von Visual Studio auf die Schaltfläche zum Starten (dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Remotesimulator oder Android-Emulator zu starten:

Beenden Sie die Anwendung in Visual Studio.

Weitere Informationen zum Überspannen von Zeilen und Spalten finden Sie unter Zeilen und Spalten im Leitfaden zu Xamarin.Forms-Rastern.

Ändern Sie in MainPage.xaml die Grid-Deklaration, um Spalten und Zeilen zu definieren und Inhalte über die Spalten und Zeilen hinweg zu platzieren:
```
<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>
```
Dieser Code gibt Spalten und Zeilen für die Grid-Klasse an, und positioniert Label-Instanzen in bestimmten Spalten und Zeilen. Die erste Label-Klasse legt die angefügte ColumnSpan-Eigenschaft fest, sodass der Text mehrere Spalten umfasst. Die ColumnSpan-Eigenschaft ist auf 2 festgelegt, also auf die Anzahl der Spalten, die die Label-Klasse umfassen wird. Die zweite Label-Klasse legt die angefügte RowSpan-Eigenschaft fest, sodass der Text mehrere Zeilen umfasst. Die RowSpan-Eigenschaft ist auf 2 festgelegt, also auf die Anzahl der Zeilen, die die Label-Klasse umfassen wird.
Wenn die Anwendung noch ausgeführt wird, speichern Sie die Änderungen an der Datei, und die Benutzeroberfläche der Anwendung wird in Ihrem Simulator oder Emulator automatisch aktualisiert. Klicken Sie andernfalls in der Symbolleiste von Visual Studio für Mac auf die Schaltfläche zum Starten (dreieckige Schaltfläche, die einer Wiedergabetaste ähnelt), um die Anwendung im ausgewählten iOS-Simulator oder Android-Emulator zu starten:

Beenden Sie die Anwendung in Visual Studio für Mac.

Weitere Informationen zum Überspannen von Zeilen und Spalten finden Sie unter Zeilen und Spalten im Leitfaden zu Xamarin.Forms-Rastern.

Xamarin.Forms: Tutorial zum Raster

Erstellen eines Rasters

Angeben von Spalten und Zeilen

Überspannen mehrerer Spalten und Zeilen

Herzlichen Glückwunsch!

Nächste Schritte

Xamarin.Forms: Tutorial zum Raster

Erstellen eines Rasters

Angeben von Spalten und Zeilen

Überspannen mehrerer Spalten und Zeilen

Herzlichen Glückwunsch!

Nächste Schritte

Verwandte Links