NET MAUI - XAML 애플리케이션 전체 리소스 생성 및 사용

리소스와 스타일을 통해 XAML 페이지 단위에서 반복되는 코드를 줄일수 있다. 

그렇다면 여러 XAML 페이지에서 사용가능 하게 하려면 어떻게 해야 할까

 

아래 그림을 보자.

View(Button, Label ...) 는 Layout Pannel 의 자식이고

Layout Pannel 은 Page 의 자식이다. 

이런 Page 들은 Application 밑에 존재 한다. 

 

Application Level  에서 Resource 와 Styles 정의 

<Application.Resources>
    <Color x:Key="MyTextColor">Blue</Color>
</Application.Resources>

 

.NET MAUI가 리소스 또는 스타일을 찾는 방법

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

아래 이미지는 리소스를 찾는 순서를 요약한 것이다. 

Application  과 ContentPage 에 같은 Key 의 Resource 가 존재 한다면?

<Application.Resources>
    <x:String x:Key="msg">Two</x:String>
</Application.Resources>

<ContentPage.Resources>
    <x:String x:Key="msg">One</x:String>
</ContentPage.Resources>
...
<Label Text="{StaticResource msg}">

 

우선순위가 ContentPage 가 Application 높기 때문에 Text 는 One 이라는 값으로 setting 된다. 

 

예제) 이전예제를 복사하여 새로운 폴더에 복사하자

예제는 Xaml/ApplicationResource 폴더를 기준으로 한다. 

MainPage.xaml 에서 다음 소스를 잘라내자

...
<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="TextColor" Value="{StaticResource fgColor}" />
    <Setter Property="FontSize" Value="{StaticResource fontSize}" />
</Style>
<Style x:Key="infoLabelStyle" TargetType="Label" BasedOn="{StaticResource baseLabelStyle}">
    <Setter Property="FontAttributes" Value="Bold" />
</Style>
...

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>

 

이제 모든 page 에 적용되는 Resource 를 생성 하였다. 

실행

 

관련영상

https://youtu.be/UEzp4u6NcZ4