Oefening: Gedrag toevoegen aan uw XAML-pagina

10 minuten

U hebt de notitie-app eerder gewijzigd om de indeling van de gebruikersinterface te verplaatsen van C#-code naar XAML. U kunt nu de volgende functies toevoegen aan de pagina:

Ondersteuning voor het aanpassen van de tekstkleur en achtergrondkleur van het label, knoppen en besturingselement editor. Op deze manier kunt u de app eenvoudig aanpassen om deze toegankelijker te maken voor gebruikers die een gebruikersinterface met hoog contrast nodig hebben.
Pas de hoogte van het besturingselement Editor aan op Android en iOS. Wanneer dit besturingselement wordt uitgevoerd in Windows, heeft dit besturingselement voldoende breedte om de gebruiker in staat te stellen redelijke hoeveelheid tekst in te voeren voordat deze schuift. Op een Android-telefoon of iPhone resulteert de smallere breedte in het sneller schuiven, dus het is handig om meer verticale ruimte te bieden.

Een statische resource gebruiken in XAML

U maakt een statische klasse voor het opslaan van de tekstkleur en achtergrondkleurwaarden van de app. Vervolgens gebruikt u de x:Static markeringsextensie om deze waarden uit de klasse te lezen en toe te passen op de XAML-markeringen voor de besturingselementen op de pagina.

Ga in Visual Studio terug naar de notities-app die u in de vorige oefening hebt bewerkt.

Notitie

Een werkende kopie van de app is beschikbaar in de map oefening2 in de opslagplaats voor oefening die u aan het begin van de vorige oefening hebt gekloond.
Klik in het venster Solution Explorer met de rechtermuisknop op het notitieproject , selecteer Toevoegen en selecteer vervolgens Klasse.
Zorg ervoor dat de klassesjabloon is geselecteerd in het dialoogvenster Nieuw item toevoegen. Geef het nieuwe klassebestand een naam SharedResources.cs en selecteer vervolgens Toevoegen:
Vervang in het bestand SharedResources.cs de using instructies door de volgende code en markeer de klasse SharedResources als static:
```
namespace Notes;

static class SharedResources
{

}
```
Voeg het static readonly veld FontColor toe aan de klasse SharedResources . Dit veld biedt momenteel een waarde die overeenkomt met blauw, maar u kunt dit wijzigen met een geldige combinatie van RGB-waarden:
```
static class SharedResources
{
    public static readonly Color FontColor = Color.FromRgb(0, 0, 0xFF);
}
```

Voeg een tweede static readonly veld toe met de naam BackgroundColor en stel dit in op een kleur van uw keuze:

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

Open het bestand MainPage.xaml .
Voeg vóór het kenmerk de volgende XML-naamruimtedeclaratie toe aan het ContentPage x:Class element. Met deze declaratie worden de klassen in de C# Notes-naamruimte binnen het bereik gebracht op de XAML-pagina:
```
<ContentPage ...
         xmlns:notes="clr-namespace:Notes"
         x:Class="Notes.MainPage"
         ...>
```
Voeg het TextColor kenmerk toe dat wordt weergegeven in de volgende code aan het Label besturingselement. Deze markering maakt gebruik van de x:Static markeringsextensie om de waarden op te halen die zijn opgeslagen in de static velden in de klasse SharedResources :
```
<Label Text="Notes"
    HorizontalOptions="Center"
    FontAttributes="Bold" 
    TextColor="{x:Static Member=notes:SharedResources.FontColor}" />
```

Gebruik de x:Static markeringsextensie om de TextColor en BackgroundColor kenmerken voor de Editor en Button besturingselementen in te stellen. De voltooide opmaak voor het bestand MainPage.xaml moet er als volgt uitzien:

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

Notitie

Deze XAML-code bevat herhaling van de markering waarmee de TextColor en BackgroundColor eigenschappen worden ingesteld. Met XAML kunt u resources definiëren die wereldwijd in een app kunnen worden toegepast met behulp van een resourcewoordenlijst in het Bestand App.xaml . We beschrijven deze techniek in een latere module.

Bouw de app opnieuw en voer deze uit met Windows. Controleer of de kleuren overeenkomen met de kleuren die u hebt opgegeven in de klasse SharedResources . Als u tijd hebt, kunt u de app ook uitvoeren met behulp van de Android-emulator:
Ga terug naar Visual Studio wanneer u klaar bent.

Platformspecifieke aanpassing toevoegen

Open het bestand MainPage.xaml in Visual Studio.
Zoek de definitie van het Editor besturingselement en wijzig de waarde voor de eigenschap HeightRequest , zoals wordt weergegeven in het volgende voorbeeld:
```
<Editor x:Name="editor"
        ...
        HeightRequest="{OnPlatform 100, Android=500, iOS=500}" 
        .../>
```
Met deze markering wordt de standaardhoogte van het besturingselement ingesteld op 100 eenheden, maar wordt deze verhoogd tot 500 op Android.
Bouw de app opnieuw en voer deze uit met Behulp van Windows en vervolgens Android. De app moet er als volgt uitzien op elk platform:

Oefening: Gedrag toevoegen aan uw XAML-pagina

Een statische resource gebruiken in XAML

Platformspecifieke aanpassing toevoegen

Feedback