Xaml Islandを使用して、UWPのImageコントロールにSVG画像を表示したい

Question

前提・実現したいこと

WPFアプリでXaml Islandを使用して
UWPのImageコントロールにSVG画像を表示したい。

環境：WPF,.NETCore3.0

発生している問題・エラーメッセージ

エラーはありませんが、SVG画像が表示されない。

該当のソースコード

<Window x:Class="XamlIslandsTest.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:xamlhost="clr-namespace:Microsoft.Toolkit.Wpf.UI.XamlHost;assembly=Microsoft.Toolkit.Wpf.UI.XamlHost"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{Binding Title}" Height="350" Width="525" >
    <Grid>
        <xamlhost:WindowsXamlHost InitialTypeName="Windows.UI.Xaml.Controls.Image" x:Name="Image" ChildChanged="Image_ChildChanged"/>
    </Grid>
</Window>

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Image_ChildChanged(object sender, System.EventArgs e)
        {
            WindowsXamlHost windowsXamlHost = (WindowsXamlHost)sender;
            Windows.UI.Xaml.Controls.Image image =
                (Windows.UI.Xaml.Controls.Image)windowsXamlHost.Child;
            if(image != null)
            {
                var fileUri = "ms-appx:///Assets/windows.svg";
                SvgImageSource svgImage = new SvgImageSource(new Uri(fileUri));
                image.Source = svgImage;
            }
        }
    }

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>windows [#174]</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Dribbble-Dark-Preview" transform="translate(-60.000000, -7439.000000)" fill="#18FF94">
            <g id="icons" transform="translate(56.000000, 160.000000)">
                <path d="M13.1458647,7289.43426 C13.1508772,7291.43316 13.1568922,7294.82929 13.1619048,7297.46884 C16.7759398,7297.95757 20.3899749,7298.4613 23.997995,7299 C23.997995,7295.84873 24.002005,7292.71146 23.997995,7289.71311 C20.3809524,7289.71311 16.7649123,7289.43426 13.1458647,7289.43426 M4,7289.43526 L4,7296.22153 C6.72581454,7296.58933 9.45162907,7296.94113 12.1724311,7297.34291 C12.1774436,7294.71736 12.1704261,7292.0908 12.1704261,7289.46524 C9.44661654,7289.47024 6.72380952,7289.42627 4,7289.43526 M4,7281.84344 L4,7288.61071 C6.72581454,7288.61771 9.45162907,7288.57673 12.1774436,7288.57973 C12.1754386,7285.96017 12.1754386,7283.34361 12.1724311,7280.72405 C9.44461153,7281.06486 6.71679198,7281.42567 4,7281.84344 M24,7288.47179 C20.3879699,7288.48578 16.7759398,7288.54075 13.1619048,7288.55175 C13.1598997,7285.88921 13.1598997,7283.22967 13.1619048,7280.56914 C16.7689223,7280.01844 20.3839599,7279.50072 23.997995,7279 C24,7282.15826 23.997995,7285.31353 24,7288.47179" id="windows-[#174]"></path>
            </g>
        </g>
    </g>
</svg>

試したこと

UWPで上記svgは正常に表示できました。

<Page
    x:Class="UwpApp1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UwpApp1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid Margin="10,50,10,10" >
        <Image Name="image" Height="20"/>
    </Grid>
</Page>

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            this.Loaded += (s, e) =>
            {
                var fileUri = "ms-appx:///Assets/windows.svg";
                SvgImageSource svgImage = new SvgImageSource(new Uri(fileUri));
                image.Source = svgImage;

            };
        }
    }

Answer 1

仕様のようです。

デスクトップ アプリで WinRT XAML コントロールをホストする | Microsoft Docs

現在、XAML Island では、ホストされた Windows.UI.Xaml.Controls.Image コントロール内、または Windows.UI.Xaml.Media.Imaging.SvgImageSource オブジェクトを使用した SVG ファイルの表示はサポートされていません。

---

WinUI 3で試したところ表示できました。
まだPreviewですが、試してみるのもいいかと思います。
デスクトップ アプリ用の WinUI 3 の概要 | Microsoft Docs

Comments

[Y...M]

ありがとうございます。

WinUI 3についてですが、これは現時点でWPF、.NETCore3.0で表示することは出来ないでしょうか？

[TN8001]

WinUI 3は私自身先月試したときはうまくいかず、今回試したらなぜかできてしまったという程度ですので、まだ全然わかっていません^^;

TargetFrameworkがnet5.0-windows10.0.18362のような形式になりますので、単純にnetcoreapp3.0にしただけでは動きません。
おそらく何か方法はある（もしくは今後できるようにする？）とは思いますが、ちょっと私はわかりません。

そもそもTextBoxに日本語入力できないといった状況なので、まだ実用段階にはありません^^;

[Y...M]

重ねて回答ありがとうございます。
＞まだ実用段階にはありません^^;
私ももう少し調べてみましたが、おっしゃる通りですね。
使えるかもしれないが実用は当分先になりそうですね。
WPFでSVGを表示するためには、SharpVectorのようなOSSを使用するか検討してみます。