본문 바로가기

Develop/MAUI 가이드

[Xamarin] ResourceDictionary 깔끔하게 정리

반응형

Organize ResourceDictionary
Organize ResourceDictionary

ResourceDictionary 깔끔하게 정리

아래처럼 View 마다 ResourceDictionary가 있을 경우, 중복되는 XAML 코드도 발생하게 되고 같은 객체를 중복하여 생성하게 되므로, 비효율적입니다.

ContentViewA.xaml

<ContentView>
    <ContentView.Resources>
        <ResourceDictionary>
          <ConverterA x:Key="ConverterA"/>
          <Color x:Key="ColorA">#FFFFFF</Color>
        </ResourceDictionary>
    </ContentView.Resources>
</ContentView>

따라서 먼저 아래처럼 ResouceDictionary를 분리된 파일로 만듭니다.

ContentViewA.xaml

<ContentView>
    <ContentView.Resources>
        <ResourceDictionary Source="ResourceDictionary.xaml" />
    </ContentView.Resources>
</ContentView>

ResourceDictionary.xaml

<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <ConverterA x:Key="ConverterA"/>
      <Color x:Key="ColorA">#FFFFFF</Color>
</ResourceDictionary>

하지만 ResourceDictionary.xaml 처럼 모든 리소스를 한 곳에서 관리하게 되면 불필요한 리소스까지 공유하게 되는 문제가 있습니다. 따라서 아래처럼 리소스를 자신만의 기준에 맞춰 분리하도록 합니다.

ContentViewA.xaml

<ContentView>
    <ContentView.Resources>
        <ResourceDictionary Source="ResourceDictionary.xaml" />
    </ContentView.Resources>
</ContentView>

ResourceDictionary.xaml

<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="Converters.xaml" />
      <ResourceDictionary Source="Colors.xaml" />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Converters.xaml

<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <ConverterA x:Key="ConverterA"/>
</ResourceDictionary>

Colors.xaml

<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Color x:Key="ColorA">#FFFFFF</Color>
</ResourceDictionary>

이제 ResourceDictionary 를 조합하여 사용할 수 있게 되었으니, 깔끔하게 정리하실 수 있으실 겁니다.

다른 Project에 있는 ResourceDictionary 를 참조하는 방법

다른 Project 에 있는 ResourceDictionary 는 상대 경로로 참조를 할 수 없습니다. 따라서 ResourceDictionary의 Behind code 를 만들어서 참조하도록 합니다.

아래와 같은 XAML 코드가 있다면,
Theme.xml

<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    x:Class="Solution.Project.Theme">
    <Color x:Key="BackgroundColor">#FFFFFF</Color>
</ResourceDictionary>

아래와 같은 CSharp 코드를 구현합니다.
Theme.xml.cs

namespace Solution.Project
{
    public partial class Theme : IResourceDictionary
    {
        public Theme()
        {
            InitializeComponent();
        }
    }
}

그러면 아래와 같이 참조하여 사용할 수 있습니다.
ContentView.xml

    <ContentView.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                  <!-- Soruce 속성으로 상대 경로를 참조하는게 아니라, 클래스를 참조하는 방식입니다. -->
                <project:Theme />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </ContentView.Resources>

오류가 발생했을 때

ResourceDictionary.MergedDictionaries 오류가 발생하면 <?xaml-comp compile="true" ?> 코드를 아래와 같이 XAML 코드 상단에 추가해서 해결합니다.

<?xml version="1.0" encoding="UTF-8"?>
<?xaml-comp compile="true" ?>
<ResourceDictionary>

</ResourceDictionary>
반응형