XAML Islands についての公式ドキュメントの ラップされたコントロール というセクションで 6 つのコントロールが挙げられています。
ラップされたコントロール
- WebView
- WebViewCompatible
- InkCanvas
- InkToolbar
- MediaPlayerElement
- MapControl
これらのコントロールはこれまで使ってきた WindowsXamlHost コントロールを使わずに使用することができます。
■ デザイナ
デザイナ上でコントロールをポトペタできる、ことになっているようです。
※私の環境ではデザイナでは Visual Studio が固まってしまったり、デザイナが表示されなかったりなど動作に問題がありました。問題の発生条件等はまだ確認できていません。
■ コード
コードを見るのが手っ取り早いと思うのでコード例です。
namespace WindowsFormsApp1 { partial class Form1 { /// <summary> /// 必要なデザイナー変数です。 /// </summary> private System.ComponentModel.IContainer components = null; /// <summary> /// 使用中のリソースをすべてクリーンアップします。 /// </summary> /// <param name="disposing">マネージド リソースを破棄する場合は true を指定し、その他の場合は false を指定します。</param> protected override void Dispose(bool disposing) { if (disposing && (components != null)) { components.Dispose(); } base.Dispose(disposing); } #region Windows フォーム デザイナーで生成されたコード /// <summary> /// デザイナー サポートに必要なメソッドです。このメソッドの内容を /// コード エディターで変更しないでください。 /// </summary> private void InitializeComponent() { this.webView1 = new Microsoft.Toolkit.Forms.UI.Controls.WebView(); this.webViewCompatible1 = new Microsoft.Toolkit.Forms.UI.Controls.WebViewCompatible(); this.inkCanvas1 = new Microsoft.Toolkit.Forms.UI.Controls.InkCanvas(); this.inkToolbar1 = new Microsoft.Toolkit.Forms.UI.Controls.InkToolbar(); this.mapControl1 = new Microsoft.Toolkit.Forms.UI.Controls.MapControl(); this.mediaPlayerElement1 = new Microsoft.Toolkit.Forms.UI.Controls.MediaPlayerElement(); ((System.ComponentModel.ISupportInitialize)(this.webView1)).BeginInit(); this.SuspendLayout(); // // webView1 // this.webView1.Location = new System.Drawing.Point(55, 6); this.webView1.MinimumSize = new System.Drawing.Size(20, 20); this.webView1.Name = "webView1"; this.webView1.Size = new System.Drawing.Size(327, 57); this.webView1.Source = new System.Uri("https://rksoftware.hatenablog.com/", System.UriKind.Absolute); this.webView1.TabIndex = 0; // // webViewCompatible1 // this.webViewCompatible1.Location = new System.Drawing.Point(55, 68); this.webViewCompatible1.Name = "webViewCompatible1"; this.webViewCompatible1.Size = new System.Drawing.Size(327, 57); this.webViewCompatible1.TabIndex = 5; this.webViewCompatible1.Text = "webViewCompatible1"; this.webViewCompatible1.Source = new System.Uri("https://rksoftware.hatenablog.com/", System.UriKind.Absolute); // // inkCanvas1 // this.inkCanvas1.Location = new System.Drawing.Point(55, 131); this.inkCanvas1.Margin = new System.Windows.Forms.Padding(2, 2, 2, 2); this.inkCanvas1.Name = "inkCanvas1"; this.inkCanvas1.Size = new System.Drawing.Size(327, 57); this.inkCanvas1.TabIndex = 1; this.inkCanvas1.Text = "inkCanvas1"; this.inkCanvas1.InkPresenter.InputDeviceTypes = Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT.CoreInputDeviceTypes.Mouse | Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT.CoreInputDeviceTypes.Pen; // // inkToolbar1 // this.inkToolbar1.AutoSizeMode = System.Windows.Forms.AutoSizeMode.GrowOnly; this.inkToolbar1.Location = new System.Drawing.Point(55, 194); this.inkToolbar1.Margin = new System.Windows.Forms.Padding(2, 2, 2, 2); this.inkToolbar1.MinimumSize = new System.Drawing.Size(11, 34); this.inkToolbar1.Name = "inkToolbar1"; this.inkToolbar1.Size = new System.Drawing.Size(327, 57); this.inkToolbar1.TabIndex = 2; this.inkToolbar1.Text = "inkToolbar1"; // // mapControl1 // this.mapControl1.Location = new System.Drawing.Point(55, 257); this.mapControl1.Margin = new System.Windows.Forms.Padding(2, 2, 2, 2); this.mapControl1.Name = "mapControl1"; this.mapControl1.Size = new System.Drawing.Size(327, 114); this.mapControl1.TabIndex = 3; this.mapControl1.Text = "mapControl1"; // // mediaPlayerElement1 // this.mediaPlayerElement1.Location = new System.Drawing.Point(55, 377); this.mediaPlayerElement1.Margin = new System.Windows.Forms.Padding(2, 2, 2, 2); this.mediaPlayerElement1.MinimumSize = new System.Drawing.Size(55, 57); this.mediaPlayerElement1.Name = "mediaPlayerElement1"; this.mediaPlayerElement1.Size = new System.Drawing.Size(327, 157); this.mediaPlayerElement1.Source = "https://mediaplatstorage1.blob.core.windows.net/windows-universal-samples-media/e" + "lephantsdream-clip-h264_sd-aac_eng-aac_spa-aac_eng_commentary-srt_eng-srt_por-sr" + "t_swe.mkv"; this.mediaPlayerElement1.TabIndex = 4; this.mediaPlayerElement1.Text = "mediaPlayerElement1"; this.mediaPlayerElement1.AutoPlay = true; // // Form1 // this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 12F); this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font; this.ClientSize = new System.Drawing.Size(436, 557); this.Controls.Add(this.mediaPlayerElement1); this.Controls.Add(this.mapControl1); this.Controls.Add(this.inkToolbar1); this.Controls.Add(this.inkCanvas1); this.Controls.Add(this.webViewCompatible1); this.Controls.Add(this.webView1); this.Name = "Form1"; this.Text = "Form1"; ((System.ComponentModel.ISupportInitialize)(this.webView1)).EndInit(); this.ResumeLayout(false); } #endregion private Microsoft.Toolkit.Forms.UI.Controls.WebView webView1; private Microsoft.Toolkit.Forms.UI.Controls.WebViewCompatible webViewCompatible1; private Microsoft.Toolkit.Forms.UI.Controls.InkCanvas inkCanvas1; private Microsoft.Toolkit.Forms.UI.Controls.InkToolbar inkToolbar1; private Microsoft.Toolkit.Forms.UI.Controls.MapControl mapControl1; private Microsoft.Toolkit.Forms.UI.Controls.MediaPlayerElement mediaPlayerElement1; } }
実行結果
※MediaPlayerElement の Source は次のドキュメントの設定を使わせてもらいました。
https://docs.microsoft.com/en-us/windows/communitytoolkit/controls/wpf-winforms/mediaplayerelement
WindowsXamlHost コントロールを介さず直接コントロールを置けます、プロパティももしデザイナが動けばデザイナ上で設定できます。
ラップされたコントロール で書かれているコントロールはこの形式で使えるようになっているコントロールということで、最終的には一通りのコントロールをこの形で使えるようにする予定なのでしょう。
■ NuGet
前述のコントロール達を使うには次の NuGet パッケージをインストールします。
WebView
WebViewCompatible
Microsoft.Toolkit.Forms.UI.Controls.WebView
InkCanvas
InkToolbar
MediaPlayerElement
MapControl
Microsoft.Toolkit.Forms.UI.Controls
