Exercício: Use recursos para todo o aplicativo

Concluído

O objetivo deste exercício é disponibilizar recursos em várias páginas, movendo-os para um dicionário de recursos na classe Aplicativo da Calculadora de Dicas.

Este exercício é uma continuação do exercício anterior. Use sua solução existente como ponto de partida para essas etapas ou abra o projeto TipCalculator na pasta exercise4/TipCalculator no repositório clonado no primeiro exercício.

Verificar recursos no nível da página

Vamos verificar se os recursos definidos em uma página não estão disponíveis em outra. No final desta seção, seu aplicativo não é executado corretamente. No entanto, você corrigi-lo na próxima seção.

  1. No projeto TipCalculator, abra o arquivo CustomTipPage.xaml.

  2. Defina o recurso infoLabelStyle como o estilo do rótulo billLabel e remova as configurações existentes para as propriedades FontSize e FontAttributes .

    <Label x:Name="billLabel" Text="Bill" Style="{StaticResource infoLabelStyle}" Grid.Row="0" Grid.Column="0" />
    
  3. Executar a aplicação.

  4. Selecione Usar calculadora personalizada para exibir a página CustomTipPage . Olhe para o rótulo do Projeto de Lei. O tamanho da fonte deve ser menor do que os outros rótulos e não está em negrito. Esse comportamento ocorre porque a página não encontrou um recurso chamado infoLabelStyle (está no dicionário de recursos para uma página diferente), portanto, os valores padrão são usados para o tamanho da fonte e atributos de fonte.

    Uma captura de tela da página CustomTipPage. O rótulo Bill não está estilizado corretamente.

Criar um dicionário para recursos no nível do aplicativo

Vamos criar um dicionário de recursos em todo o aplicativo para armazenar recursos para usar em várias páginas.

  1. Abra o arquivo App.xaml . Observe que esse arquivo atualmente contém um dicionário de recursos com alguns dicionários de recursos existentes e estilos que são usados por padrão para controles internos no .NET MAUI. Para ver todos os estilos incluídos por padrão, exiba o arquivo 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. Abra o arquivo StandardTipPage.xaml e mova o recurso fontSize e os estilos baseLabelStyle e infoLabelStyle para o dicionário de recursos no arquivo App.xaml . Coloque-os após os estilos existentes para que o arquivo App.Xaml se pareça com o exemplo a seguir:

    <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. Executar a aplicação.

  4. Selecione a guia Usar calculadora personalizada e verifique se o rótulo da fatura agora está estilizado corretamente.