[WinUI 3] PathIcon 적용을 좀 더 쉽게

👨‍🏫 튜토리얼, 팁, 강좌
1

WinUI(UWP 동일)은 Icon을 표시하는 방법으로 SymbolIcon, FontIcon, PathIcon, BitmapIcon을 제공합니다. 그런데 이를 사용하려면 XAML 표현으로 조금 번거로움이 있습니다.

<AppBarButton Command="{x:Bind ViewModel.MenuCommand}" IsCompact="True" MaxWidth="32">
   <AppBarButton.Icon>
      <PathIcon Data="{StaticResource PathEntity}" />
    </AppBarButton.Icon>
...

이것을 바로 Icon="{StaticResource IconEntity}"으로 주면 참 좋은데요, 불가능합니다
이유는 PathIcon(다른 아이콘 형태도 동일)은 FrameworkElement 이므로 공유될 수 없는게 이유인데요, IconSource를 이용하면 IconSource는 FrameworkElement가 아니므로 가능해 집니다.

이를 이용해 편하게 사용하기 위해 다음처럼 MarkupExtension으로 만들어 줄 수 있습니다.

public class PathIconExtension : MarkupExtension
{
    public PathIconSource? IconSource { get; set; }

    protected override object ProvideValue() => IconSource?.CreateIconElement()!;
}

<AppBarButton Command="{x:Bind ViewModel.MenuCommand}" IsCompact="True" MaxWidth="32" Icon="{ext:PathIcon IconSource={StaticResource IconEntity}}">
...

※ 그런데 한가지 문제가 있습니다. 이것은 아직 해결하지 못했는데요, 테마가 제대로 적용되지 않습니다.

| App.xaml

<PathIconSource x:Key="IconEntity" Data="M 21 25 V 0 H 20 V 24 H 1 V 1 H 20 V 0 H 0 V 25 H 21 M 1 10 H 20 V 11 H 1 V 10" Foreground="White" />

이를 해결하려면 강제로 Foreground에 색을 지정해야 하는데, 테마에 맞게 변경되는 방법을 찾으면 다시 공유 하겠습니다 ^^