연습: 페이지 수준 리소스 사용

5분

이 모듈의 모든 연습은 미리 빌드된 TipCalculator 애플리케이션과 관련이 있습니다. 모듈 전체에서 이 앱을 수정하고 개선합니다. 이 연습에서는 페이지 수준 리소스를 사용하여 반복되는 XAML 값을 제거합니다.

이 모듈에서는 .NET 8.0 SDK를 사용합니다. 기본 설정 터미널에서 다음 명령을 실행하여 .NET 8.0이 설치되어 있는지 확인합니다.

dotnet --list-sdks

다음 예제와 유사한 출력이 표시됩니다.

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

8으로 시작하는 버전이 나열되어 있는지 확인합니다. 나열되는 버전이 없거나 명령을 찾을 수 없는 경우 최신 .NET 8.0 SDK를 설치합니다.

시작 솔루션 열기

GitHub에서 연습 리포지토리를 복제하거나 다운로드합니다.

참고 항목

빌드 생성 파일이 최대 경로 길이를 초과하지 않도록 연습 콘텐츠를 C:\dev와 같은 짧은 폴더 경로에 복제하거나 다운로드하는 것이 가장 좋습니다.
Visual Studio를 사용하거나 Visual Studio Code에서 직접 이 폴더를 사용하여 exercise1/TipCalculator 폴더에서 시작 솔루션을 엽니다.
환경에서 이 솔루션이 빌드되고 실행되는지 확인합니다. (어떤 플랫폼이든 괜찮습니다.)
작동하는 방법을 이해하기 위해 애플리케이션을 몇 분 정도 조사하고 사용해 봅니다.

애플리케이션에서는 2개 페이지가 제공됩니다. StandardTipPage 페이지는 간단한 팁 계산기입니다. 값을 입력하면 이 페이지에서 팁(15%)과 총액을 계산합니다. 다음 이미지는 Android 디바이스에서 실행되는 애플리케이션을 보여 줍니다.

Light 및 Dark 단추를 사용하면 페이지의 색상 테마를 변경할 수 있습니다. 기본값은 밝은 테마입니다. Dark를 선택하면 배경색과 텍스트 색이 반전됩니다.

사용자 지정 계산기 사용 단추는 표시를 CustomTipPage 페이지로 전환합니다. 이 페이지에서는 슬라이더를 사용하여 팁 백분율을 변경할 수 있습니다. 또한 15% 및 20% 단추를 선택하여 미리 정의된 비율에 따라 팁을 계산할 수 있습니다.

반복되는 XAML 찾기

StandardTipPage.xaml 파일을 엽니다.
LayoutRoot 그리드의 배경색을 설정하는 XAML 태그를 찾습니다. 여기에는 하드 코딩된 값이 사용됩니다.
```
<Grid x:Name ="LayoutRoot" BackgroundColor="Silver" Padding="10">
```

“왼쪽 열”에서 레이블의 텍스트 색을 Navy로 설정하는 XAML 태그를 찾고 글꼴 크기를 22로 설정합니다. 이러한 값은 세 개의 레이블에서 똑같이 사용되고 있습니다.

<!-- Left column = static labels -->
<Label x:Name="billLabel"  Text="Bill"  TextColor="Navy" FontSize="22" ... />
<Label x:Name="tipLabel"   Text="Tip"   TextColor="Navy" FontSize="22" ... />
<Label x:Name="totalLabel" Text="Total" TextColor="Navy" FontSize="22" ... />

“오른쪽 열”에서 레이블의 색을 Navy로 설정하는 XAML 코드를 찾고 포인트 크기를 22로 설정합니다. 이러한 값은 두 개의 레이블에서 똑같이 사용되고 있습니다.

일부 속성 설정은 논리적 그룹을 구성하는 것으로 보입니다. 예를 들어 Navy와 22의 조합이 여러 레이블에서 사용되고 있습니다.
```

<Entry ... />
<Label x:Name="tipOutput"   Text="0.00" TextColor="Navy" FontSize="22"   ... />
<Label x:Name="totalOutput" Text="0.00" TextColor="Navy" FontSize="22"   ... />
```
TextColor 및 FontSize 값 수정과 관련된 작업을 고려합니다. 다섯 군데에서 변경해야 합니다.

리소스 정의

이제 XAML에서 리소스를 만들어 애플리케이션에서 찾은 반복 코드 중 일부를 제거해 보겠습니다.

StandardTipPage.xaml 파일을 엽니다.
ContentPage.Resources 섹션 내에서 Color 리소스를 정의합니다. 리소스에 x:Key 리소스 ID bgColor와 값 #C0C0C0을 지정합니다(Silver 색상 이름도 사용 가능).
두 번째 Color 리소스를 정의합니다. x:Key 리소스 ID fgColor와 값 #0000AD를 지정합니다(Navy 색상 이름도 사용 가능).

fontSize ID를 사용하여 x:Double 리소스를 정의합니다. 이 리소스 값을 22로 설정합니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             ...>

    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="bgColor">#C0C0C0</Color>
            <Color x:Key="fgColor">#0000AD</Color>
            <x:Double x:Key="fontSize">22</x:Double>
        </ResourceDictionary>
    </ContentPage.Resources>

    <Grid x:Name ="LayoutRoot" ...>
        ...

정적 리소스 사용

이제 만든 리소스를 적용해 보겠습니다.

StaticResource 태그 확장을 사용하여 bgColor 리소스를 LayoutRootGrid 컨트롤의 Background 속성에 적용합니다.
```
...
<Grid x:Name ="LayoutRoot" BackgroundColor="{StaticResource bgColor}" Padding="10">
```

fgColor 리소스를 현재 TextColor를 Navy로 설정하는 모든 Label 컨트롤의 TextColor 속성에 적용합니다. 또한 하드 코딩된 글꼴 크기를 fontSize 정적 리소스로 바꿉니다.

...
<!-- Left column = static labels -->
<Label x:Name="billLabel"  Text="Bill"  TextColor="{StaticResource fgColor}" FontSize="{StaticResource fontSize}" ... />
<Label x:Name="tipLabel"   Text="Tip"   TextColor="{StaticResource fgColor}" FontSize="{StaticResource fontSize}" ... />
<Label x:Name="totalLabel" Text="Total" TextColor="{StaticResource fgColor}" FontSize="{StaticResource fontSize}" ... />
...

애플리케이션을 실행합니다. 이전과 같이 StandardTipPage에서 시작할 때 밝은 배경에 어두운 텍스트가 표시되는지 확인합니다.

참고

이 시점에서는 CustomTipPage 또는 Light 및 Dark 테마의 스타일에 대해 염려하지 않아도 됩니다. 이 문제는 나중에 해결할 수 있습니다.

계속

시작 솔루션 열기

반복되는 XAML 찾기

리소스 정의

정적 리소스 사용

피드백