Definiowanie zasobów i korzystanie z nich

Zasób jest jak symboliczna stała z języka programowania. Definiujesz go w jednym miejscu i odwołujesz się do niego wszędzie tam, gdzie są potrzebne. Kod jest łatwiejszy do odczytania, ponieważ używasz nazwy opisowej zamiast wartości "magic". Jeśli musisz zmienić wartość, wystarczy zaktualizować definicję.

W tym module zobaczysz, jak używać zasobów w celu wyeliminowania wartości zakodowanych na podstawie języka XAML (Extensible Application Markup Language) używanego w wieloplatformowym interfejsie użytkownika aplikacji platformy .NET (MAUI).

Co to jest zasób?

Zasób to dowolny obiekt, który można udostępnić w interfejsie użytkownika. Najczęstsze przykłady to czcionki, kolory i rozmiary. Można jednak również przechowywać złożone obiekty, takie jak Style i OnPlatform jako zasoby.

Zasób definiuje się w języku XAML lub kodzie. Następnie zastosujesz go w języku XAML lub kodzie. Zazwyczaj pracujesz w całości w języku XAML, chociaż pokazujemy kilka przypadków później, w których kod jest przydatny.

Rozważmy przykład. Załóżmy, że chcesz użyć tych samych wartości TextColor w kontrolkach na stronie. Jeśli użyto trwale zakodowanych wartości, kod XAML będzie wyglądać podobnie do poniższego. Zwróć uwagę, że wartość koloru tekstu jest powtarzana w dwóch kontrolkach.

<Label TextColor="Blue" FontSize="14">
<Button TextColor="Blue" FontSize="14">

Zamiast powtarzać kolor tekstu, można go zdefiniować jako zasób. Definicja wygląda następująco:

<Color x:Key="PageControlTextColor">Blue</Color>

Zwróć uwagę, że zdefiniowany element ma właściwość x:Key , która nadaje zasobowi nazwę. Ten klucz służy do wyszukiwania zasobu w języku XAML.

Aby można było użyć zasobu, należy go przechowywać w słowniku zasobów.

Co to jest ResourceDictionary?

ResourceDictionary to klasa biblioteki MAUI platformy .NET dostosowana do użycia z zasobami interfejsu użytkownika. Jest to słownik, więc przechowuje pary klucz/wartość. Typ klucza jest ograniczony do ciągu, a wartość może być dowolnym obiektem.

Każda strona XAML programu .NET MAUI ma właściwość o nazwie Resources , która może przechowywać obiekt ResourceDictionary . Właściwość ma wartość null domyślnie, dlatego przed jej użyciem należy utworzyć wystąpienie słownika. Poniższy kod pokazuje, jak utworzyć obiekt ResourceDictionary i przypisać go do właściwości Resources elementu ContentPage:

<ContentPage.Resources>
    <ResourceDictionary>
        ...
    </ResourceDictionary>
</ContentPage.Resources>

Język .NET MAUI XAML posiada wbudowaną wygodną składnię, która automatycznie tworzy wystąpienie słownika za każdym razem, gdy zaczniesz używać właściwości Resources. Poprzedni przykład można uprościć do następującego kodu:

<ContentPage.Resources>
    ...
</ContentPage.Resources>

Każda strona w aplikacji może mieć własny słownik. Te słowniki specyficzne dla strony służą do przechowywania zasobów używanych wyłącznie na tej stronie.

<Label Text="Hello, World!"
        ...
        <Label.Resources>
           ...
        </Label.Resources>
</Label>

Utwórz zasób

Aby utworzyć zasób, należy zadeklarować go wewnątrz właściwości Resources dla strony. Poniższy przykład tworzy zasób koloru tekstu opisany wcześniej

<ContentPage.Resources>
    <Color x:Key="PageControlTextColor">Blue</Color>
</ContentPage.Resources>

Po wybraniu klucza zasobu wybierz nazwę, która odzwierciedla użycie, a nie wartość zasobu. Aby na przykład ustawić tło etykiety na Czerwony, nie należy używać redcolor jako klucza, zamiast tego użyj elementu BackgroundColor .

Stosowanie zasobu przy użyciu usługi StaticResource

StaticResource to rozszerzenie znaczników do wyszukiwania zasobów w słowniku zasobów. Należy podać klucz zasobu, a rozszerzenie znaczników zwraca odpowiednią wartość. Poniższy znacznik XAML przedstawia przykład, który tworzy zasób o nazwie Color i używa go. Znacznik XAML dla kontrolki etykiety w przykładzie używa rozszerzenia znaczników StaticResource do pobrania wartości.

<ContentPage.Resources>
    <Color x:Key="PageControlTextColor">Blue</Color>
</ContentPage.Resources>

...

<Label TextColor="{StaticResource PageControlTextColor}" ... />

Rozszerzenie nosi nazwę StaticResource , ponieważ rozszerzenie jest oceniane tylko raz. Wyszukiwanie słownika odbywa się po utworzeniu obiektu docelowego. Właściwość docelowa nie jest aktualizowana, jeśli wartość zasobu w słowniku ulegnie zmianie.

Typy wewnętrzne XAML

Oryginalny przykład przedstawiony na początku tej lekcji ustawia właściwość TextColor i właściwość FontSize :

<Label TextColor="Blue" FontSize="14">
<Button TextColor="Blue" FontSize="14">

Właściwość FontSize ma typ Double. Aby utworzyć zasób dla tej wartości, należy użyć jednego z typów wewnętrznych XAML zdefiniowanych w specyfikacji XAML. Specyfikacja XAML definiuje nazwy typów dla wielu prostych typów języka C#. Poniższy kod przedstawia przykładowe zasoby dla każdego z typów wewnętrznych.

<ContentPage.Resources>
    <x:String x:Key="...">Hello</x:String>
    <x:Char x:Key="...">X</x:Char>
    <x:Single x:Key="...">31.4</x:Single>
    <x:Double x:Key="...">27.1</x:Double>
    <x:Byte x:Key="...">8</x:Byte>
    <x:Int16 x:Key="...">16</x:Int16>
    <x:Int32 x:Key="...">32</x:Int32>
    <x:Int64 x:Key="...">64</x:Int64>
    <x:Decimal x:Key="...">12345</x:Decimal>
    <x:TimeSpan x:Key="...">1.23:5959</x:TimeSpan>
    <x:Boolean x:Key="...">True</x:Boolean>
</ContentPage.Resources>

Ustawianie wartości specyficznych dla platformy dla zasobu

Często trzeba dostosować interfejs użytkownika aplikacji nieco między platformami. Standardowym sposobem definiowania wartości specyficznych dla platformy jest użycie obiektu OnPlatform podczas definiowania zasobu. Na przykład poniższy kod pokazuje, jak utworzyć zasób odwołujący się do różnych kolorów tekstu w systemach iOS, Android, macOS (Mac Catalyst) i Windows (WinUI).

<ContentPage.Resources>
    <OnPlatform x:Key="textColor" x:TypeArguments="Color">
        <On Platform="iOS" Value="Silver" />
        <On Platform="Android" Value="Green" />
        <On Platform="WinUI" Value="Yellow" />
        <On Platform="MacCatalyst" Value="Pink" />
    </OnPlatform> 
</ContentPage.Resources>
...

<Label TextColor="{StaticResource textColor}" ... />