博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
WindowsXamlHost:在 WPF 中使用 UWP 的控件(Windows Community Toolkit)
阅读量:5973 次
发布时间:2019-06-19

本文共 2688 字,大约阅读时间需要 8 分钟。

原文

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 事件:

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 控件库。阅读以下文章了解更多:


参考资料

本文会经常更新,请阅读原文:  ,以避免陈旧错误知识的误导,同时有更好的阅读体验。

转载地址:http://asbox.baihongyu.com/

你可能感兴趣的文章
AI切入养老大健康,漫谷科技发布“正钛” 健康服务机器人 ...
查看>>
Java Spring AOP的两种配置方式
查看>>
Magix中的缓存模块
查看>>
xinetd被动服务唤醒
查看>>
iView 3.4.1 发布,基于 Vue.js 的企业级 UI 组件库
查看>>
HoloLens获得新专利,可共享空间地图提升扫描建模效率
查看>>
让SAP云平台上的Web应用使用destination服务
查看>>
淘宝未来3年核心方向曝光!新的万亿级市场正在爆发
查看>>
有道词典命令行查询工具(Mac/Ubuntu)
查看>>
orm2 中文文档 3. 定义模型
查看>>
在业务过程中使用区块链和智能合约
查看>>
驾驶无人机也要考执照了,“黑飞”可能刑拘
查看>>
在虚拟现实中解谜,PSVR游戏《Statik》将于4月24日正式发售
查看>>
正数阶乘结尾0的个数
查看>>
SQL SERVER2008及以上版本数据库自动备份的三种方法
查看>>
秒杀于丹、蒋勋、蒙曼,每篇都有10万+的潜质。《六神磊磊读唐诗》,5星。
查看>>
利用日志记录所有LINQ的增,删,改解决方案
查看>>
实例讲解PostSharp(一)
查看>>
graylog 客户端的安装配置
查看>>
CentOS6.4_X86_64 安装Drupal-7.31必须成功版!
查看>>