本文来告诉大家如何在 WPF 应用 HOST 了 UWP 的 InkCanvas 控件时,给 InkCanvas 控件设置背景色,加上按钮等业务功能的实现方法
在上一篇博客有告诉大家如何在 WPF 里面使用上 UWP 的 InkCanvas 控件,详细请看 WPF 使用 Microsoft.Toolkit.Wpf.UI.Controls 的 InkCanvas 做高性能笔迹应用
如果不想要打包为 MSIX 包,请参阅 WPF 引用 UWP 控件 不打包为 MSIX 分发的方法
在开始之前,需要了解的是 UWP 的 InkCanvas 控件是没有背景色这个属性的,也就是说 UWP 的 InkCanvas 控件需要依靠外层的容器或者背后的元素给的颜色作为背景色。但是在 WPF 里面 HOST 了 UWP 的控件的方式,相当于将 UWP 作为一个窗口嵌入到 WPF 应用里面,这就意味着在 UWP 控件所在的范围,不能使用 WPF 的渲染,在此范围里面的元素都被 UWP 的控件挡住
因此为了给 UWP 的 InkCanvas 控件加上背景色,就需要采用在 WPF 里面 HOST 自定义的 UWP 控件的科技。这部分在官方博客有详细的说明,请参阅 Host a custom WinRT XAML control in a WPF app using XAML Islands - Windows apps
大概的做法就是新建两个 UWP 的项目,其中一个是 UWP 的空白应用项目,另一个是 UWP 的控件项目。让 UWP 的空白应用项目作为 UWP 执行入口,用于提供运行的支持。让 UWP 的控件项目作为实际的 UWP 自定义控件编写的项目,咱将在 UWP 的控件项目里面完成所有的自定义逻辑
如何创建项目和如何组织,还请参阅 官方文档 本文这里就不多说了
回到如何给 UWP 的 InkCanvas 控件添加背景色的方法上,在新建的 UWP 控件项目里面,添加一个自定义的控件,如 CustomInkControl.xaml 控件
在这个控件里面的 XAML 添加如下代码
<UserControl
x:Class="HinembereneabemWhejurnicelem.XamlIsland.CustomInkControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HinembereneabemWhejurnicelem.XamlIsland"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid Background="LightCoral">
<InkCanvas x:Name="InkCanvas" Loaded="InkCanvas_OnLoaded"></InkCanvas>
</Grid>
</UserControl>
为了能在鼠标下进行绘制,在 InkCanvas_OnLoaded
设置支持鼠标
private void InkCanvas_OnLoaded(object sender, RoutedEventArgs e)
{
InkCanvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse| CoreInputDeviceTypes.Touch;
}
接着如 官方文档 的方法,在 WPF 里面使用刚才创建的控件
<Window x:Class="LaykearduchuNachairgurharhear.MainWindow"
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:local="clr-namespace:LaykearduchuNachairgurharhear"
xmlns:controls="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls"
xmlns:xaml="clr-namespace:Microsoft.Toolkit.Wpf.UI.XamlHost;assembly=Microsoft.Toolkit.Wpf.UI.XamlHost"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid Background="Gray">
<xaml:WindowsXamlHost InitialTypeName="HinembereneabemWhejurnicelem.XamlIsland.CustomInkControl" ChildChanged="WindowsXamlHost_ChildChanged" />
</Grid>
</Window>
很简单的代码即可完成
可以通过如下方式获取本文的源代码,先创建一个空文件夹,接着使用命令行 cd 命令进入此空文件夹,在命令行里面输入以下代码,即可获取到本文的代码
git init
git remote add origin https://gitee.com/lindexi/lindexi_gd.git
git pull origin b2aa15343108fa5619bd2605c28085eb3cd6023d
以上使用的是 gitee 的源,如果 gitee 不能访问,请替换为 github 的源
git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git
获取代码之后,进入 LaykearduchuNachairgurharhear 文件夹
更多触摸请看 WPF 触摸相关 更多笔迹相关请看
本文会经常更新,请阅读原文: https://blog.lindexi.com/post/WPF-%E4%BD%BF%E7%94%A8-Microsoft.Toolkit.Wpf.UI.Controls-%E7%9A%84-InkCanvas-%E6%97%B6%E5%8A%A0%E4%B8%8A%E8%83%8C%E6%99%AF%E8%89%B2%E5%92%8C%E6%8C%89%E9%92%AE%E6%96%B9%E6%B3%95.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。
如果你想持续阅读我的最新博客,请点击 RSS 订阅,推荐使用RSS Stalker订阅博客,或者前往 CSDN 关注我的主页
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名林德熙(包含链接: https://blog.lindexi.com ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请 与我联系 。
无盈利,不卖课,做纯粹的技术博客