Vorherige

Nächste

Übung: Verwenden von Grid zum Erstellen einer Benutzeroberfläche

Abgeschlossen

In dieser Übung verwenden Sie ein Grid, um die Ansichten auf der Benutzeroberfläche anzuordnen. Der erste Screenshot zeigt das Startprojekt, der zweite das abgeschlossene Projekt. Ihre Aufgabe ist es, ein Grid-Element zu verwenden, um das Startprojekt zur abgeschlossenen Version zu entwickeln.

Öffnen der Startprojektmappe

Die Startprojektmappe enthält eine vollständig funktionsfähige App für die Berechnung von Trinkgeldern.

1. Öffnen Sie das Projekt TipCalculator im Ordner exercise3start in Ihrem geklonten oder heruntergeladenen Übungsrepository.

2. Öffnen Sie MainPage.xaml. Beachten Sie, dass alle Ansichten in einem einzigen vertikalen StackLayout platziert werden.

Erstellen eines Grid-Layouts

Erstellen Sie ein Grid, das Ansichten enthalten soll.

1. Fügen Sie 40 Einheiten für den Abstand zur ContentPage hinzu, um ein Überlappen der Benutzeroberfläche und der Statusleiste von iOS zu vermeiden.

   <ContentPage ... Padding="40">
   

2. Ändern Sie das Layoutpanel von StackLayout zu Grid.

3. Definieren Sie sieben Zeilen und zwei Spalten für das Grid. Legen Sie für alle Zeilen mit Ausnahme der vierten die Größeneinstellung Auto fest. Die vierte Zeile soll Star verwenden, um den gesamten zusätzlichen Platz zu erhalten. Verwenden Star für die Größenanpassung für beide Spalten.

   <Grid.RowDefinitions>
     <RowDefinition Height="Auto" />
     <RowDefinition Height="Auto" />
     <RowDefinition Height="Auto" />
     <RowDefinition Height="*" />
     <RowDefinition Height="Auto" />
     <RowDefinition Height="Auto" />
     <RowDefinition Height="Auto" />
   </Grid.RowDefinitions>
   
   <Grid.ColumnDefinitions>
     <ColumnDefinition Width="*" />
     <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>
   

Positionieren der Ansichten in den Zellen

Sie haben die Grid-Struktur definiert. Nun müssen Sie die Ansichten zum Grid hinzufügen. Dazu verwenden Sie die angefügten Eigenschaften Grid.Row und Grid.Column.

1. Fügen Sie Einstellungen für Grid.Row und Grid.Column zu jeder Ansicht hinzu, um sie zur entsprechenden Zelle im Grid hinzuzufügen. Anhand des folgenden Screenshots können Sie ermitteln, wo jedes View-Element platziert werden soll:

   

2. Richten Sie die - und Entry-Elemente für Bill ein, indem Sie VerticalOptions im Entry-Element auf Center festlegen.

3. Fügen Sie eine Einstellung für Grid.ColumnSpan für das Slider-Element hinzu, sodass dieses zwei Spalten umfasst:

   <Slider ... Grid.ColumnSpan="2" ... />
   

4. Suchen Sie das Label-Element mit dem Text Label. Legen Sie das Element so fest, dass es die untere linke Position im Rechteck einnimmt:

   <Label Text="Tip Percentage" VerticalOptions="End" HorizontalOptions="Start" ... />
   

5. Suchen Sie das Label-Element Label. Legen Sie das Element so fest, dass es die untere rechte Position im Rechteck einnimmt:

   <Label x:Name="tipPercent" VerticalOptions="End" HorizontalOptions="End" ... />
   

Untersuchen der Ergebnisse

Führen Sie die Anwendung aus, und sehen Sie sich die Unterschiede auf der Benutzeroberfläche an. Sie haben ein Grid verwendet, um das Aussehen einer vorhandenen Benutzeroberfläche zu verbessern. Grid ist leistungsfähiger als StackLayout. Insbesondere vereinfacht Grid die zeilenübergreifende Ausrichtung von Ansichten.

Weiter