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

Abgeschlossen

In dieser Übung verwenden Sie Grid, um die Ansichten auf der Benutzeroberfläche anzuordnen. Sie beginnen mit einer anderen Version des TipCalculator-Projekts und passen es an, um die Benutzeroberfläche intuitiver zu gestalten. Darüber hinaus verschieben Sie die Schaltflächen an den unteren Rand der Seite. Dieses Mal verwenden Sie ein Grid-Layout anstelle von VerticalStackLayout und HorizontalStackLayout. Die folgende Abbildung veranschaulicht die anfängliche Benutzeroberfläche und die Benutzeroberfläche, die sich aus den Schritten in dieser Übung ergibt:

Öffnen der Startprojektmappe

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

1. Öffnen Sie mit Visual Studio die Startlösung im Ordner exercise3/TipCalculator im Repository, das Sie zu Beginn der vorherigen Übung geklont haben.

2. Öffnen Sie MainPage.xaml. Beachten Sie, dass alle Ansichten in einem VerticalStackLayout-Bereich angezeigt werden:

   <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:local="clr-namespace:TipCalculator"
                x:Class="TipCalculator.MainPage">
   
       <VerticalStackLayout>
   
           <Label Text="Bill" />
           <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" />
   
           <Label Text="Tip"   />
           <Label x:Name="tipOutput" Text="0.00" />
   
           <Label Text="Total" />
           <Label x:Name="totalOutput" Text="0.00" />
   
           <Label Text="Tip Percentage" />
           <Label x:Name="tipPercent" Text="15%" />
           <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" />
   
           <Button Text="15%" Clicked="OnNormalTip" />
           <Button Text="20%" Clicked="OnGenerousTip" />
   
           <Button x:Name="roundDown" Text="Round Down" />
           <Button x:Name="roundUp"   Text="Round Up" />
   
       </VerticalStackLayout>
   
   </ContentPage>
   
   

Erstellen eines Grid-Layouts

1. Ändern Sie das Layoutpanel von VerticalStackLayout in Grid mit einem Abstand von 40 Einheiten.

2. 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 sollte Star verwenden, damit sie den gesamten verfügbaren Platz im Raster erhält. Verwenden Star für die Größenanpassung für beide Spalten.

   <Grid RowDefinitions="Auto, Auto, Auto, *, Auto, Auto, Auto"
         ColumnDefinitions="*, *"
         Padding="40">
       ...
   </Grid>
   

Positionieren der Ansichten in den Zellen

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:

   

   Das folgende Beispiel zeigt, wie Sie die Position für RechnungLabel und die billInputEntry-Ansicht festlegen:

   ...
   <Label Text="Bill" Grid.Row="0" Grid.Column="0"/>
   <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" Grid.Row="0" Grid.Column="1"/>
   ...
   

2. Richten Sie RechnungLabel und Entry aus, indem Sie die VerticalOptions-Eigenschaft von Label 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 Tip Percentage. Legen Sie es 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 es so fest, dass es die untere rechte Position im Rechteck einnimmt:

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

6. Legen Sie die Margin-Eigenschaft für alle vier Schaltflächen auf 5 fest.

Das vollständige XAML-Markup (Extensible Application Markup Language) für die Seite sollte wie folgt aussehen:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TipCalculator"
             x:Class="TipCalculator.MainPage">
    <Grid RowDefinitions="Auto, Auto, Auto, *, Auto, Auto, Auto"
          ColumnDefinitions="*, *"
          Padding="40">

        <Label Text="Bill" VerticalOptions="Center" Grid.Row="0" Grid.Column="0"/>
        <Entry x:Name="billInput" Placeholder="Enter Amount" Keyboard="Numeric" Grid.Row="0" Grid.Column="1"/>

        <Label Text="Tip" Grid.Row="1" Grid.Column="0"/>
        <Label x:Name="tipOutput" Text="0.00" Grid.Row="1" Grid.Column="1"/>

        <Label Text="Total" Grid.Row="2" Grid.Column="0"/>
        <Label x:Name="totalOutput" Text="0.00" Grid.Row="2" Grid.Column="1"/>

        <Label Text="Tip Percentage" VerticalOptions="End" HorizontalOptions="Start" Grid.Row="3" Grid.Column="0"/>
        <Label x:Name="tipPercent" Text="15%" VerticalOptions="End" HorizontalOptions="End" Grid.Row="3" Grid.Column="1"/>
        <Slider x:Name="tipPercentSlider" Minimum="0" Maximum="100" Value="15" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"/>

        <Button Text="15%" Clicked="OnNormalTip" Margin="5" Grid.Row="5" Grid.Column="0"/>
        <Button Text="20%" Clicked="OnGenerousTip" Margin="5" Grid.Row="5" Grid.Column="1"/>

        <Button x:Name="roundDown" Margin="5" Text="Round Down" Grid.Row="6" Grid.Column="0"/>
        <Button x:Name="roundUp"   Margin="5" Text="Round Up" Grid.Row="6" Grid.Column="1"/>

    </Grid>
</ContentPage>

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 erheblich.