Übung: Hinzufügen von Verhalten zu Ihrer XAML-Seite

10 Minuten

Sie haben die Notizen-App geändert, um das Layout der Benutzeroberfläche von C#-Code auf XAML zu übertragen. Nun sind Sie bereit, der Seite die folgenden Features hinzuzufügen:

Unterstützen Sie die Anpassung der Schrift- und Hintergrundfarbe für Beschriftungen sowie der Schaltflächen und des Editor-Steuerelements. So können Sie die App leicht anpassen, um sie für Benutzer*innen einfacher zugänglich zu machen, die eine kontrastreiche Benutzeroberfläche benötigen.
Passen Sie die Höhe des Editor-Steuerelements unter Android und iOS an. Unter Windows hat dieses Steuerelement eine ausreichende Breite, damit Benutzer eine angemessene Menge Text eingeben können, bevor es scrollt. Auf einem Android-Telefon oder einem iPhone bewirkt die geringere Breite, dass das Scrollen schneller erfolgt, so dass es von Vorteil ist, mehr vertikalen Platz zur Verfügung zu stellen.

Verwenden einer statischen Ressource in XAML

Sie erstellen eine statische Klasse, in der die Werte für die Schrift- und Hintergrundfarbe der App enthalten sind. Dann verwenden Sie die Markuperweiterung x:Static, um diese Werte aus der Klasse zu lesen und auf das XAML-Markup für die Steuerelemente auf der Seite anzuwenden.

Kehren Sie in Visual Studio zu der Notizen-App zurück, die Sie in der vorherigen Übung bearbeitet haben.

Hinweis

Eine Arbeitskopie der App ist im Ordner Übung2 im Übungsrepository verfügbar, das Sie zu Beginn der vorherigen Übung geklont haben.
Klicken Sie im Fenster Projektmappen-Explorer mit der rechten Maustaste auf das Projekt Notes, und wählen Sie Hinzufügen und dann Klasse aus.
Stellen Sie im Dialogfeld Neues Element hinzufügen sicher, dass die Vorlage Klasse ausgewählt ist. Benennen Sie die neue Klassendatei SharedResources.cs, und wählen Sie dann Hinzufügen aus:
Ersetzen Sie in der Datei SharedResources.cs die using-Anweisungen durch den folgenden Code, und markieren Sie die SharedResources-Klasse als static:
```
namespace Notes;

static class SharedResources
{

}
```
Fügen Sie das static readonly Feld FontColor zu der SharedResourcesKlasse hinzu. Dieses Feld stellt derzeit einen Wert bereit, der Blau entspricht, aber Sie können es mit jeder gültigen Kombination von RGB-Werten ändern:
```
static class SharedResources
{
    public static readonly Color FontColor = Color.FromRgb(0, 0, 0xFF);
}
```

Fügen Sie ein zweites static readonlyFeld mit dem Namen BackgroundColor hinzu, und legen Sie es auf eine Farbe Ihrer Wahl fest:

static class SharedResources
{
    ...
    public static readonly Color BackgroundColor = Color.FromRgb(0xFF, 0xF0, 0xAD);
}

Öffnen Sie die Datei MainPage.xaml.cs.
Fügen Sie dem Element ContentPage vor dem Attribut x:Class die folgende XML-Namespace-Deklaration hinzu. Mit dieser Deklaration werden die Klassen im C#- Notizen-Namespace in den Bereich auf der XAML-Seite einbezogen:
```
<ContentPage ...
         xmlns:notes="clr-namespace:Notes"
         x:Class="Notes.MainPage"
         ...>
```
Fügen Sie das im folgenden Code gezeigte TextColor Attribut zum Label Steuerelement hinzu. Dieses Markup verwendet die Markuperweiterung x:Static, um die in den static-Feldern in der SharedResources-Klasse gespeicherten Werte abzurufen:
```
<Label Text="Notes"
    HorizontalOptions="Center"
    FontAttributes="Bold" 
    TextColor="{x:Static Member=notes:SharedResources.FontColor}" />
```

Verwenden Sie die x:Static Markuperweiterung, um die TextColor und BackgroundColor Attribute für die Editor und Button Steuerelemente festzulegen. Das fertige Markup für Ihre MainPage.xaml-Datei sollte wie folgt aussehen:

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

    <VerticalStackLayout Padding="30,60,30,30">
        <Label Text="Notes"
            HorizontalOptions="Center"
            FontAttributes="Bold" 
            TextColor="{x:Static Member=notes:SharedResources.FontColor}" />

        <Editor x:Name="editor"
                Placeholder="Enter your note"
                HeightRequest="100" 
                TextColor="{x:Static Member=notes:SharedResources.FontColor}"/>

        <Grid Grid.Row="2" ColumnDefinitions="Auto,30,Auto">

            <Button Grid.Column="0"
                    Text="Save" 
                    WidthRequest="100"
                    TextColor="{x:Static Member=notes:SharedResources.FontColor}"
                    BackgroundColor="{x:Static Member=notes:SharedResources.BackgroundColor}"
                    Clicked="OnSaveButtonClicked" />

            <Button Grid.Column="2"
                    Text="Delete" 
                    WidthRequest="100"
                    TextColor="{x:Static Member=notes:SharedResources.FontColor}"
                    BackgroundColor="{x:Static Member=notes:SharedResources.BackgroundColor}"
                    Clicked="OnDeleteButtonClicked" />
        </Grid>
    </VerticalStackLayout>

</ContentPage>

Hinweis

Dieser XAML-Code enthält eine Wiederholung des Markups, mit dem die Eigenschaften TextColor und BackgroundColor festgelegt werden. Mit XAML können Sie Ressourcen definieren, die mithilfe eines Ressourcenverzeichnisses in der Datei App.xaml in einer App global angewendet werden können. Dieses Verfahren wird in einem späteren Modul beschrieben.

Erstellen Sie die App neu, und führen Sie sie mit Windows aus. Stellen Sie sicher, dass die Farben mit denen übereinstimmen, die Sie in der SharedResources-Klasse angegeben haben. Wenn Sie Zeit haben, können Sie auch versuchen, die App mit dem Android-Emulator auszuführen:
Kehren Sie zu Visual Studio zurück, wenn Sie fertig sind.

Hinzufügen plattformspezifischer Anpassungen

Öffnen Sie die Datei MainPage.xaml in Visual Studio.
Suchen Sie die Definition des Editor-Steuerelements, und ändern Sie den Wert für die HeightRequest-Eigenschaft, wie im folgenden Beispiel gezeigt:
```
<Editor x:Name="editor"
        ...
        HeightRequest="{OnPlatform 100, Android=500, iOS=500}" 
        .../>
```
Mit diesem Markup wird die Standardhöhe des Steuerelements auf 100 Einheiten festgelegt, aber unter Android auf 500 erhöht.
Kompilieren Sie die App neu und führen Sie sie unter Windows und dann unter Android aus. Die App sollte auf jeder Plattform wie folgt aussehen:

Übung: Hinzufügen von Verhalten zu Ihrer XAML-Seite

Verwenden einer statischen Ressource in XAML

Hinzufügen plattformspezifischer Anpassungen

Feedback