리소스 정의 및 사용

리소스는 프로그래밍 언어의 기호화된 상수와 같습니다. 이는 한 곳에 정의하고 필요한 모든 곳에서 참조하세요. "매직" 값 대신 설명이 포함된 이름을 사용하기 때문에 코드를 더 쉽게 읽을 수 있습니다. 값을 변경해야 하는 경우 정의만 업데이트하면 됩니다.

이 모듈에서는 리소스를 사용하여 .NET MAUI(다중 플랫폼 앱 UI)에서 사용하는 XAML(Extensible Application Markup Language)에서 하드 코딩된 값을 제거하는 방법을 알아보세요.

리소스란?

리소스는 UI에서 공유할 수 있는 모든 개체입니다. 가장 일반적인 예는 글꼴, 색 및 크기입니다. 그러나 Style 및 OnPlatform 인스턴스와 같은 복잡한 개체를 리소스로 저장할 수도 있습니다.

리소스는 XAML 또는 코드에서 정의한 다음, XAML 또는 코드에서 적용합니다. 일반적으로 코드가 유용한 몇 가지 사례를 나중에 보여 주지만 완전히 XAML로 작업합니다.

예제를 생각해 보겠습니다. 페이지의 컨트롤에서 동일한 TextColor 값을 사용하려는 경우를 가정해 보겠습니다. 하드 코드된 값을 사용한 경우 XAML은 다음과 같습니다. 두 컨트롤에서 텍스트 색의 값이 반복되는 방법에 주의하세요.

<Label TextColor="Blue" FontSize="14">
<Button TextColor="Blue" FontSize="14">

텍스트 색을 반복하는 대신 이를 리소스로 정의할 수 있습니다. 정의는 다음 XAML과 같습니다.

<Color x:Key="PageControlTextColor">Blue</Color>

정의된 요소에 리소스에 이름을 지정하는 x:Key 속성이 어떻게 있는지 확인합니다. 이 키를 사용하여 XAML에서 리소스를 조회합니다.

리소스를 사용하려면 먼저 리소스 사전에 저장해야 합니다.

ResourceDictionary란?

ResourceDictionary 는 UI 리소스와 함께 사용하도록 사용자 지정된 .NET MAUI 라이브러리 클래스입니다. 사전이므로 키/값 쌍을 저장합니다. 키의 형식은 String으로 제한되지만 값은 모든 개체일 수 있습니다.

모든 .NET MAUI XAML 페이지에는 ResourceDictionary 개체를 보유할 수 있는 Resources라는 속성이 있습니다. 이 속성은 기본값이 null이므로 먼저 사전 인스턴스를 만든 후에 사용할 수 있습니다. 다음 코드에서는 ResourceDictionary 개체를 만들고 ContentPage의 Resources 속성에 할당하는 방법을 보여 줍니다.

<ContentPage.Resources>
    <ResourceDictionary>
        ...
    </ResourceDictionary>
</ContentPage.Resources>

.NET MAUI XAML에는 Resources 속성 사용을 시작할 때마다 자동으로 사전 인스턴스를 만드는 기본 제공 편의 구문이 있습니다. 이전 예제는 다음 코드로 간소화할 수 있습니다.

<ContentPage.Resources>
    ...
</ContentPage.Resources>

앱의 모든 페이지는 자체 사전을 가질 수 있습니다. 이러한 페이지별 사전을 사용하여 해당 페이지에서만 사용되는 리소스를 저장합니다.

<Label Text="Hello, World!"
        ...
        <Label.Resources>
           ...
        </Label.Resources>
</Label>

리소스 만들기

리소스를 만들려면 페이지의 Resources 속성 내에서 선언합니다. 다음 예에서는 앞에서 설명한 텍스트 색 리소스를 만듭니다.

<ContentPage.Resources>
    <Color x:Key="PageControlTextColor">Blue</Color>
</ContentPage.Resources>

리소스에 대한 키를 선택하는 경우 리소스 값이 아닌 사용을 반영하는 이름을 선택합니다. 예를 들어 레이블의 배경을 Red로 설정하려면 RedColor 를 키로 사용하지 말고 BackgroundColor 를 대신 사용합니다.

StaticResource를 사용하여 리소스 적용

StaticResource 는 리소스 사전에서 리소스를 조회하기 위한 태그 확장입니다. 리소스의 키를 제공하고 태그 확장에서 해당 값을 반환합니다. 다음 XAML 태그는 Color 리소스 PageControlTextColor를 만들고 사용하는 예제를 보여줍니다. 예제의 레이블 컨트롤에 대한 XAML 태그는 StaticResource 태그 확장을 사용하여 값을 검색합니다.

<ContentPage.Resources>
    <Color x:Key="PageControlTextColor">Blue</Color>
</ContentPage.Resources>

...

<Label TextColor="{StaticResource PageControlTextColor}" ... />

확장은 한 번만 평가되므로 확장을 StaticResource 라고 합니다. 사전 조회는 대상 개체를 만들 때 수행됩니다. 사전의 리소스 값이 변경되더라도 대상 속성은 업데이트되지 않습니다.

XAML 내장 형식

이 단원의 시작 부분에 표시된 원래 예제는 TextColor 속성과 FontSize 속성을 설정합니다.

<Label TextColor="Blue" FontSize="14">
<Button TextColor="Blue" FontSize="14">

FontSize 속성에는 Double 형식이 있습니다. 이 값에 대한 리소스를 만들려면 XAML 사양에 정의된 XAML 내장 형식 중 하나를 사용합니다. XAML 사양은 다양한 C# 단순 형식에 대한 형식 이름을 정의합니다. 다음 코드에서는 각 내장 형식에 대한 리소스 예제를 보여 줍니다.

<ContentPage.Resources>
    <x:String x:Key="...">Hello</x:String>
    <x:Char x:Key="...">X</x:Char>
    <x:Single x:Key="...">31.4</x:Single>
    <x:Double x:Key="...">27.1</x:Double>
    <x:Byte x:Key="...">8</x:Byte>
    <x:Int16 x:Key="...">16</x:Int16>
    <x:Int32 x:Key="...">32</x:Int32>
    <x:Int64 x:Key="...">64</x:Int64>
    <x:Decimal x:Key="...">12345</x:Decimal>
    <x:TimeSpan x:Key="...">1.23:5959</x:TimeSpan>
    <x:Boolean x:Key="...">True</x:Boolean>
</ContentPage.Resources>

리소스에 대한 플랫폼별 값 설정

일반적으로 플랫폼 간에 앱 UI를 약간 조정해야 합니다. 플랫폼별 값을 정의하는 표준 방법은 리소스를 정의할 때 OnPlatform 개체를 사용하는 것입니다. 예를 들어 다음 코드에서는 iOS, Android, macOS(Mac Catalyst) 및 WinUI(Windows)에서 다양한 텍스트 색을 참조하는 리소스를 만드는 방법을 보여 줍니다.

<ContentPage.Resources>
    <OnPlatform x:Key="textColor" x:TypeArguments="Color">
        <On Platform="iOS" Value="Silver" />
        <On Platform="Android" Value="Green" />
        <On Platform="WinUI" Value="Yellow" />
        <On Platform="MacCatalyst" Value="Pink" />
    </OnPlatform> 
</ContentPage.Resources>
...

<Label TextColor="{StaticResource textColor}" ... />