연습 - 애플리케이션 수준 리소스 사용 - Training

5분

이 연습에서는 리소스를 팁 계산기 애플리케이션 클래스의 리소스 사전으로 이동하여 여러 페이지에서 사용할 수 있도록 합니다.

이 연습은 이전 연습의 연속입니다. 기존 솔루션을 이러한 단계의 시작점으로 사용하거나 첫 번째 연습에서 복제한 리포지토리의 exercise4/TipCalculator 폴더에서 TipCalculator 프로젝트를 엽니다.

페이지 수준 리소스 확인

한 페이지에 정의된 리소스를 다른 페이지에서 사용할 수 없는지 확인해 보겠습니다. 이 섹션이 끝나면 앱이 올바르게 실행되지 않습니다. 그러나 다음 섹션에서 수정합니다.

TipCalculator 프로젝트에서 CustomTipPage.xaml 파일을 엽니다.
infoLabelStyle 리소스를 billLabel 레이블의 스타일로 설정하고 FontSize 및 FontAttributes 속성에 대한 기존 설정을 제거합니다.
```
<Label x:Name="billLabel" Text="Bill" Style="{StaticResource infoLabelStyle}" Grid.Row="0" Grid.Column="0" />
```
앱을 실행합니다.
사용자 지정 계산기 사용을 선택하여 CustomTipPage 페이지를 표시합니다. 청구 레이블을 확인합니다. 글꼴 크기는 다른 레이블보다 작아야 하며 굵게 표시되지 않습니다. 이 동작은 페이지에서 infoLabelStyle(다른 페이지의 리소스 사전에 있음)이라는 리소스를 찾지 못했기 때문에 발생합니다. 따라서 글꼴 크기 및 글꼴 특성에 기본값이 사용됩니다.

애플리케이션 수준 리소스 사전 만들기

여러 페이지에서 사용할 리소스를 보유하는 애플리케이션 수준 리소스 사전을 만들어 보겠습니다.

App.xaml 파일을 엽니다. 이 파일에는 현재 .NET MAUI에 기본 제공되는 컨트롤에 대해 기본적으로 사용되는 일부 기존 리소스 사전 및 스타일이 포함된 리소스 사전이 포함되어 있습니다. 기본적으로 포함된 모든 스타일을 보려면 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>

StandardTipPage.xaml 파일을 열고 fontSize 리소스, baseLabelStyle 및 infoLabelStyle 스타일을 App.xaml 파일의 리소스 사전으로 이동합니다. App.Xaml 파일이 다음 예제와 같이 표시되도록 기존 스타일 다음에 배치합니다.

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

앱을 실행합니다.
사용자 지정 계산기 사용 탭을 선택하고 이제 청구 레이블의 스타일이 올바르게 지정되었는지 확인합니다.

계속

연습 - 애플리케이션 수준 리소스 사용

페이지 수준 리소스 확인

애플리케이션 수준 리소스 사전 만들기

피드백