Ü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 arbeitsfähige Kopie der App ist im Übung2-Ordner im Übungs-Repository verfügbar, das Sie zu Beginn der vorherigen Übung geklont haben.
Klicken Sie im Projektmappen-Explorer-Fenster mit der rechten Maustaste auf das Notizenprojekt , wählen Sie "Hinzufügen" und dann " Klasse" aus.
Stellen Sie im Dialogfeld " Neues Element hinzufügen " sicher, dass die Klassenvorlage 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 Direktiven 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 zur SharedResources-Klasse 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 readonly Feld 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 ".
Fügen Sie dem Element ContentPage vor dem Attribut x:Class die folgende XML-Namespace-Deklaration hinzu. Diese Deklaration bringt die Klassen im Notes-Namespace von C# in den Geltungsbereich auf der XAML-Seite.
```
<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 x:Static Markuperweiterung, um die in den Feldern in der staticSharedResources-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 die Datei "MainPage.xaml " 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 global in einer App mithilfe eines Ressourcenwörterbuchs in der Datei "App.xaml " 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 den Farben ü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:

Feedback

War diese Seite hilfreich?