Oefening: Resources voor de hele toepassing gebruiken

5 minuten

Het doel van deze oefening is om resources beschikbaar te maken op meerdere pagina's in uw .NET MULTI-platform App UI-toepassing (MAUI) door ze te verplaatsen naar een resourcewoordenlijst in de toepassingsklasse TipCalculator.

Deze oefening is een voortzetting van de vorige oefening. Gebruik uw bestaande oplossing als uitgangspunt voor deze stappen of open het Project TipCalculator in de map exercise4/TipCalculator in de opslagplaats die u in de eerste oefening hebt gekloond.

Resources op paginaniveau controleren

Laten we controleren of resources die op één pagina zijn gedefinieerd, niet beschikbaar zijn op een andere pagina. Aan het einde van deze sectie wordt uw app niet correct uitgevoerd. U lost dit echter op in de volgende sectie.

Open in het Project TipCalculator het bestand CustomTipPage.xaml .
Stel de infoLabelStyle-resource in als de stijl voor het label billLabel en verwijder de bestaande instellingen voor de eigenschappen FontSize en FontAttributes .
```
<Label x:Name="billLabel" Text="Bill" Style="{StaticResource infoLabelStyle}" Grid.Row="0" Grid.Column="0" />
```
De app uitvoeren.
Selecteer Aangepaste rekenmachine gebruiken om de pagina CustomTipPage weer te geven. Kijk naar het factuurlabel. De tekengrootte moet kleiner zijn dan de andere labels en is niet vet. Dit gedrag komt doordat de pagina geen resource met de naam infoLabelStyle heeft gevonden (deze bevindt zich in de resourcewoordenlijst voor een andere pagina), zodat de standaardwaarden worden gebruikt voor de tekengrootte en lettertypekenmerken.

Een woordenlijst maken voor resources op toepassingsniveau

Laten we een resourcewoordenlijst voor de hele toepassing maken voor het bewaren van resources die op meerdere pagina's kunnen worden gebruikt.

Open het bestand App.xaml . U ziet dat dit bestand momenteel een resourcewoordenlijst bevat met een aantal bestaande resourcewoordenlijsten en -stijlen die standaard worden gebruikt voor besturingselementen die zijn ingebouwd in .NET MAUI. Als u alle stijlen wilt zien die standaard zijn opgenomen, bekijkt u het bestand 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>

Open het bestand StandardTipPage.xaml en verplaats de fontSize-resource en de stijlen baseLabelStyle en infoLabelStyle naar de resourcewoordenlijst in het bestand App.xaml . Plaats ze na de bestaande stijlen, zodat het Bestand App.Xaml eruitziet als in het volgende voorbeeld:

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

De app uitvoeren.
Selecteer Het tabblad Aangepaste rekenmachine gebruiken en controleer of het label Factuur nu juist is opgemaakt.

Oefening: Resources voor de hele toepassing gebruiken

Resources op paginaniveau controleren

Een woordenlijst maken voor resources op toepassingsniveau

Feedback