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

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

本文来告诉大家如何在 WPF 应用 HOST 了 UWP 的 InkCanvas 控件时,给 InkCanvas 控件设置背景色,加上按钮等业务功能的实现方法 在上一篇博客有告诉大家如何在 WPF 里面使用上...包,请参阅 WPF 引用 UWP 控件 不打包为 MSIX 分发的方法 在开始之前,需要了解的是 UWP 的 InkCanvas 控件是没有背景色这个属性的,也就是说 UWP 的 InkCanvas 控件需要依靠外层的容器或者背后的元素给的颜色作为背景色...但是在 WPF 里面 HOST 了 UWP 的控件的方式,相当于将 UWP 作为一个窗口嵌入到 WPF 应用里面,这就意味着在 UWP 控件所在的范围,不能使用 WPF 的渲染,在此范围里面的元素都被...InkCanvas 控件添加背景色的方法上,在新建的 UWP 控件项目里面,添加一个自定义的控件, CustomInkControl.xaml 控件 在这个控件里面的 XAML 添加如下代码 为了能在鼠标下进行绘制

2.1K20

dotnet 从入门到放弃的 500 篇文章合集

uwp 绑定 OneWay 无法使用 win10 uwp 绑定密码 win10 uwp 绑定静态属性 win10 uwp 自定义控件初始化 win10 uwp 获取指定的文件 win10 uwp 获取按钮鼠标左键按下...win10 uwp 获取文件夹出错 win10 uwp 获得元素绝对坐标 win10 uwp 获得缩略图 win10 uwp 萤火虫效果 win10 uwp 让焦点在点击在页面空白处时回到textbox...win10-uwp-应用转后台清理内存 win10-uwp-弹起键盘不隐藏界面元素 win10-uwp-快捷键 win10-uwp-截图-获取屏幕显示界面保存图片 win10-uwp-打包第三方字体到应用...DelegateCommand 出现Specified cast is not valid wpf GifBitmapDecoder 解析 gif 格式 WPF ListBox 的选择 WPF listView 绑定一项...异常 WPF UncommonField 类型是什么 wpf VisualBrush 已知问题 WPF 一个性能比较好的 gif 解析库 WPF 从文件加载字体 WPF 使用 Direct2D1 画图 绘制基本图形

10.4K20
您找到你想要的搜索结果了吗?
是的
没有找到

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

手绘视频应用开发     手绘视频 UWP 应用开发,基于对不同手绘元素文字,SVG,位图,Ink 等的解析,基于 Win2D 的渲染方式进行动画展示,并基于类 FFMpeg 的方式进行动画视频的合成...SVG 手绘     SVG 元素是一种矢量图形,因为它的矢量属性和文件组成,它的路径数据可以在手绘视频中被还原和绘制出来,是手绘视频中重要的元素。    ...简单处理过程包括:SVG 元素的解析和静态展示;根据动画时长和路径直线总长度,计算每帧绘制的部分路径;按照计算结果绘制路径,完成后进行 SVG 填充色绘制。  4....简单的处理过程包括:利用 InkCanvas 完成绘制后,保存 Ink 数据;获取 Ink 数据,按照 SVG 绘制原理进行绘制;自定义笔触的实现,数据存储和绘制方式。  6....Ink 结合手绘     Ink 和手绘视频的结合,主要有以下几种方式:利用 InkCanvas 和 InkToolbar 实现 Ink 的获取和存储;自定义圆形菜单,实现 Ink 的选择,设置和绘制数据获取

1.2K30

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

SVG 的解析和绘制     大家所了解的,SVG 是一种矢量图格式,不同于位图的是,它的组成是一个 XML,节点信息包括了 path,stroke,fill 等,分别代表了 SVG 的路径,路径边框和填充规则...PNG/JPEG/BMP 等位图的绘制     PNG/JPEG/BMP 等图片格式,有着不同的压缩和编码格式,但因为都属于位图,所以组成元素都是像素,由一个 width * height 的长度的数组来存储每个像素点的像素值...Ink 的绘制和 Surface Pen、Surface Dial 的使用     Ink 笔迹,在 Windows 10 中有很丰富的应用场景,绘图类,书写类,手绘视频类的应用。...到此为止,就完成了手绘视频的主要元素解析、渲染、操作和视频导出的基本流程。...以下面每篇详细讲解的地址,持续更新: UWP 手绘视频创作工具技术分享系列 - SVG 的解析和绘制 http://www.cnblogs.com/shaomeng/p/7476480.html  UWP

1.2K110

WPF 跨线程 UI 的方法

本文告诉大家如何在 WPF 使用多线程的 UI 的方法 在很多的时候都是使用单线程的 UI 但是有时候需要做到一个线程完全处理一个耗时的界面就需要将这个线程作为另一个 UI 线程 在 WPF 可以使用...VisualTarget 做到多个 UI 线程的绘制,注意这里的 WPF 的渲染线程只有一个,多个 UI 线程无法让渲染的速度加快。...{ var text = new FormattedText("欢迎访问我博客 http://lindexi.gitee.io 里面有大量 UWP...需要添加到界面,打开界面添加下面代码 运行可以看到下面界面,这里的文字是在另一个线程绘制...代码请看 https://github.com/lindexi/UWP/tree/master/wpf/CaitrairSodeyatarFowfurur 更多博客请看 WPF 同一窗口内的多线程 UI

1.7K30

win10 uwp 异步进度条 圆形进度条

,打开我的进度条文件夹,里面有View文件夹 我在View有一个控件RountProgress复制他到你的解决方案,如果我的控件大小和你不一样,很简单调整,我就不说。...首先我们需要有Thickness,宽度,StrokeDashArray的每一个都是宽度的倍数 首先取第一个元素,把这个元素乘以宽度,作为显示的大小,然后取第二个元素,乘以宽度,作为不显示的大小 然后循环获取第三个...0:n+1,n就是第n个元素 一个显示一个不显示,循环 记得长度乘以是值*宽度 那么我们如果有一个值*宽度的到大小比我们的宽度还大,那么就会截断。...假如我们宽度 3,StrokeDashArray 1,2,0.5,总长度为5,那么 第一个是大小 1*3显示,然后是2*3不显示,因为到第一个只有长度为2,第二个大小为6,所以会截断,3显示然后2不显示...我们可以看到我们的元素位置可以修改 Margin,那么如何在动画修改Margin UWP 动画 Margin可以 <ObjectAnimationUsingKeyFrames

1.5K10

New UWP Community Toolkit - DeveloperTools

Grid 中的网格,开发者可以根据网格来检查控件对齐;除了开发过程中的辅助作用,开发者还可以使用它作为画板辅助线,日记应用的网格等 UI 显示; FocusTracker - 可以显示当前聚焦的 XAML 元素信息...,如果 lineBrush 无效,则初始化为 ApplicationForegroundThemeBrush; 横向循环绘制矩形,循环步长是横向步长,总长度是控件实际宽度;绘制矩形宽度为 1,高度为控件实际高度...,位置居左为当前总步长; 纵向循环绘制矩形,循环步长是纵向步长,总长度是控件实际高度;绘制矩形高度为 1,宽度为控件实际宽度,位置居上为当前总步长; private void Rebuild() {...Stop(); ClearContent(); } 来看一下 updateTimer 的 Tick 处理方法: 使用 FocusManager 获取当前获得焦点的元素,清空上一次获取焦点的控件内容信息...总结 到这里我们就把 UWP Community Toolkit 中的 DeveloperTools 的实现过程和简单的调用示例讲解完成了,希望这些工具对大家开发 UWP 应用有所帮助,如果大家有更好用的工具类

83570

win10 uwp 异步进度条

,打开我的进度条文件夹,里面有View文件夹 我在View有一个控件RountProgress复制他到你的解决方案,如果我的控件大小和你不一样,很简单调整,我就不说。...首先我们需要有Thickness,宽度,StrokeDashArray的每一个都是宽度的倍数 首先取第一个元素,把这个元素乘以宽度,作为显示的大小,然后取第二个元素,乘以宽度,作为不显示的大小 然后循环获取第三个...0:n+1,n就是第n个元素 一个显示一个不显示,循环 记得长度乘以是值*宽度 那么我们如果有一个值*宽度的到大小比我们的宽度还大,那么就会截断。...假如我们宽度 3,StrokeDashArray 1,2,0.5,总长度为5,那么 第一个是大小 1*3显示,然后是2*3不显示,因为到第一个只有长度为2,第二个大小为6,所以会截断,3显示然后2不显示...我们可以看到我们的元素位置可以修改 Margin,那么如何在动画修改Margin UWP 动画 Margin可以 <ObjectAnimationUsingKeyFrames

39410

win10 uwp 录制任意应用屏幕

,将图层在精灵元素上显示,然后插入到当前控件作为最后一个图层也就是放在最上层元素 var visual = compositor.CreateSpriteVisual();...,所以需要执行修改当前的图层的大小 CanvasComposition.Resize(_surface, canvasBitmap.Size); 在获取到...CanvasBitmap 就可以使用 win2d 绘制到图层上,这样就完成了绘制其他窗口 using (var session = CanvasComposition.CreateDrawingSession...在看到这个技术,我就想到了也许UWP是能做到很好的多进程渲染的,也就是用这个技术获取其他窗口的渲染界面,其他窗口可以在其他渲染架构的进程运行,然后转发用户输入消息,这样就能做到解决空域的多进程渲染 --...-- 本文会经常更新,请阅读原文: https://blog.lindexi.com/post/win10-uwp-%E5%BD%95%E5%88%B6%E4%BB%BB%E6%84%

1.6K30

Win2D 中的游戏循环:CanvasAnimatedControl

准备工作 要使用 Win2D 进行简单的游戏开发,你需要先配置好一些 UWP 的开发环境,并且在你的项目中安装 Win2D.uwp 的 NuGet 包。...阅读 win10 uwp win2d 入门 看这一篇就够了 - 林德熙 了解如何在你的项目中安装 Win2D,并且了解 Win2D 基本的知识。...CanvasControl 用于进行一次性绘制,或者那些不常更新的画面内容。例如进行软件的 UI 绘制,或者软件中所得图形的绘制。...有些信息需要注意: Update 和 Draw 运行于相同的线程,但都不是主线程;所以你不可以从这里去获取主线程中的 UI 资源。...你可以阅读 使用 Win2D 绘制带图片纹理的圆(或椭圆) 了解如何绘制这样的塑料弹球。

94720

Windows 窗口样式 什么是 WS_EX_NOREDIRECTIONBITMAP 样式

详细请看为何使用 DirectComposition 玩法就是系统给你一个绘制表面,你在这个绘制表面上进行绘制,然后 DWM (桌面管理器 DWM Desktop Window Manager) 会拿出你绘制的表面来和其他的应用进行混合...普通的应用是给每个窗口的客户区创建一个重定向表面,这个应用的窗口的所有绘制内容都绘制到这个表面。...而通过 DirectComposition 可以让应用自己管理和创建这个重定向表面,而让桌面管理器从应用自己创建的表面进行获取 Bitmap 和其他表面进行混合 这个方式有什么作用?...所有的 UWP 应用都用上了 DirectComposition 技术,此时的 UWP 能够通过 dx 创建多个不同的表面,将内容绘制到表面里面,然后经过 DWM 混合在屏幕显示 这就是 UWP 应用渲染快的一个原因...对 DWM 来说,可以通过合成图层的方法方便进行窗口特效处理,亚克力效果。对其他应用来说,可以通过重定向表面技术,获取其他应用的截图,这对于视频直播软件来说能提升很多性能。

1.7K20

用画中画模式(CompactOverlay Mode)让用总在最前端显示

什么是,以及怎么用画中画 Windows 10 Creators Update以后UWP提供了一个新的视图模式CompactOverlay,中文翻译成 紧凑的覆盖层?...).TryEnterViewModeAsync(ApplicationViewMode.Default); 还可以使用ViewModePreferences控制进入CompactOverlay时窗口的大小...; • 可以改变窗口大小,但只能在 150 x 150 到 500 x 500 之间改变; • 虽然标题栏消失,但左下右三个边框仍在; 因为尺寸有限制,所以超过 150 x 150 到 500 x 500...VisualState.Setters> 虽然一篇文章介绍了使用...结语 CompactOverlay mode – aka Picture-in-Picture 上面这篇文章还给出了更多有用的代码:如何判断是否支持CompactOverlay及如何在多视图模式下使用。

1.3K10

win10 uwp 自定义控件入门

本文告诉大家如何在 UWP 使用 CustomControl 自定义控件,在 UWP 的自定义控件的中文翻译是模板化控件,通过自定义控件可以完全控制整个控件的布局和渲染。...主要的元素就是控件,可以说,整个 UWP 的界面都依靠控件画出来的。...通过这个方法就可以拿到在 xaml 定义的控件,拿到了之后就可以在代码修改,如何修改请看下面 布局 如果已经写了 xaml 在代码拿到了 xaml 的控件,自定义控件还可以修改布局的方式 先在界面添加一些元素...因为容器的大小可以是容器里面的元素决定的,需要让这个容器先知道他里面的控件的大小才可以知道容器的大小。...这就是测量的过程,测量的过程就是让每个控件知道子节点的大小,从而计算出控件的大小,然后将控件的大小返回给上一层,让上一层可以知道子节点的大小

84520

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

UWP 的 InkCanvas 里自带了预测书写轨迹的功能,开启此功能可以进行书写预测,从而减少书写延迟。...本文将告诉大家如何在 UWP 的 InkCanvas 里开启笔迹书写预测功 在 UWP 的 InkCanvas 里开启笔迹书写预测功能只需要设置 InkModelerAttributes 的 PredictionTime...10240 的文档里面,是有一个使用 Inertia 惯性预测算法的笔迹书写预测的,但是我现在还没找到文档 设置 InkModelerAttributes 的 PredictionTime 属性需要先获取到...添加以下代码 以上代码在界面里存放一个 InkCanvas 元素...的空文件夹,接着使用命令行 cd 命令进入此空文件夹,在命令行里面输入以下代码,即可获取到本文的代码 git init git remote add origin https://gitee.com/

73620

WPF 最简逻辑实现多指顺滑的笔迹书写

其实在 WPF 下,可以通过 Stroke 类的辅助,不断给 Stroke 添加点的方式,做到绘制出笔迹 绘制笔迹需要给定一个 DrawingAttributes 告诉笔迹的粗细和颜色等 其次需要创建...在 WPF 的笔迹实际上算法就是将离散的点连接作为一段顺滑的笔迹 那么如何在界面显示出来?...敲黑板,不在视觉树上的元素将不会持续渲染 接下来就是实现多指了,实现方式是通过 StylusMove 和 StylusUp 事件实现。...第二个是通过 GetStylusPoints 可以拿到密集的点集,此时绘制才能做到顺滑。那么为什么 GetStylusPoints 可以获取比 WM_Touch 更密集的点?...Stroke 包含太多的点,如果包含很多点,那么分为多个不同的 Stroke 对象,这样每次渲染的内容都不会很多,渲染性能相对比较高 本文的代码放在 github 欢迎小伙伴访问 但是无论如何做,都没有 UWP

71320
领券