Ćwiczenie: Dodawanie zachowania do strony XAML

10 min

Wcześniej zmodyfikowano aplikację Notatki, aby przenieść układ interfejsu użytkownika z kodu C# do języka XAML. Teraz możesz dodać następujące funkcje do strony:

Obsługa dostosowywania koloru czcionki i koloru tła etykiety, przycisków i kontrolki edytora. W ten sposób można łatwo dostosować aplikację, aby była bardziej dostępna dla użytkowników wymagających interfejsu użytkownika o wysokim kontraście.
Dostosuj wysokość kontrolki Edytora w systemach Android i iOS. W przypadku uruchamiania w systemie Windows ta kontrolka ma wystarczającą szerokość, aby umożliwić użytkownikowi wprowadzanie rozsądnej ilości tekstu przed przewinięciem. Na telefonie z systemem Android lub telefonie iPhone większa szerokość powoduje szybsze przewijanie, dzięki czemu korzystne jest zapewnienie większej przestrzeni pionowej.

Używanie zasobu statycznego w języku XAML

Utworzysz klasę statyczną do przechowywania koloru czcionki i wartości koloru tła aplikacji. Następnie użyjesz x:Static rozszerzenia znaczników, aby odczytać te wartości z klasy i zastosować je do znaczników XAML dla kontrolek na stronie.

W programie Visual Studio wróć do aplikacji Notatki edytowanej w poprzednim ćwiczeniu.

Uwaga

Działająca kopia aplikacji jest dostępna w folderze exercise2 w repozytorium ćwiczeń sklonowanym na początku poprzedniego ćwiczenia.
W oknie Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt Notatki, wybierz pozycję Dodaj, a następnie wybierz pozycję Klasa.
W oknie dialogowym Dodawanie nowego elementu upewnij się, że wybrano szablon Klasa. Nazwij nowy plik klasy SharedResources.cs, a następnie wybierz pozycję Dodaj:
W pliku SharedResources.cs zastąp using dyrektywy następującym kodem i oznacz klasę SharedResources jako static:
```
namespace Notes;

static class SharedResources
{

}
```
static readonly Dodaj pole FontColor do klasy SharedResources. To pole zawiera obecnie wartość odpowiadającą kolorowi niebieskiemu, ale można go zmodyfikować przy użyciu dowolnej prawidłowej kombinacji wartości RGB:
```
static class SharedResources
{
    public static readonly Color FontColor = Color.FromRgb(0, 0, 0xFF);
}
```

Dodaj drugie static readonly pole o nazwie BackgroundColor i ustaw je na wybrany kolor:

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

Otwórz plik MainPage.xaml.
Dodaj następującą deklarację przestrzeni nazw XML do ContentPage elementu przed atrybutem x:Class . Ta deklaracja przenosi klasy w przestrzeni nazw notatek języka C# do zakresu na stronie XAML:
```
<ContentPage ...
         xmlns:notes="clr-namespace:Notes"
         x:Class="Notes.MainPage"
         ...>
```
TextColor Dodaj atrybut pokazany w poniższym kodzie do kontrolkiLabel. Ten znacznik używa x:Static rozszerzenia znaczników do pobierania wartości przechowywanych w polach w staticklasie SharedResources :
```
<Label Text="Notes"
    HorizontalOptions="Center"
    FontAttributes="Bold" 
    TextColor="{x:Static Member=notes:SharedResources.FontColor}" />
```

x:Static Użyj rozszerzenia znaczników, aby ustawić TextColor atrybuty i dla BackgroundColor kontrolek i EditorButton. Ukończony znacznik dla pliku MainPage.xaml powinien wyglądać następująco:

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

Uwaga

Ten kod XAML zawiera powtórzenie znaczników, które ustawia TextColor właściwości i BackgroundColor . Język XAML umożliwia definiowanie zasobów, które można stosować globalnie w aplikacji przy użyciu słownika zasobów w pliku App.xaml . Ta technika została opisana w późniejszym module.

Skompiluj aplikację i uruchom ją przy użyciu systemu Windows. Sprawdź, czy kolory są zgodne z kolorami określonymi w klasie SharedResources . Jeśli masz czas, spróbuj również uruchomić aplikację przy użyciu emulatora systemu Android:
Po zakończeniu wróć do programu Visual Studio.

Dodawanie dostosowywania specyficznego dla platformy

Otwórz plik MainPage.xaml w programie Visual Studio.
Znajdź definicję kontrolki Editor i zmodyfikuj wartość właściwości HeightRequest , jak pokazano w poniższym przykładzie:
```
<Editor x:Name="editor"
        ...
        HeightRequest="{OnPlatform 100, Android=500, iOS=500}" 
        .../>
```
Ten znacznik ustawia domyślną wysokość kontrolki na 100 jednostek, ale zwiększa ją do 500 w systemie Android.
Skompiluj aplikację i uruchom ją przy użyciu systemu Windows, a następnie systemu Android. Aplikacja powinna wyglądać następująco na każdej platformie:

Ćwiczenie: Dodawanie zachowania do strony XAML

Używanie zasobu statycznego w języku XAML

Dodawanie dostosowywania specyficznego dla platformy

Opinia