rksoftware

Visual Studio とか C# とかが好きです

XAML Islands の Windows Community Toolkit でラップされたコントロール (WPF編)

XAML Islands についての公式ドキュメントの ラップされたコントロール というセクションで 6 つのコントロールが挙げられています。

ラップされたコントロール

  • WebView
  • WebViewCompatible
  • InkCanvas
  • InkToolbar
  • MediaPlayerElement
  • MapControl

これらのコントロールはこれまで使ってきた WindowsXamlHost コントロールを使わずに使用することができます。

■ コード

コードを見るのが手っ取り早いと思うのでコード例です。

<Window x:Class="WpfApp1.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:xamlhostwebview="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView"
        xmlns:xamlhostcontrols="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="Window2" Height="600" Width="800">
    <StackPanel Background="AliceBlue">
        <xamlhostwebview:WebView Height="100" Width="600" Margin="1" Source="https://rksoftware.hatenablog.com/"/>
        <xamlhostcontrols:InkCanvas Height="100" Width="600" Margin="1" x:Name="inkCanvas"/>
        <xamlhostcontrols:InkToolbar Height="100" Width="600" Margin="1"/>
        <xamlhostcontrols:MapControl Height="100" Width="600" Margin="1"/>
        <xamlhostcontrols:MediaPlayerElement Height="100" Width="600" Margin="1"
                                             Source="https://mediaplatstorage1.blob.core.windows.net/windows-universal-samples-media/elephantsdream-clip-h264_sd-aac_eng-aac_spa-aac_eng_commentary-srt_eng-srt_por-srt_swe.mkv"
                                             AutoPlay="True" 
                                             />
    </StackPanel>
</Window>
using System.Windows;

namespace WpfApp1
{
    public partial class Window2 : Window
    {
        public Window2()
        {
            InitializeComponent();

            inkCanvas.InkPresenter.InputDeviceTypes =
                Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT.CoreInputDeviceTypes.Mouse
                | Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT.CoreInputDeviceTypes.Pen;
        }
    }
}

実行結果

f:id:rksoftware:20190121014701j:plain

※MediaPlayerElement の Source は次のドキュメントの設定を使わせてもらいました。
https://docs.microsoft.com/en-us/windows/communitytoolkit/controls/wpf-winforms/mediaplayerelement

WindowsXamlHost コントロールを介さず直接 XAML にコントロールを書けますし、プロパティも XAML で設定できます。ラップされたコントロール で書かれているコントロールはこの形式で使えるようになっているコントロールということで、最終的には一通りのコントロールをこの形で使えるようにする予定なのでしょう。

■ NuGet

前述のコントロール達を使うには次の NuGet パッケージをインストールします。

  • WebView
  • WebViewCompatible
Microsoft.Toolkit.Wpf.UI.Controls.WebView
  • InkCanvas
  • InkToolbar
  • MediaPlayerElement
  • MapControl
Microsoft.Toolkit.Wpf.UI.Controls

オブジェクトブラウザで見るとこんな感じです。
f:id:rksoftware:20190121014731j:plain

■ DPI 関係の問題

ただし、High DPI 環境で未サポートの事項があるので WPF で使う場合には、 WindowsXamlHost コントロールを使って回避するのも今の段階では一つの道かもしれません。