Übung: Erstellen Ihrer ersten XAML-Seite

Abgeschlossen

Techniker Ihres Energieversorgers machen regelmäßig Kundendienstbesuche, um Geräte zu reparieren und andere elektrische Wartungsaufgaben durchzuführen. Ein Teil der App ermöglicht es Techniker*innen, sich Notizen zu dem Besuch zu machen. Dazu gehört ein einfacher Editor, in dem der Techniker die Details eingeben und speichern kann.

Auf Android sieht die App wie folgt aus:

Sie wurden aufgefordert, dieser Seite weitere Features hinzuzufügen. Bevor Sie beginnen, möchten Sie wissen, wie die Seite erstellt wurde. Daher sehen Sie sich den Quellcode an. Sie stellen fest, dass die Benutzeroberfläche vollständig mit C#-Code erstellt wurde. Dieser Ansatz funktioniert zwar, doch vermischt sich der Code, der das Layout behandelt, mit dem Code, der die Funktionsweise der Benutzeroberfläche steuert. Ihrer Feststellung nach besteht über kurz oder lang die Gefahr, dass die beiden Aspekte der App irgendwann nicht mehr voneinander zu trennen sind, was die künftige Wartung erschwert und die App möglicherweise anfälliger macht, wenn weitere Features hinzugefügt werden. Sie beschließen, Design und Logik der Benutzeroberfläche voneinander zu trennen, indem Sie den C#-Code extrahieren, der das Layout der App definiert, und ihn durch eine XAML-Seite ersetzen.

In diesem Modul wird das .NET 8.0 SDK verwendet. Stellen Sie sicher, dass .NET 8.0 installiert ist, indem Sie in Ihrem bevorzugten Befehlsterminal den folgenden Befehl ausführen:

dotnet --list-sdks

Die daraufhin angezeigte Ausgabe sieht in etwa wie im folgenden Beispiel aus:

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

Stellen Sie sicher, dass eine Version aufgeführt wird, die mit 8 beginnt. Wenn nichts aufgeführt ist oder der Befehl nicht gefunden wurde, installieren Sie das neueste .NET 8.0 SDK.

Überprüfen der vorhandenen App

1. Klonen Sie das GitHub-Repository für diese Übung lokal auf Ihrem Computer.

   Hinweis

   Es empfiehlt sich, den Übungsinhalt in einen kurzen Ordnerpfad wie z. B. „C:\dev“ zu klonen oder herunterzuladen. So vermeiden Sie, dass vom Build generierte Dateien die maximale Pfadlänge überschreiten.

2. Wechseln zum Ordner Übung1 in Ihrer lokalen Kopie des Repositorys.

3. Öffnen Sie die Datei Notes.sln der Visual Studio-Lösungsdatei in diesem Ordner oder dem Ordner in Visual Studio Code.

4. Erweitern Sie im Fenster Projektmappen-Explorer das Projekt Notes, erweitern Sie die Datei MainPage.xaml, und öffnen Sie die Datei MainPage.xaml.cs.

5. Überprüfen Sie die in dieser Datei definierte MainPage-Klasse. Der Konstruktor enthält den folgenden Code, der die Benutzeroberfläche erstellt:

   public MainPage()
   {
       var notesHeading = new Label() { Text = "Notes", HorizontalOptions = LayoutOptions.Center, FontAttributes = FontAttributes.Bold };
   
       editor = new Editor() { Placeholder = "Enter your note", HeightRequest = 100 };
       editor.Text = File.Exists(_fileName) ? File.ReadAllText(_fileName) : string.Empty;
   
       var buttonsGrid = new Grid() { HeightRequest = 40.0 };
       buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Auto) });
       buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(30.0, GridUnitType.Absolute) });
       buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Auto) });
   
       var saveButton = new Button() { WidthRequest = 100, Text = "Save" };
       saveButton.Clicked += OnSaveButtonClicked;
       Grid.SetColumn(saveButton, 0);
       buttonsGrid.Children.Add(saveButton);
   
       var deleteButton = new Button() { WidthRequest = 100, Text = "Delete" };
       deleteButton.Clicked += OnDeleteButtonClicked;
       Grid.SetColumn(deleteButton, 2);
       buttonsGrid.Children.Add(deleteButton);
   
       var stackLayout = new VerticalStackLayout 
       { 
           Padding = new Thickness(30, 60, 30, 30),
           Children = { notesHeading, editor, buttonsGrid }
       };
   
       this.Content = stackLayout;
   }
   

   Die Benutzeroberfläche besteht aus einem VerticalStackLayout, das eine Label, einem Editor und einen Grid mit drei Spalten enthält. Die erste Spalte enthält das saveButton-Steuerelement, die zweite einen Abstandhalter und die dritte Spalte das DeleteButton-Steuerelement.

   Die Benutzeroberflächenstruktur wird in der folgenden Abbildung dargestellt:

   

   Beachten Sie, dass die MainPage-Klasse auch Ereignisbehandlungsmethoden für die Schaltflächen sowie Code zum Initialisieren des Editor-Steuerelements enthält. Dieser Code unterscheidet sich nicht von der Benutzeroberflächendefinition.

6. Erstellen Sie die App unter Windows, und führen Sie sie aus, um zu sehen, wie sie aussieht. Drücken Sie F5, um die App zu kompilieren und auszuführen.

7. Schließen Sie die App und kehren Sie zu Visual Studio oder Visual Studio Code zurück, wenn Sie fertig sind.

Erstellen einer XAML-Version der Benutzeroberfläche

1. Öffnen Sie die Datei MainPage.xaml.cs. Das Markup auf dieser Seite stellt eine leere MAUI-Inhaltsseite dar:

   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="Notes.MainPage">
   
   </ContentPage>
   

2. Fügen Sie der Inhaltsseite ein VerticalStackLayout-Steuerelement hinzu:

   <ContentPage ...>
       <VerticalStackLayout Margin="30,60,30,30">
   
       </VerticalStackLayout>
   </ContentPage>
   

3. Fügen Sie dem VerticalStackLayout ein Label-Steuerelement hinzu. Legen Sie die Eigenschaften Text, HorizontalTextAlignment und FontAttributes dieses Steuerelements wie unten dargestellt fest:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label Text="Notes"
                  HorizontalOptions="Center"
                  FontAttributes="Bold" />
       </VerticalStackLayout>
   </ContentPage>
   

4. Fügen Sie dem VerticalStackLayout ein Editor-Steuerelement hinzu:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label .../>
   
           <Editor x:Name="editor"
                   Placeholder="Enter your note"
                   HeightRequest="100" />
       </VerticalStackLayout>
   </ContentPage>
   

5. Fügen Sie dem VerticalStackLayout ein untergeordnetes Grid hinzu. Dieses Grid sollte drei Spalten haben. Die erste und dritte Spalte werden automatisch angepasst, während die zweite eine Breite von 30 aufweist:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label .../>
   
           <Editor .../>
   
           <Grid ColumnDefinitions="Auto, 30, Auto">
   
           </Grid>
       </VerticalStackLayout>
   </ContentPage>
   

6. Fügen Sie der ersten Spalte des untergeordneten Grid eine Button hinzu. Dies ist die Schaltfläche Speichern.

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label .../>
   
           <Editor .../>
   
           <Grid ...>                    
               <Button Grid.Column="0"
                       Text="Save" 
                       WidthRequest="100"
                       Clicked="OnSaveButtonClicked" />
           </Grid>
       </VerticalStackLayout>
   </ContentPage>
   

7. Fügen Sie der dritten Spalte des untergeordneten Grid eine weitere Button hinzu. Dies ist die Schaltfläche Löschen:

   <ContentPage ...>
       <VerticalStackLayout ...>
           <Label .../>
   
           <Editor .../>
   
           <Grid ...>                    
               <Button ... />
   
               <Button Grid.Column="2"
                       Text="Delete" 
                        WidthRequest="100"
                       Clicked="OnDeleteButtonClicked" />
           </Grid>
       </VerticalStackLayout>
   </ContentPage>
   

Entfernen des Layoutcodes aus der CodeBehind-Datei

1. Erweitern Sie im Fenster Projektmappen-Explorer den Knoten MainPage.xaml, und öffnen Sie dann die Datei MainPage.xaml.cs.

2. Entfernen Sie das Feld Editor aus der MainPage-Klasse.

3. Entfernen Sie in der Datei MainPage.xaml.cs im MainPage-Konstruktor den gesamten Code, der die Benutzeroberflächenelemente erstellt, und ersetzen Sie diese durch einen Aufruf der InitializeComponent-Methode. Fügen Sie Code hinzu, der überprüft, ob die Datei zum Speichern der Notizen vorhanden ist. Ist dies der Fall, lesen Sie den Inhalt, und füllen Sie im Steuerelement Editor das Feld Text aus. Der Konstruktor sollte wie folgt aussehen:

   public partial class MainPage : ContentPage
   {
       string _fileName = Path.Combine(FileSystem.AppDataDirectory, "notes.txt");
   
       public MainPage()
       {
           InitializeComponent();
   
           if (File.Exists(_fileName))
           {
               editor.Text = File.ReadAllText(_fileName);
           }
       }
   
       ...
   }
   

4. Klicken Sie im Menü Erstellen auf Projektmappe neu erstellen. Überprüfen Sie, ob die App fehlerfrei erstellt wird.

5. Führen Sie die Anwendung aus. Sie sollte genau wie zuvor funktionieren.

6. Falls Sie Zeit haben, stellen Sie die App mithilfe des Android Emulators bereit, und führen Sie sie aus. Die Benutzeroberfläche der App sollte der Darstellung im Bild zu Beginn dieser Übung ähneln.