Övning: Lägga till beteende på din XAML-sida

10 minuter

Du har tidigare ändrat Notes-appen för att flytta användargränssnittslayouten från C#-kod till XAML. Nu är du redo att lägga till följande funktioner på sidan:

Stöd för anpassning av etikettens teckenfärg och bakgrundsfärg, knappar och redigeringskontroll. På så sätt är det enkelt att justera appen så att den blir mer tillgänglig för användare som kräver ett gränssnitt med hög kontrast.
Justera redigerarkontrollens höjd på Android och iOS. När den körs i Windows har den här kontrollen tillräcklig bredd så att användaren kan ange en rimlig mängd text innan den rullar. På en Android-telefon eller en iPhone resulterar den smalare bredden i att rulla snabbare, så det är fördelaktigt att ge mer vertikalt utrymme.

Använda en statisk resurs i XAML

Du skapar en statisk klass som innehåller appens teckenfärg och bakgrundsfärgvärden. Sedan använder du markeringstillägget x:Static för att läsa dessa värden från klassen och tillämpa dem på XAML-markering för kontrollerna på sidan.

I Visual Studio går du tillbaka till appen Anteckningar som du redigerade i föregående övning.

Kommentar

En fungerande kopia av appen finns i mappen exercise2 i övningslagringsplatsen som du klonade i början av föregående övning.
I Solution Explorer-fönstret högerklickar du på projektet Anteckningar, väljer Lägg till och väljer sedan Klass.
I dialogrutan Lägg till nytt objekt kontrollerar du att klassmallen är markerad. Ge den nya klassfilen namnet SharedResources.cs och välj sedan Lägg till:
I filen SharedResources.cs ersätter du direktiven using med följande kod och markerar klassen SharedResources som static:
```
namespace Notes;

static class SharedResources
{

}
```
Lägg till fältet static readonly FontColor i klassen SharedResources . Det här fältet innehåller för närvarande ett värde som motsvarar blått, men du kan ändra det med valfri giltig kombination av RGB-värden:
```
static class SharedResources
{
    public static readonly Color FontColor = Color.FromRgb(0, 0, 0xFF);
}
```

Lägg till ett andra static readonly fält med namnet BackgroundColor och ange det till valfri färg:

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

Öppna filen MainPage.xaml.
Lägg till XML-deklarationen för följande namnområde i elementet ContentPage före attributet x:Class . Den här deklarationen tar klasserna i C# Notes-namnområdet till omfånget på XAML-sidan:
```
<ContentPage ...
         xmlns:notes="clr-namespace:Notes"
         x:Class="Notes.MainPage"
         ...>
```
Lägg till attributet TextColor som visas i följande kod i Label kontrollen. Den här markeringen använder markeringstillägget x:Static för att hämta de värden som lagras i fälten static i klassen SharedResources :
```
<Label Text="Notes"
    HorizontalOptions="Center"
    FontAttributes="Bold" 
    TextColor="{x:Static Member=notes:SharedResources.FontColor}" />
```

Använd påläggstillägget x:Static för att ange attributen TextColor och BackgroundColor för Editor kontrollerna och Button . Den färdiga markeringen för filen MainPage.xaml bör se ut så här:

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

Kommentar

Den här XAML-koden innehåller upprepning av markering som anger TextColor egenskaperna och BackgroundColor . Med XAML kan du definiera resurser som kan användas globalt i en app med hjälp av en resursordlista i Filen App.xaml . Vi beskriver den här tekniken i en senare modul.

Återskapa appen och kör den med Windows. Kontrollera att färgerna matchar de som du angav i klassen SharedResources . Om du har tid kan du även prova att köra appen med Android-emulatorn:
Gå tillbaka till Visual Studio när du är klar.

Lägga till plattformsspecifik anpassning

Öppna filen MainPage.xaml i Visual Studio.
Leta upp definitionen av Editor kontrollen och ändra värdet för egenskapen HeightRequest enligt följande exempel:
```
<Editor x:Name="editor"
        ...
        HeightRequest="{OnPlatform 100, Android=500, iOS=500}" 
        .../>
```
Den här markeringen anger standardkontrollhöjden till 100 enheter, men ökar den till 500 på Android.
Återskapa appen och kör den med Windows och sedan Android. Appen bör se ut så här på varje plattform:

Övning: Lägga till beteende på din XAML-sida

Använda en statisk resurs i XAML

Lägga till plattformsspecifik anpassning

Feedback