首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在UWP中实现InkCanvas和Canvas之间的切换

在UWP中实现InkCanvas和Canvas之间的切换可以通过以下步骤完成:

  1. 创建一个UWP应用程序,并在XAML文件中添加一个InkCanvas和一个Canvas控件。
代码语言:txt
复制
<Grid>
    <InkCanvas x:Name="inkCanvas" />
    <Canvas x:Name="canvas" Visibility="Collapsed" />
</Grid>
  1. 在代码中,使用事件处理程序或命令来处理切换操作。
代码语言:txt
复制
private void SwitchButton_Click(object sender, RoutedEventArgs e)
{
    if (inkCanvas.Visibility == Visibility.Visible)
    {
        // 切换到Canvas
        inkCanvas.Visibility = Visibility.Collapsed;
        canvas.Visibility = Visibility.Visible;
    }
    else
    {
        // 切换到InkCanvas
        canvas.Visibility = Visibility.Collapsed;
        inkCanvas.Visibility = Visibility.Visible;
    }
}
  1. 在切换时,你可以根据需要保存或加载InkCanvas的绘图数据。
代码语言:txt
复制
private void SwitchButton_Click(object sender, RoutedEventArgs e)
{
    if (inkCanvas.Visibility == Visibility.Visible)
    {
        // 保存InkCanvas的绘图数据
        var inkData = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
        // 切换到Canvas
        inkCanvas.Visibility = Visibility.Collapsed;
        canvas.Visibility = Visibility.Visible;
        // 在Canvas中加载绘图数据
        foreach (var stroke in inkData)
        {
            // 将stroke添加到canvas中
            canvas.Children.Add(stroke);
        }
    }
    else
    {
        // 在Canvas中保存绘图数据
        var inkData = new List<InkStroke>();
        foreach (var child in canvas.Children)
        {
            if (child is InkStroke stroke)
            {
                inkData.Add(stroke);
            }
        }
        // 清空Canvas
        canvas.Children.Clear();
        // 切换到InkCanvas
        canvas.Visibility = Visibility.Collapsed;
        inkCanvas.Visibility = Visibility.Visible;
        // 在InkCanvas中加载绘图数据
        inkCanvas.InkPresenter.StrokeContainer.AddStrokes(inkData);
    }
}

这样,你就可以通过点击一个按钮或其他交互方式,在InkCanvas和Canvas之间进行切换。在切换时,你可以根据需要保存或加载绘图数据。请注意,这只是一个简单的示例,你可以根据实际需求进行修改和扩展。

关于UWP开发和InkCanvas的更多信息,你可以参考腾讯云的官方文档:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

win10 uwp 通过 win2d 画出笔迹 界面笔迹性能原理完全控制墨迹多指输入转换笔迹无限漫游

本文告诉大家如何在 UWP 上让 win2d 画出笔迹,通过实际测试发现在 UWP 的笔迹的性能比在 WPF 高很多。...通过测试使用 Pointer 和 InkCanvas 的性能相差在我的设备是 16 ms 左右,需要知道,笔迹的书写过程,相差 16 ms 是一个很大的值。...如果 InkCanvas 只是更快收到触摸消息,那么也无法做到像现在这么快的速度。尝试写一个空白的 UWP 程序,在里面添加笔迹控件,在移动的过程中,进入断点,这时你还可以继续在 UWP 应用上画。...也就是 InkCanvas 的书写和 UWP 的主线程是分开的 在 UWP 的笔迹渲染是分为三个过程,第一个过程是跟随,也就是将当前的点和上一个点直接连出一条线。...而从湿到干就是动态转静态的笔迹。将笔迹转为静态就可以让笔迹变为一个界面元素,参与界面的变化,如选择和层级这些业务。

1.1K20

win10 uwp 通过 Win2d 完全控制笔迹绘制逻辑

包括在书写过程中切换模式,如进行手势擦除切换为橡皮擦模式 本文提供的方法适合用来做复杂的自定义,本文的方法的优点也是缺点。优点是啥都可以自己控制,缺点是啥都需要自己控制。...需要自己处理笔迹的多笔同步问题,处理笔迹的长笔迹分段问题,处理笔迹的绘制问题,处理动态笔迹切换 本文提供的方法依然可以实现非常高性能的笔迹,比 WPF 最快的笔迹实现还要快,但需要自己处理好各个部分的逻辑...,如动态笔迹和静态笔迹,笔迹分段等逻辑。...本文提供的方法的性能依然不如只使用默认的 InkCanvas 快 界面 在开始之前,请先安装 Win2d 库,可参阅 win10 uwp win2d 入门 看这一篇就够了 博客了解如何安装 在 XAML...的 PointerMoved 事件,事实上需要监听更多的事件用来了解笔迹的绘制开始和完成逻辑。

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

    本文来告诉大家如何在 WPF 应用 HOST 了 UWP 的 InkCanvas 控件时,给 InkCanvas 控件设置背景色,加上按钮等业务功能的实现方法 在上一篇博客有告诉大家如何在 WPF 里面使用上...包,请参阅 WPF 引用 UWP 控件 不打包为 MSIX 分发的方法 在开始之前,需要了解的是 UWP 的 InkCanvas 控件是没有背景色这个属性的,也就是说 UWP 的 InkCanvas 控件需要依靠外层的容器或者背后的元素给的颜色作为背景色...UWP 的控件挡住 因此为了给 UWP 的 InkCanvas 控件加上背景色,就需要采用在 WPF 里面 HOST 自定义的 UWP 控件的科技。...让 UWP 的控件项目作为实际的 UWP 自定义控件编写的项目,咱将在 UWP 的控件项目里面完成所有的自定义逻辑 如何创建项目和如何组织,还请参阅 官方文档 本文这里就不多说了 回到如何给 UWP 的...InkCanvas 控件添加背景色的方法上,在新建的 UWP 控件项目里面,添加一个自定义的控件,如 CustomInkControl.xaml 控件 在这个控件里面的 XAML 添加如下代码 <UserControl

    2.2K20

    win10 uwp 使用油墨输入 保存,修改,加载inkUWP 手写清理笔画手写识别无法识别手写语音

    现在很多人还是使用笔和纸来记录,那么可以在电脑输入方式和之前使用的方式一样,很多用户觉得会方便。在win10 我们有一个简单的方法去让用户输入,InkCanvas。...现在edge,OneNote这些都有使用InkCanvas,我们可以在我们的手机上手写,我们也可以在我们电脑上用鼠标写,然后我们可以把我们写的保存图片,可以识别文字。...-10-by-10/ 一些内容是参见陈染大神 做法简单,我们有垃圾微软的InkCanvas ,这个控件可以手写,需要我们在页面使用他: InkCanvas x:Name="ink_canvas...下面的不是我写的,是垃圾微软的。 InkPresenter可以获取 InkCanvas 基础对象,可以设置输入为笔,触摸,鼠标,上面那个是从微软拿来,因为我是在用电脑。...如果我们需要输入笔和鼠标 ink_canvas.InkPresenter.InputDeviceTypes= CoreInputDeviceTypes.Mouse|CoreInputDeviceTypes.Pen

    1.5K10

    win10 uwp 使用油墨输入

    现在很多人还是使用笔和纸来记录,那么可以在电脑输入方式和之前使用的方式一样,很多用户觉得会方便。在win10 我们有一个简单的方法去让用户输入,InkCanvas。...现在edge,OneNote这些都有使用InkCanvas,我们可以在我们的手机上手写,我们也可以在我们电脑上用鼠标写,然后我们可以把我们写的保存图片,可以识别文字。...-10-by-10/ 一些内容是参见陈染大神 做法简单,我们有垃圾微软的InkCanvas ,这个控件可以手写,需要我们在页面使用他: InkCanvas x:Name="ink_canvas...下面的不是我写的,是垃圾微软的。 InkPresenter可以获取 InkCanvas 基础对象,可以设置输入为笔,触摸,鼠标,上面那个是从微软拿来,因为我是在用电脑。...= CoreInputDeviceTypes.Mouse; } 如果我们需要输入笔和鼠标 ink_canvas.InkPresenter.InputDeviceTypes= CoreInputDeviceTypes.Mouse

    44410

    如何在Anaconda的python和系统自带的python之间切换

    我们知道,Ubantu系统会自带python,当你在terminal窗口中输入python,就会显示默认安装的python的信息。...比如我的16.04就自带了python2.7和3.5,但是安装了Anaconda之后,再输入python就变成了Anaconda带的了: ? 那么如何切换回系统自带的python呢? 如图所示: ?...我指定目录 /usr/bin/下的python和python3就是系统自带的 也就是输入 /usr/bin/python 或者是 /usr/bin/python3 让我们来分析一下这是个什么原理:当你输入...红线的环境变量是我在安装Anaconda时添加的,后添加的环境变量顺序排在前面,所以系统搜寻python这个命令时首先去红线那个路径寻找,然后的确就找到了嘛,就是调用的Anaconda的python咯。...而之前我没有安装Anaconda,就没有红色的那个环境变量,就会去后面每个路径里面找,然后由于系统自带的python是安装在路径/usr/bin/下的,也就是黄线位置,就能在那里面找到咯。

    4.1K10

    WPF 实现自定义的笔迹橡皮擦

    阅读本文,你将了解如何自定义橡皮擦,如自定义橡皮擦的外观样式,了解如何不依赖 InkCanvas 来实现笔迹的擦除 原本我是想采用 WPF 最简逻辑实现多指顺滑的笔迹书写 的方式来做笔迹的绘制部分的,但是考虑使用上面博客的方法将会让大家需要多了解很多触摸相关的知识...以下只是将 InkCanvas 作为笔迹的绘制,而橡皮擦部分是咱定制的 在 XAML 中添加一个 InkCanvas 的代码很简单,请看代码 InkCanvas x:Name="InkCanvas...因为这个 Canvas 容器在 InkCanvas 的上方,因此自定义的橡皮擦界面也将会在 InkCanvas 上 在界面里面放一个 Canvas 和一个用 Rectangle 表示的自定义外观的橡皮擦...我就怕你抄代码的时候,用的容器和用的控件默认不是在左上角的 在上面代码中,咱默认的 EraserCanvas 是不可见的,而且背景色是透明的。...如果你需要支持自定义形状的橡皮擦,如三角形等,就需要自己用更底层的方式去实现了,也不在本文范围之内 在获取到 IncrementalStrokeHitTester 工具之后,需要监听他的 StrokeHit

    94420

    win10 uwp 笔迹书写预测 墨迹书写加速

    在 UWP 的 InkCanvas 里自带了预测书写轨迹的功能,开启此功能可以进行书写预测,从而减少书写延迟。...本文将告诉大家如何在 UWP 的 InkCanvas 里开启笔迹书写预测功 在 UWP 的 InkCanvas 里开启笔迹书写预测功能只需要设置 InkModelerAttributes 的 PredictionTime...印象中在 10240 的文档里面,是有一个使用 Inertia 惯性预测算法的笔迹书写预测的,但是我现在还没找到文档 设置 InkModelerAttributes 的 PredictionTime 属性需要先获取到...这个技术在许多 UWP 应用上,例如 OneNote UWP 等都是默认开启的 但是毕竟是预测的,肯定存在纠错时候,这时将会发现笔迹的笔尖抖动。...也就是开启笔迹预测功能,能够降低延迟,但是可能在预测和实际触摸点不符合时笔尖会变更 详细请参阅 InkModelerAttributes.PredictionTime - Windows UWP applications

    83920

    UWP 手绘视频创作工具技术分享系列 - Ink & Surface Dial

    本篇作为技术分享系列的第四篇,详细讲一下手绘视频中 Surface Pen 和 Surface Dial 的使用场景。 ...,比如切换笔的颜色、粗细、放大缩小画布等,另外 Dial 会默认附加一些系统级别的快捷功能,如音量调节,界面滚动等。...对 Surface Pen 和 Surface Dial 有一个初步的认识后,我们就开始正式讲一下它们在 UWP 手绘视频创作工具中的应用。...定义了这些属性后,在 InkCanvas 中书写时,笔尖结合方向,决定了不同方向笔画的形状和不同的粗细,笔尖的填充,决定了在反复涂画时,是否有颜色加深处理。 ?...Ink 和 Dial 的介绍就到这里,我们更多的介绍它的应用场景,具体的实现代码大家可以去微软官方查看文档,实现过程相对简单,不做赘述了,谢谢!

    1.1K120

    Windows Community Toolkit 3.0 - InfiniteCanvas

    这是一个非常实用的控件,在“来画视频” UWP 应用的绘画功能中,也用到了这个控件,它对不同画笔的选择,橡皮擦,直尺和圆形尺,文字输入和字体选择等都提供了很便捷的支持,而且支持导入和导出数据,可以很方便的创作绘画作品...其中 InfiniteCanvas.cs 这个类中主要是实现 OnApplyTemplate(),DependencyProperty 处理,控件的定义,事件注册,Canvas 的基础事件处理等,InfiniteCanvas...中实现了一个 InkCanvas 所以可以实现各种笔触的笔迹绘制; InfiniteCanvas.Events.cs 主要是 Canvas 中的各种按钮点击等事件处理; InfiniteCanvas.TextBox.cs...主要是 Canvas 中 TextBox 控件对应的控件定义和事件处理; 调用示例 InfiniteCanvas 控件的调用非常简单,下面看看 XAML 中的调用: 的源代码实现过程讲解完成了,希望能对大家更好的理解和使用这个功能有所帮助。

    56730

    Microsoft Tech Summit 2018 课程简述:利用 Windows 新特性开发出更好的手绘视频应用

    Ink 手绘     Ink 手绘在手绘视频中有很多应用场景,如绘图手绘,手写文字手绘,有丰富的笔触类型支持,如铅笔的墨粉效果,钢笔的笔触方向和粗细,荧光笔的混色效果等动画展示。    ...,这些按钮可激活关联 InkCanvas 中与墨迹相关的功能。...Ink 结合手绘     Ink 和手绘视频的结合,主要有以下几种方式:利用 InkCanvas 和 InkToolbar 实现 Ink 的获取和存储;自定义圆形菜单,实现 Ink 的选择,设置和绘制数据获取...而 Windows ML 可以实现模型本地化,可以把 Autodraw 训练的模型集成在 UWP 应用中,减少网络传输时间,降低服务器负载,本地实现计算过程。 7....,这些按钮可激活关联 InkCanvas 中与墨迹相关的功总结

    1.2K30

    WPF 尝试使用 WinML 做一个简单的手写数字识别应用

    版本之间的关系图如下,详细请看 Windows 10 version history - Wikipedia 接下来下载大佬训练好的 mnist.onnx 模型文件,下载地址是 https://github.com.../microsoft/Windows-Machine-Learning/raw/master/Samples/MNIST/UWP/cs/Assets/mnist.onnx 我在本文末尾的代码仓库里面也包含了此文件...byte 数组长度之间的关系。...,大家可以了解如何在 WPF 应用里面,通过 WinRT 的方式对接 WinML 层。...以及如何加载大佬们训练好的 onnx 模型,和如何执行模型 如果对此演示项目的代码感兴趣,可以通过下面方式获取到本文的所有代码 本文代码放在github 和 gitee 欢迎访问 可以通过如下方式获取本文以上的源代码

    49410

    WPF 引用 UWP 控件 不打包为 MSIX 分发的方法

    按照微软的官方文档,大部分的文档都会说如果用了 XAML Islands 等技术的时候,需要新建一个打包项目,将 WPF 应用打包为 msix 等才可以进行分发和使用。...但是实际上不打包也可以,此时可以和此前的 Win32 应用一样的分发方式进行分发,可以支持到 Win7 系统,当然了在 Win7 系统上可用不了 UWP 的控件,但是至少应用软件自身可以在 Win7 继续运行的...可以通过判断系统版本决定功能是否开放,如是 Win10 版本,那么开放 UWP 控件部分的使用 如果新建一个空的 .NET Core 3.1 的 WPF 项目,然后只是安装了必要的 NuGet 包之后,...就在 XAML 界面里面添加了 UWP 的控件,如笔迹控件。...的 InkCanvas 做高性能笔迹应用 WPF 使用 Microsoft.Toolkit.Wpf.UI.Controls 的 InkCanvas 时加上背景色和按钮方法

    75750

    su和sudo之间的区别以及如何在Linux中配置sudo

    在Linux中实现安全性的一种方式是用户管理策略,用户权限和普通用户无权执行任何系统操作。 如果普通用户需要执行任何系统更改,则需要使用' su '或' sudo '命令。...注 - 本文更适用于基于Ubuntu的发行版,但也适用于大多数流行的Linux发行版。...为了实现上述情况,我们可以将'sudo'写为: mark beta.database_server.com=(cat) dog Q4。如果用户需要被授予几个命令会怎么样?...如果用户应该运行的命令的数量在10以下,我们可以将所有命令放在一起,它们之间有空格,如下所示: mark beta.database_server.com=(cat) /usr/bin/command1...如何在不输入密码的情况下执行' sudo '命令? 我们可以通过使用' NOPASSWD '标志来输入' sudo '命令而不用输入密码。

    2K60

    UWP 手绘视频创作工具技术分享系列

    在实现了旧版 “来画” 所有工具功能的基础上,我们实现了更多的 Ink 画笔和 Dial 功能,更好的 SVG 解析和绘制,更好的文字绘制过程,视频和 gif 图的插入等等。...Runtime App 中, 编程语言可以是 C++、C# 或 VB,相信在 UWP 中尝试过图形渲染绘制的同学们,对 Win2D 都不会陌生,毕竟我我软推荐的实现方式。...微软的 Windows SDK 里提供了很棒的 InkToolbar 和 InkCanvas,可以默认支持几种画笔的展现,如圆珠笔、钢笔、铅笔、荧光笔等。...下面是 InkToolbar 和 InkCanvas 的一张示意图和应用中使用 Surface Dial 的操作图(来自 IT之家的报道): ? ? 6....今天的文章先概括的介绍一下每个部分的实现原理,后面会陆续对每一个部分做详细的讲解,尤其是 SVG 和 文字绘制方面,详细的原理和实现,以及开发过程中遇到的各种问题,或自己的,或微软系统的。

    1.3K110

    WPF中Canvas和InkCanvas

    前言 WPF中绘图有两种方式Canvas和InkCanvas Canvas需要完全由自己实现。 InkCanvas已经默认为我们实现了基本的绘制,同时效果也比较好。...InkCanvas 推荐使用InkCanvas,使用它绘制线的时候会自动优化转折的地方,会变得平滑。 InkCanvas本身已经支持使用鼠标或者触屏来画线,下面的示例是使用代码进行画线。...的Strokes集合中 BlackboardCanvas.Strokes.Add(stroke); } 我们也可以在Stroke中添加新的点 stroke.StylusPoints.Add(new...事件无法正常工作,因为它是由InkCanvas处理的,并且没有被冒泡。...推荐 建议使用使用AddHandler,因为PreviewMouseUp实际是在事件执行之前触发,本来我们要在这个事件中要保存已绘制的笔迹,但是实际上会少了最后的一笔,因为最后一笔的绘制还没执行。

    1.3K20

    win10 uwp 在笔迹开始书写拿到书写移动事件

    在使用 InkCanvas 的过程,无法直接通过 Pointer 消息拿到书写移动,需要使用 StrokeInput 才能获取到 在 InkCanvas.InkPresenter.StrokeInput...作为例子,先在 XAML 界面放一个 InkCanvas 控件,同时修改他的属性名是 InkCanvas 在后台代码可以这样写 InkCanvas.InkPresenter.StrokeInput.StrokeContinued...1607 提供了 CoreWetStrokeUpdateSource 可以在湿笔迹的时候触发事件 在 CoreWetStrokeUpdateSource 同样提供了开始书写和书写过程中的事件 先通过...StrokeContinued 更高 另外推荐开放的是 StrokeContinued 的事件,因为在使用 UWP 笔迹就是为了做高性能的笔,在 WetStrokeContinuing 的事件里面如果添加了业务代码...,那么将会影响笔迹的书写速度 在 UWP 的笔迹书写过程,需要等待 WetStrokeContinuing 事件完成之后才能进行笔迹渲染,而调用 StrokeContinued 事件是在笔迹书写完成之后调用同时不对这个事件做任何的等待

    58030

    在Android应用中实现跳转的计数和模式切换按钮

    问题描述 在程序应用中,我尝试引入了两个新功能:连续点击跳转UI和切换按钮名称模块显示。...用户在使用过程中遇到了以下问题: 连续点击跳转UI问题:首次连续点击八次能成功跳转UI,但在第二次尝试时无法跳转。 按钮创建问题:应用在每次操作时创建两个按钮,这种方法在视觉上和性能上都不够高效率。...取模运算确保了计数器在达到设定次数后自动归零,还可以无限次重复点击八次的操作。 实现效果:用户现在可以无限次地通过连续点击八次来触发UI跳转。...第二个问题的解决方案:控制按钮可见性 为了解决按钮创建问题,在同一个活动中控制两个按钮的可见性,而不是重复创建按钮: 用户可以通过点击“切换升级模式”按钮进入"升级模式"。...结论 通过上述解决方案,解决了用户在操作上的不便,提升了应用的整体性能,还可以优化UI的便捷性。 谢谢大家的阅读: )

    26440
    领券