[MAUI] XAML 태그 확장

.NEt MAUI XAMl 태그확장

 

.NET XAML 태그 확장을 사용하면 속성을 다른 원본에서 간접적으로 참조되는 개체 또는 값으로 설정할 수 있다.

일반적으로 XAML을 사용하여 개체의 속성을 문자열, 숫자, 열거형 멤버 또는 백그라운드 값으로 변환되는 문자열과 같은 명시적 값으로 설정한다. 그러나 경우에 따라 속성은 다른 곳에 정의된 값을 대신 참조해야 하거나 런타임에 코드로 약간 처리해야 할 수 있다.

 

공유 리소스

만약, 동일한 XAML 속성이 여러번 사용된다면 하나로 만들어 관리하는 게 관리 포인트에 더 좋다. 하나로 만들지 않는다면 동일한 속성을 여러 번 수정하러 다니는 경우가 생기고 누락되는 경우가 생길 수 있기 때문이다.

이러한 불편함을 없애고자 나온 솔루션은 값 또는 개체를 리소스 사전에 저장하여 사용하는 것이다. 페이지에서 리소스 사전을 사용하려면 페이지 맨 위에 속성 요소 태그 'Resources'을 쌍으로 만들어 등록한다. 다양한 형식의 개체 및 값을 리소스 사전에 추가할 수 있으며 인스턴스화 할 수 있다. 리소스 사전에 등록 시 x:Key를 통해 사전 키가 필수입니다.

 

 

사용방법

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.SharedResourcesPage"
             Title="Shared Resources Page">
    <ContentPage.Resources>
        ...
    </ContentPage.Resources>
    ...
</ContentPage>

ContentPage.Resources를 통하여 리소스 사전에 등록을 할 수 있다.

 

 

예시

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.TestPage"
             Title="TestPage" Padding="20">
    <StackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />

        <Label
            Text="Text Number 1"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            TextColor="Red"
            FontSize="20"
            ></Label>

        <Label
            Text="Text Number 2"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            TextColor="Red"
            FontSize="20"
            ></Label>

        <Label
            Text="Text Number 3"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            TextColor="Red"
            FontSize="20"
            ></Label>
    </StackLayout>
</ContentPage>

위 예시 코드를 볼 경우 동일한 속성값들을 설정하는데 만약 'HorizontalOptions', 'VerticalOptions' 값을 동일하게 다 바꿔야 한다면 동일한 속성 값들을 3번씩 수정해줘야 한다. 이러한 불필요한 작업과 낮은 관리 포인트를 줄이기 위하여 공통으로 빼보도록 한다.

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.TestPage"
             Title="TestPage" Padding="20">

    <ContentPage.Resources>

        <LayoutOptions x:Key="horzOptions" Alignment="Start"  />

        <LayoutOptions x:Key="vertiOptions" Alignment="Start">
        </LayoutOptions>
        
    </ContentPage.Resources>
    
    <StackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />

        <Label
            Text="Text Number 1"
            HorizontalOptions="{StaticResource horzOptions}"
            VerticalOptions="{StaticResource vertiOptions}"
            TextColor="Red"
            FontSize="20"
            ></Label>

        <Label
            Text="Text Number 2"
            HorizontalOptions="{StaticResource horzOptions}"
            VerticalOptions="{StaticResource vertiOptions}"
            TextColor="Red"
            FontSize="20"
            ></Label>

        <Label
            Text="Text Number 3"
            HorizontalOptions="{StaticResource horzOptions}"
            VerticalOptions="{StaticResource vertiOptions}"
            TextColor="Red"
            FontSize="20"
            ></Label>
    </StackLayout>
</ContentPage>

 

리소스 사전에 공통 속성 값들을 설정하여 등록된 리소스를 불러와 사용하도록 했다. 접근 방법은 StaticResouce 를 통하여 접근하였고 페이지의 요소가 생성될 때 사전의 요소에 한 번만 액세스 한다. 추가적으로 플랫폼별로 정의를 하여 불러올 수 있다.

 

<OnPlatform x:Key="textColor" x:TypeArguments="Color">
    <On Platform="iOS" Value="Red"></On>
    <On Platform="Android" Value="Blue"></On>
</OnPlatform>

 

 

 

x:Static 태그 확장

StaticResource 외에도 x:Static 태그 확장이 있다. x:Static 주요 용도는 사용자 고유의 코드에 정적 필드 또는 속성을 참조하는 것이다. 여러 페이지에서 사용할 수 있는 몇 가지의 정적 필드를 정의 후 사용하는데 유용하다.

 

호출 방식은 ContentPage 에 호출하여 사용하는 방식이다. 예를 들어 StaticClass라는 Class를 만든 후 호출해보겠다.

namespace MauiApp1.Class
{
    static class StaticClass
    {
        public static readonly Color TestColor = Colors.Chocolate;
        public static readonly double width = 100;
    }
}

namespace를 MauiApp1.Class로 정의해 두었다. 호출하고자 하는 xaml파일에서 정의해둔 클래스를 불러온다.

xmlns:local="clr-namespace:MauiApp1.Class"

해당처럼 불러오면 정의해둔 StaticClass 를 호출할 수 있다.

 

x:Static local:StaticClass

형태로 접근하여 정의해둔 속성 필드 값을 불러와 사용가능하다.

 

아래는 최종 xaml 파일이며 StaticResource와 x:Static 방식 모두 되어있으니 참고하도록 한다.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiApp1.Class"
             x:Class="MauiApp1.TestPage"
             Title="TestPage" Padding="20">

    <ContentPage.Resources>

        <LayoutOptions x:Key="horzOptions" Alignment="Center"  />

        <LayoutOptions x:Key="vertiOptions" Alignment="Center">
        </LayoutOptions>

        <OnPlatform x:Key="textColor" x:TypeArguments="Color">
            <On Platform="iOS" Value="Red"></On>
            <On Platform="Android" Value="Blue"></On>
        </OnPlatform>
        
    </ContentPage.Resources>
    
    <StackLayout>
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />

        <Label
            Text="Text Number 1"
            HorizontalOptions="{StaticResource horzOptions}"
            VerticalOptions="{StaticResource vertiOptions}"
            TextColor="{StaticResource textColor}"
            FontSize="20"
            ></Label>

        <Label
            Text="Text Number 2"
            HorizontalOptions="{StaticResource horzOptions}"
            VerticalOptions="{StaticResource vertiOptions}"
            TextColor="{x:Static Colors.Red}"
            FontSize="20"
            ></Label>

        <Label
            Text="Text Number 3"
            HorizontalOptions="{StaticResource horzOptions}"
            VerticalOptions="{StaticResource vertiOptions}"
            TextColor="{x:Static local:StaticClass.TestColor}"
            FontSize="20"
            ></Label>

        <BoxView HorizontalOptions="{StaticResource horzOptions}"
                 VerticalOptions="CenterAndExpand"
                 WidthRequest="{x:Static local:StaticClass.width}"
                 HeightRequest="300"
                 Color="{x:Static local:StaticClass.TestColor}"
                 >
            
        </BoxView>
    </StackLayout>
</ContentPage>