WPF 使用 Microsoft.Toolkit.Wpf.UI.Controls 的 InkCanvas 时加上背景色和按钮方法

Posted 2022-04-15 lindexi_gd

本文来告诉大家如何在 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>

很简单的代码即可完成

以上的代码放在 github 和 gitee 欢迎访问

可以通过如下方式获取本文的源代码，先创建一个空文件夹，接着使用命令行 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 触摸相关 更多笔迹相关请看

• WPF 渲染原理
• 高性能笔迹原理
• WPF 高性能笔
• WPF 高速书写 StylusPlugIn 原理
• WPF 最小的代码使用 DynamicRenderer 书写
• WPF 使用 Composition API 做高性能渲染
• WPF 使用 Win2d 渲染
• win10 uwp win2d CanvasVirtualControl 与 CanvasAnimatedControl
• WPF 最简逻辑实现多指顺滑的笔迹书写
• WPF 笔迹触摸点收集工具
• WPF 实现自定义的笔迹橡皮擦

我搭建了自己的博客 https://blog.lindexi.com/ 欢迎大家访问，里面有很多新的博客。只有在我看到博客写成熟之后才会放在csdn或博客园，但是一旦发布了就不再更新

如果在博客看到有任何不懂的，欢迎交流，我搭建了 dotnet 职业技术学院 欢迎大家加入

如有不方便在博客评论的问题，可以加我 QQ 2844808902 交流

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名林德熙(包含链接:http://blog.csdn.net/lindexi_gd )，不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系。