Ćwiczenie: korzystanie z zasobów obejmujących całą aplikację

Ukończone

Celem tego ćwiczenia jest udostępnienie zasobów na wielu stronach w aplikacji interfejsu użytkownika aplikacji wieloplatformowej platformy .NET (MAUI), przenosząc je do słownika zasobów w klasie Aplikacja Kalkulator porad.

To ćwiczenie jest kontynuacją poprzedniego ćwiczenia. Użyj istniejącego rozwiązania jako punktu początkowego dla tych kroków lub otwórz projekt TipCalculator w folderze exercise4/TipCalculator w repozytorium sklonowanym w pierwszym ćwiczeniu.

Weryfikowanie zasobów na poziomie strony

Sprawdźmy, czy zasoby zdefiniowane na jednej stronie nie są dostępne na innej stronie. Na końcu tej sekcji aplikacja nie działa poprawnie. Jednak naprawisz ją w następnej sekcji.

1. W projekcie TipCalculator otwórz plik CustomTipPage.xaml .

2. Ustaw zasób infoLabelStyle jako styl etykiety billLabel i usuń istniejące ustawienia właściwości FontSize i FontAttributes.

   <Label x:Name="billLabel" Text="Bill" Style="{StaticResource infoLabelStyle}" Grid.Row="0" Grid.Column="0" />
   

3. Uruchom aplikację.

4. Wybierz pozycję Użyj kalkulatora niestandardowego , aby wyświetlić stronę CustomTipPage . Spójrz na etykietę Rachunek. Rozmiar czcionki powinien być mniejszy niż inne etykiety i nie jest pogrubiony. To zachowanie jest spowodowane tym, że strona nie znalazła zasobu o nazwie infoLabelStyle (znajduje się w słowniku zasobów dla innej strony), dlatego wartości domyślne są używane dla atrybutów rozmiaru czcionki i czcionki.

   

Tworzenie słownika dla zasobów na poziomie aplikacji

Utwórzmy słownik zasobów dla całej aplikacji do przechowywania zasobów do użycia na wielu stronach.

1. Otwórz plik App.xaml. Zwróć uwagę, że ten plik zawiera obecnie słownik zasobów z niektórymi istniejącymi słownikami zasobów i stylami, które są domyślnie używane dla kontrolek wbudowanych w program .NET MAUI. Aby wyświetlić wszystkie style dołączone domyślnie, wyświetl plik Resources/Styles.xaml .

   <?xml version = "1.0" encoding = "UTF-8" ?>
   <Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:local="clr-namespace:TipCalculator"
                x:Class="TipCalculator.App">
       <Application.Resources>
           <ResourceDictionary>
               <ResourceDictionary.MergedDictionaries>
                   <ResourceDictionary Source="Resources/Colors.xaml" />
                   <ResourceDictionary Source="Resources/Styles.xaml" />
               </ResourceDictionary.MergedDictionaries>
           </ResourceDictionary>
       </Application.Resources>
   </Application>
   

2. Otwórz plik StandardTipPage.xaml i przenieś zasób fontSize oraz style baseLabelStyle i infoLabelStyle do słownika zasobów w pliku App.xaml. Umieść je po istniejących stylach, aby plik App.Xaml wyglądał jak w poniższym przykładzie:

   <Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                ...>
       <Application.Resources>
           <ResourceDictionary>
               <ResourceDictionary.MergedDictionaries>
                   <ResourceDictionary Source="Resources/Colors.xaml" />
                   <ResourceDictionary Source="Resources/Styles.xaml" />
               </ResourceDictionary.MergedDictionaries>
   
               <Color x:Key="bgColor">#C0C0C0</Color>
               <Color x:Key="fgColor">#0000AD</Color>
               <x:Double x:Key="fontSize">22</x:Double>
   
               <Style x:Key="baseLabelStyle" TargetType="Label">
                   <Setter Property="FontSize" Value="{StaticResource fontSize}" />
               </Style>
               <Style x:Key="infoLabelStyle" BasedOn="{StaticResource baseLabelStyle}" TargetType="Label">
                   <Setter Property="FontAttributes" Value="Bold" />
               </Style>
           </ResourceDictionary>
       </Application.Resources>
   </Application>
   

3. Uruchom aplikację.

4. Wybierz kartę Użyj kalkulatora niestandardowego i sprawdź, czy etykieta rachunku jest teraz poprawnie stylizowany.