.NET MAUI - XAML 마크업 확장 (mark-up extensions)

XAML 정의의 대부분은 컴파일 시간에 해결된다. 

그러나 때로는 속성 값을 런타임에 동적으로 설정해야 한다. 

이 값은 프로그램이 실행 중일 때만 알 수 있다. 

이러한 상황에서는 런타임에 XAML에 값을 제공할 개체를 만들 수 있다. 

XAML은 이를 위해 마크업 확장을 지원한다.

 

Mark-up extension

마크업확장은  XAML에서 런타임 값에 액세스하는 데 사용하는 클래스이다.

 

예를 들어 UI 에 여러 Label 이 있고 FontSize 속성을 일관되도록

앱 전체에서 동일한 값으로 설정하려고한다고 가정하자.

<Label Text="Hello, World!"
            Grid.Row="0"
            SemanticProperties.HeadingLevel="Level1"
            FontSize="28"
            HorizontalOptions="CenterAndExpand"/>

위와 같이 설정하고 모든 레이블에 반복해서 설정 할 수 있다.

하지만 나중에 값을 변경 하려면 문제가 생긴다. 

또는 장치방향, 화면 해상도 같은 것을 고려하여 runtime 에 계산될 수도 있다. 

이럴 경우 마크업 확정이 유용하다. 

 

namespace MyMauiApp;

public partial class MainPage : ContentPage
{
    public const double MyFontSize = 28;

    public MainPage()
    {
        InitializeComponent();
        ...
    }
    ...
}

public class GlobalFontSizeExtension : IMarkupExtension
{
    public object ProvideValue(IServiceProvider serviceProvider)
    {
        return MainPage.MyFontSize;
    }
}

 

적용

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mycode="clr-namespace:MyMauiApp"
             x:Class="MyMauiApp.MainPage">

<Label Text="Hello, World!"
            Grid.Row="0"
            SemanticProperties.HeadingLevel="Level1"
            FontSize="{mycode:GlobalFontSize}"
            HorizontalOptions="CenterAndExpand"/>

그러나 위와 같은 방식으로 사용하지는 않는다. 

.NET MAUI 는 이미 같은 형태의 StaticExtension 을 제공 하고 있다. 

[ContentProperty ("Member")]
public class StaticExtension : IMarkupExtension
{
    public string Member {get; set;}
    public object ProvideValue (IServiceProvider serviceProvider)
    {
        ...
    }
}

아래와 같이 사용하면 된다. 

<Label Text="Hello, World!"
            Grid.Row="0"
            SemanticProperties.HeadingLevel="Level1"
            FontSize="{x:Static Member=mycode:MainPage.MyFontSize}"
            HorizontalOptions="CenterAndExpand"/>

 

 

관련영상

https://youtu.be/g9MeGjuZQ2g