5

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

 3 years ago
source link: https://lindexi.gitee.io/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
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
WPF 使用 Microsoft.Toolkit.Wpf.UI.Controls 的 InkCanvas 时加上背景色和按钮方法

本文来告诉大家如何在 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 触摸相关 更多笔迹相关请看

本文会经常更新，请阅读原文： 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 ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请 与我联系 。

无盈利，不卖课，做纯粹的技术博客

以下是广告时间

推荐关注 Edi.Wang 的公众号
lindexi%2F201985113622445

欢迎进入 Eleven 老师组建的 .NET 社区
lindexi%2F20209121930471745.jpg

以上广告全是友情推广，无盈利


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK