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

如何在UWP应用程序中添加使用inkCanvas和Canvas缩放网格?

在UWP应用程序中添加使用inkCanvas和Canvas缩放网格可以通过以下步骤实现:

  1. 创建一个新的UWP应用程序项目,或打开现有的UWP应用程序项目。
  2. 在XAML页面中添加一个Grid元素,用于容纳inkCanvas和Canvas元素,并设置合适的大小和位置。
代码语言:txt
复制
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    
    <!-- 在这里添加其他控件 -->
    
    <InkCanvas x:Name="inkCanvas" Grid.Row="0" Grid.Column="0" />
    <Canvas x:Name="canvas" Grid.Row="0" Grid.Column="0" />
</Grid>
  1. 在代码中,使用ManipulationDelta事件来监听用户的手势缩放操作,并将其应用到inkCanvas和canvas元素。
代码语言:txt
复制
private void Grid_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    var grid = (Grid)sender;

    // 计算缩放比例
    var scaleTransform = new CompositeTransform();
    scaleTransform.ScaleX = e.Delta.Scale;
    scaleTransform.ScaleY = e.Delta.Scale;

    // 应用缩放变换
    inkCanvas.RenderTransform = scaleTransform;
    canvas.RenderTransform = scaleTransform;
}
  1. 在XAML页面的Grid元素上订阅ManipulationDelta事件,并将其关联到上述代码中的Grid_ManipulationDelta方法。
代码语言:txt
复制
<Grid ManipulationDelta="Grid_ManipulationDelta">
    <!-- 添加其他控件和元素 -->
</Grid>

这样,当用户对Grid元素进行手势缩放操作时,inkCanvas和canvas元素会随之缩放。

关于UWP应用程序中使用inkCanvas和Canvas缩放网格的更多信息和示例,请参考腾讯云的开发者文档: https://cloud.tencent.com/document/product/240/8316

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

相关·内容

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

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

1K20

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

本文来告诉大家如何在 WPF 应用 HOST 了 UWPInkCanvas 控件时,给 InkCanvas 控件设置背景色,加上按钮等业务功能的实现方法 在上一篇博客有告诉大家如何在 WPF 里面使用上...UWPInkCanvas 控件,详细请看 WPF 使用 Microsoft.Toolkit.Wpf.UI.Controls 的 InkCanvas 做高性能笔迹应用 如果不想要打包为 MSIX...让 UWP 的控件项目作为实际的 UWP 自定义控件编写的项目,咱将在 UWP 的控件项目里面完成所有的自定义逻辑 如何创建项目如何组织,还请参阅 官方文档 本文这里就不多说了 回到如何给 UWP 的...InkCanvas 控件添加背景色的方法上,在新建的 UWP 控件项目里面,添加一个自定义的控件, CustomInkControl.xaml 控件 在这个控件里面的 XAML 添加如下代码 <UserControl...; } 接着 官方文档 的方法,在 WPF 里面使用刚才创建的控件 <Window x:Class="LaykearduchuNachairgurharhear.MainWindow"

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

    包括在书写过程中切换模式,进行手势擦除切换为橡皮擦模式 本文提供的方法适合用来做复杂的自定义,本文的方法的优点也是缺点。优点是啥都可以自己控制,缺点是啥都需要自己控制。...需要自己处理笔迹的多笔同步问题,处理笔迹的长笔迹分段问题,处理笔迹的绘制问题,处理动态笔迹切换 本文提供的方法依然可以实现非常高性能的笔迹,比 WPF 最快的笔迹实现还要快,但需要自己处理好各个部分的逻辑,动态笔迹和静态笔迹...本文提供的方法的性能依然不如只使用默认的 InkCanvas 快 界面 在开始之前,请先安装 Win2d 库,可参阅 win10 uwp win2d 入门 看这一篇就够了 博客了解如何安装 在 XAML... 本文将使用一个 InkCanvas 放在 Win2d 的 CanvasControl 上层,让 InkCanvas...方法传入缩放和平移的矩阵,此时创建出来的笔迹是包含了变换的 代码 本文所有代码放在github gitee 欢迎访问 可以通过如下方式获取本文的源代码,先创建一个空文件夹,接着使用命令行 cd 命令进入此空文件夹

    44320

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

    现在很多人还是使用纸来记录,那么可以在电脑输入方式之前使用的方式一样,很多用户觉得会方便。在win10 我们有一个简单的方法去让用户输入,InkCanvas。...-10-by-10/ 一些内容是参见陈染大神 做法简单,我们有垃圾微软的InkCanvas ,这个控件可以手写,需要我们在页面使用他: <InkCanvas x:Name="ink_canvas.../win10uwp开发-ink.html 但是我们每次需要使用InkCanvas需要使用很多按钮,微软给了我们Ink Toolbar 可以简单使用。...源代码 https://github.com/lindexi/UWP/tree/master/uwp/src/Ink 语音 现在很多人都是使用语音输入,把文字转为语音我已经写了一篇博客。...首先我们需要设置语言,因为需要的识别,可以使用 web 的接口,所以就需要添加麦克风、网络的权限。 下面的代码就是告诉用户需要输入的内容,然后进行转换。

    1.5K10

    win10 uwp 使用油墨输入

    现在很多人还是使用纸来记录,那么可以在电脑输入方式之前使用的方式一样,很多用户觉得会方便。在win10 我们有一个简单的方法去让用户输入,InkCanvas。...-10-by-10/ 一些内容是参见陈染大神 做法简单,我们有垃圾微软的InkCanvas ,这个控件可以手写,需要我们在页面使用他: <InkCanvas x:Name="ink_canvas.../win10uwp开发-ink.html 但是我们每次需要使用InkCanvas需要使用很多按钮,微软给了我们Ink Toolbar 可以简单使用。...源代码 https://github.com/lindexi/UWP/tree/master/uwp/src/Ink 语音 现在很多人都是使用语音输入,把文字转为语音我已经写了一篇博客。...我们需要先有麦克风,需要权限 首先我们需要设置语言,因为需要的识别,可以使用 web 的接口,所以就需要添加麦克风、网络的权限。

    44210

    WPF 使用 Microsoft.Toolkit.Wpf.UI.Controls 的 InkCanvas 做高性能笔迹应用

    本文告诉大家如何在 WPF 应用上 UWP 的笔迹控件,从而实现性能超级高的笔迹应用的方法 先新建一个 .NET Core 3.1 的 WPF 应用,当前的方法不支持 .NET Framework 版本...x:Name="InkCanvas" DockPanel.Dock="Top" Loaded="InkCanvas_Loaded"/> 此时就可以在 WPF 应用添加...UWPInkCanvas 控件了,但是默认此控件是不能写字的。...安装包,也可以放在 WPF 应用程序上,请看 WPF 引用 UWP 控件 不打包为 MSIX 分发的方法 如果想给画布加上背景,请看 WPF 使用 Microsoft.Toolkit.Wpf.UI.Controls...的 InkCanvas 时加上背景色按钮方法 更多触摸请看 WPF 触摸相关 更多笔迹相关请看 WPF 渲染原理 高性能笔迹原理 WPF 高性能笔 WPF 高速书写 StylusPlugIn 原理

    1.1K40

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

    UWPInkCanvas 里自带了预测书写轨迹的功能,开启此功能可以进行书写预测,从而减少书写延迟。...本文将告诉大家如何在 UWPInkCanvas 里开启笔迹书写预测功 在 UWPInkCanvas 里开启笔迹书写预测功能只需要设置 InkModelerAttributes 的 PredictionTime...印象在 10240 的文档里面,是有一个使用 Inertia 惯性预测算法的笔迹书写预测的,但是我现在还没找到文档 设置 InkModelerAttributes 的 PredictionTime 属性需要先获取到...接着在构造函数使用以下代码设置笔迹书写预测 var inkPresenter = InkCanvas.InkPresenter; inkPresenter.InputDeviceTypes...也就是开启笔迹预测功能,能够降低延迟,但是可能在预测实际触摸点不符合时笔尖会变更 详细请参阅 InkModelerAttributes.PredictionTime - Windows UWP applications

    81220

    Windows Community Toolkit 3.0 - InfiniteCanvas

    概述 InfiniteCanvas 是一个 Canvas 控件,它支持无限画布的滚动,支持 Ink,文本,格式文本,画布缩放操作,撤销重做操作,导入导出数据。...这是一个非常实用的控件,在“来画视频” UWP 应用的绘画功能,也用到了这个控件,它对不同画笔的选择,橡皮擦,直尺圆形尺,文字输入字体选择等都提供了很便捷的支持,而且支持导入导出数据,可以很方便的创作绘画作品...实现了一个 InkCanvas 所以可以实现各种笔触的笔迹绘制; InfiniteCanvas.Events.cs 主要是 Canvas 的各种按钮点击等事件处理; InfiniteCanvas.TextBox.cs...主要是 Canvas TextBox 控件对应的控件定义事件处理; 调用示例 InfiniteCanvas 控件的调用非常简单,下面看看 XAML 的调用: <Page xmlns="http... 的源代码实现过程讲解完成了,希望能对大家更好的理解<em>和</em><em>使用</em>这个功能有所帮助。

    55730

    dotnet WinUI3 Win2D 翻转图片

    本文将告诉大家如何在 WinUI3 里面使用 Win2D 进行图片的翻转,本文的方法也适用于 UWP 框架 图片的翻转在 Win2D 里面,可以使用 Transform2DEffect 特效来辅助实现,...核心逻辑就是通过缩放矩阵当成2D翻转矩阵,将缩放的 X Y 传入负数即可分别实现对应方向的翻转。...比如左右水平翻转可将 X 值传入负数, -1 表示直接水平翻转 本文接下来将告诉大家一步步进行实现从文件加载图片,再将图片进行翻转在界面显示 在 WinUI3 或 UWP 里面使用 Win2D 需按照...方法 图片的翻转在 Win2D 里面,可以使用 Transform2DEffect 特效来辅助实现,核心逻辑就是通过缩放矩阵当成2D翻转矩阵,将缩放的 X Y 传入负数即可分别实现对应方向的翻转。...相当于图片的左上角就是 0 0 点,直接取宽度高度一半就是刚好中心点的值 接下来按照 win10 uwp win2d 入门 看这一篇就够了 win10 uwp win2d 特效 里面提供的方法,创建

    13810

    WPFCanvasInkCanvas

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

    1.2K20

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

    最近我看了微软的 AI 训练营之后,似乎有点了解 Windows Machine Learning DirectML 的概念,于是我尝试实践一下,用 WPF 写一个简单的触摸手写输入的画板,再使用大佬训练好的...是底层的,通过高可控实现高性能,但高可控带来的副作用是使用麻烦,不适合应用程序直接使用,更多的是需要在此之前封装一层框架方便应用程序对接。...而 WinML 正是这样的一层封装,通过 WinML 提供的较友好的 API 可以方便应用程序实现大部分业务功能 使用 WinML 提供的上层人类友好的 API 不仅可以间接使用到 DirectML 提供的对...mnist.onnx 模型文件,下载地址是 https://github.com/microsoft/Windows-Machine-Learning/raw/master/Samples/MNIST/UWP...在 WinRT 的 BitmapPixelFormat.Bgra8 表示使用 8 个位表示 B 蓝色,使用 8 个位表示 G 绿色,使用 8 个位表示 R 红色,总共也是 32 位, WPF 的 Pbgra32

    48010

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

    手绘视频应用开发     手绘视频 UWP 应用开发,基于对不同手绘元素,文字,SVG,位图,Ink 等的解析,基于 Win2D 的渲染方式进行动画展示,并基于类 FFMpeg 的方式进行动画视频的合成...位图手绘      手绘视频制作过程,很多场景需要使用用户的照片,为了让它有更丰富的动画效果,所以需要结合位图属性实现手绘效果。    ...Ink 手绘     Ink 手绘在手绘视频中有很多应用场景,绘图手绘,手写文字手绘,有丰富的笔触类型支持,铅笔的墨粉效果,钢笔的笔触方向粗细,荧光笔的混色效果等动画展示。    ...,这些按钮可激活关联 InkCanvas 与墨迹相关的功能。...来画 UWP 应用结合了 Autodraw 功能,可以通过人工智能图像识别技术,识别用户绘制的线条,推荐素材供用户使用

    1.2K30

    WPF 笔迹算法 从点集转笔迹轮廓

    x:Name="InkCanvas"> 在后台代码里面,实现事件,以下的代码很简单,相信大家一看就明白 public partial class MainWindow...,最后构建输出的也依然是一个 WPF 应用 新建一个 UNO 项目,在 MainPage.xaml 里面监听事件,制作一些准备辅助笔迹绘制的界面逻辑,简单的代码如下 <Canvas x:Name="InkCanvas...在不断落点输入点数据过程,将不断执行 Polygon 的 Points 的清理重新添加,于是就可以不断跟随落点更新笔迹内容,完成笔迹书写的功能 private void DrawStroke...再根据触摸偏移值决定对应方向的缩放系数,决定缩放系数的方法就是取n个触摸点的对应方向的最大距离数,发现是存在左右方向的偏移那么取水平方向距离值,将距离值减去偏移值除的值处以距离值乘以给特定触摸框优化的常数...更多亮点 除了以上介绍的大步骤上的差异之外,阅读了大佬的论文专利之后,我还发现了大佬的算法的更多亮点部分 比如优化曲线分裂的算法,在进行笔迹算法过程,对性能是敏感的,于是大佬提出了利用弧弦比用来代替弦括面积

    47210

    UWP 入门教程2——如何实现自适应用户界面

    系列文章 UWP入门教程1——UWP的前世今生 如上文所说的,布局面板根据可用的屏幕空间,指定界面元素的大小位置。例如StackPanel 会水平或垂直排列界面元素。... 创建UWP使用的工具 创建App时,通常会明确目标设备,当需要在设备预览App,可以使用VS的Preview toolbar(预览工具箱)查看App,可以模拟不同的设备,PC,...自适应扩展 Windows 10 引入“缩放模型”的升级版,除了缩放矢量图之外,有一个统一的缩放因子集合,能够保证UI元素在不同的屏幕尺寸分辨率下,界面元素大小的一致性。...缩放因子能够兼容多种操作系统iOS,Android等,资源科跨多平台共享。 通用输入处理 可使用通用控件创建通用Windows App来管理控制不同的输入模式,鼠标,键盘,触摸笔,控制器等。...新的 InkCanvas XAML 控件InkPresenter API 可访问Stroke 数据 编写代码 VS开发Windows10 项目支持多种开发语言,C++,C#,VB以及JavaScript

    3.1K50

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

    使用 InkCanvas 的过程,无法直接通过 Pointer 消息拿到书写移动,需要使用 StrokeInput 才能获取到 在 InkCanvas.InkPresenter.StrokeInput...作为例子,先在 XAML 界面放一个 InkCanvas 控件,同时修改他的属性名是 InkCanvas 在后台代码可以这样写 InkCanvas.InkPresenter.StrokeInput.StrokeContinued...Anniversary Update 1607 提供了 CoreWetStrokeUpdateSource 可以在湿笔迹的时候触发事件 在 CoreWetStrokeUpdateSource 同样提供了开始书写和书写过程的事件...); 这个事件有一点坑的是有加入的时机问题,请确保在所有的 InkCanvas 包括他的容器都 Loaded 完成之后才可以使用这个事件,不然是不会有触发的 通过 coreWetStrokeUpdateSource...StrokeContinued 更高 另外推荐开放的是 StrokeContinued 的事件,因为在使用 UWP 笔迹就是为了做高性能的笔,在 WetStrokeContinuing 的事件里面如果添加了业务代码

    57730

    ComponentOne.NET仪表板布局控件 — 实现可视化数据大屏展示

    这些容器可以托管多种 .NET控件类型,网格控件,图表控件、报表控件地图控件。此外,用户还可以在父容器内随意拖放控件、调整控件大小。...WPF UWP 界面控件 WPFUWP仍然是桌面业务应用程序的流行平台。...在2018年,ComponentOne 将继续添加新的数据可视化业务控制功能,使用户能够为Web移动创建更完美的应用程序。...这些容器可以托管多种 .NET控件类型,网格控件,图表控件、报表控件地图控件。此外,用户还可以在父容器内随意拖放控件、调整控件大小。...FlexSheet Excel 网格工作表支持将添加到FlexSheet,您将能够通过客户端和服务器端的API进行添加、删除格式化工作表的操作。

    5.3K20

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

    而写这篇文章,以及后面一个系列文章的初衷,就是想全方位的回顾一下 “来画Pro” 开发中使用到的技术遇到的问题,希望能分享给更多对 UWP 手绘视频有兴趣的人。 ?...Ink 的绘制 Surface Pen、Surface Dial 的使用     Ink 笔迹,在 Windows 10 中有很丰富的应用场景,绘图类,书写类,手绘视频类的应用。...微软的 Windows SDK 里提供了很棒的 InkToolbar InkCanvas,可以默认支持几种画笔的展现,圆珠笔、钢笔、铅笔、荧光笔等。...InkToolbar InkCanvas 默认支持 Surface Dial Surface Pen 的操作。...下面是 InkToolbar InkCanvas 的一张示意图应用中使用 Surface Dial 的操作图(来自 IT之家的报道): ? ? 6.

    1.3K110
    领券