WindowsXamlHost:在 WPF 中使用 UWP 的控件(Windows Community Toolkit)

Windows Community Toolkit 再次更新到 5.0。以前可以在 WPF 中使用有限的 UWP 控件,而現在有了 WindowsXamlHost,則可以使用更多 UWP 原生控件了。


關於 Windows Community Toolkit 早期版本的 Xaml Bridge,可以參見:

安裝 NuGet 包

你需要做的第一步,是在你的 WPF 項目中安裝 Microsoft.Toolkit.Wpf.UI.XamlHost。建議直接在 項目的 NuGet 管理器中搜索並安裝。

安裝 Microsoft.Toolkit.Wpf.UI.XamlHost

安裝好 NuGet 包後查看引用

配置 WPF 項目能訪問 UWP 的類型

因爲我們即將開始使用到 UWP 中的控件類型,所以需要配置項目能夠訪問到 Windows Runtime 的類型。

添加引用
▲ 添加引用

你需要在你的 WPF 項目中添加以下 6 個引用才能訪問 UWP 的類型:

  • C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework.NETCore\v4.5
    • 引用 System.Runtime.WindowsRuntime
    • 引用 System.Runtime.WindowsRuntime.UI.Xaml
    • 引用 System.Runtime.InteropServices.WindowsRuntime
  • C:\Program Files (x86)\Windows Kits\10\UnionMetadata\Facade
    • 引用 Windows.winmd
  • C:\Program Files (x86)\Windows Kits\10\References\
    • 在此目錄下選擇你的 SDK 版本(如 16299,17763 等)
      • Windows.Foundation.UniversalApiContract\
        • 在此目錄下選擇你的 API 版本(如 4.0.0.0)
          • 引用 Windows.Foundation.UniversalApiContract.winmd
      • Windows.Foundation.FoundationContract
        • 在此目錄下選擇你的 API 版本(如 3.0.0.0)
          • 引用 Windows.Foundation.FoundationContract.winmd

在你添加完這些引用之後,還需要選中這些引用,右擊屬性,把所有的 “複製到本地” 選項設置爲 “否”。

不要複製到本地

添加 Windows Runtime 的 .NET Framework 類型引用
▲ 添加 Windows Runtime 的 .NET Framework 類型引用

添加 Windows.WinMD 的引用
▲ 添加 Windows.WinMD 的引用

在添加引用時注意選擇 SDK 的版本號
▲ 在添加引用時注意選擇 SDK 的版本號

添加 Windows.Foundation.UniversalApiContract.winmd
▲ 添加 Windows.Foundation.UniversalApiContract.winmd

添加 Windows.Foundation.FoundationContract.winmd
▲ 添加 Windows.Foundation.FoundationContract.winmd

開始在 WPF 中使用 UWP 的控件

你可以像使用普通 WPF 控件一樣將 WindowsXamlHost 添加到你的 WPF 界面中:

  • 拖拽到界面設計器中
  • 拖拽到 XAML 代碼行中
  • 直接在 XAML 代碼中寫

添加 WindowsXamlHost 控件
▲ 添加 WindowsXamlHost 控件

接着,指定 InitialTypeName 屬性爲 UWP 中的控件的名稱(帶命名空間)。這樣,當 WindowsXamlHost 初始化的時候,也會初始化一個 UWP 的控件。

這裏爲了簡單,我初始化一個 UWP 的按鈕。但必須得爲 UWP 的按鈕進行一些初始化,所以我監聽了 ChangedChanged 事件:

<XamlHost:WindowsXamlHost Grid.Column="1"
    InitialTypeName="Windows.UI.Xaml.Controls.Button"
    ChildChanged="WindowsXamlHost_ChildChanged" />
private void WindowsXamlHost_ChildChanged(object sender, EventArgs e)
{
    var host = (WindowsXamlHost) sender;
    var button = (Windows.UI.Xaml.Controls.Button) host.Child;
    button.Width = 120;
    button.Height = 40;
    button.Content = "walterlv.com";
    button.Click += UwpButton_Click;
}

private void UwpButton_Click(object sender, RoutedEventArgs e)
{
}

可以忽略的錯誤

在啓動的時候,你可能會遇到一些異常。比如下面這個:

沒有 Application

因爲我們不是原生的 UWP,而是 Host 在 WPF 中的 UWP 控件,所以會沒有 Application。這在 UWP 控件初始化內部已經 catch 了,所以你可以忽略。

最終效果

當將程序跑起來之後,你就能看到 WPF 窗口中的 UWP 控件了。

運行效果

值得注意的地方

  1. 目前 WindowsXamlHost 還不夠穩定,會出現一些閃退
    • 這點就需要爲 WindowsCommunityToolkit 貢獻 Issues 或代碼了
  2. Host 的 UWP 控件是一個新的 HwndSource,這相當於 UWP 的控件是通過子窗口的形式與 WPF 窗口放在一起的
    • 於是,只能指定一個矩形區域完全屬於 UWP,在這個區域 WPF 控件無法與其獲得交互或渲染疊加

關於 DPI 適配

爲了讓 UWP 控件能夠在 WPF 窗口中獲得正確的 Per-Monitor 的 DPI 適配效果,你需要設置爲 PerMonitorV2 的 DPI 感知級別。

在 PerMonitorV2 的 DPI 感知級別下,UWP 控件能夠正常獲得 DPI 縮放。

在 100% DPI 的屏幕下:

100% DPI 下

在 150% DPI 的屏幕下:

PerMonitorV2 感知級別 150% DPI 下

而如果只是指定爲 PerMonitor,那麼切換 DPI 或者切換屏幕的時候,只有 WPF 部分會縮放,而 UWP 部分不會變化。

PerMonitor 感知級別 150% DPI 下

關於 PerMonitorV2 和 PerMonitor 的理解和區別,可以參見:

關於如何在 WPF 下開啓 PerMonitorV2 級別的 DPI 感知可以參見:

更復雜的 UWP 控件嵌入

如果希望將更多的 WPF 窗口內的 UI 部分交給 UWP 來做,那麼就不能只是僅僅初始化一個 Button 就完了。

你需要引入一個 UWP 控件庫。閱讀以下文章瞭解更多:


參考資料

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章