dino_c的博客_UWP

WinUI 3 Preview 3 发布了，再一次试试它的性能

1.WinUI3在微软Build2020开发者大会上，WinUI团队宣布可公开预览的WinUI3Preview1，它让开发人员可以在Win32中使用WinUI。最终XAML的新功能不再和WindowsSDK绑定，所有新的XAML功能都将作为WinUI的一部分发布。作为OS的一部分发布的现有UWPXAMLAPI将不会再收到新的功能更新。但是，它们会在Windows10支持生命周期内继续收到安全更新和

Windows

WinUI

XAML

原创 2020-12-18 13:23:18 812 阅读

[UWP]抄抄《CSS 故障艺术》的动画

1.前言什么是故障艺术（GlitchArt风）？我们熟知的抖音的LOGO正是故障艺术其中一种表现形式。它有一种魔幻的感觉，看起来具有闪烁、震动的效果，很吸引人眼球。故障艺术它模拟了画面信号出现故障导致成像错误的感觉。青色色块与红色色块无法重合就是这种故障的体现。从胶片时代开始到今天的数码时代，这种故障一直是观众非常熟悉的现象。上个月看到CSS故障艺术这篇文章，最近想转换心情于是开始抄它的动画了（顺

WIndows 10

UWP

CSS

ANIMATION

BLEND

原创 2020-03-27 09:08:15 493 阅读

[UWP]用画中画模式（CompactOverlay Mode）让用总在最前端显示

1.什么是，以及怎么用画中画Windows10CreatorsUpdate以后UWP提供了一个新的视图模式CompactOverlay，中文翻译成紧凑的覆盖层？反正大部分时间我们都会称它为画中画模式。上图中右上角即为进入画中画模式的微软“电影和电视”应用。可以调用ApplicationView.TryEnterViewModeAsync函数进入或退出CompactOverlayer模式：//进入C

Windows

Windows 应用

UWP

Windows 10

原创 2020-01-17 10:13:24 425 阅读

[UWP]XAML中的响应式布局技术

响应式布局的概念是一个页面适配多个终端及不同分辨率。在针对特定屏幕宽度优化应用UI时，我们将此称为创建响应式设计。WPF设计之初响应式设计的概念并不流行，那时候大部分网页设计师都按着宽度960像素的标准设计。到了UWP诞生的时候响应式布局已经很流行了，所以UWP提供了很多响应式布局的技术，这篇文章简单总结了一些响应式布局常用的技术，更完整的内容请看文章最后给出的参考网站。1.传统的XAML如何适配

Windows

Windows 10

UWP

Windows 10 应用

原创 2020-01-06 09:36:27 589 阅读

[UWP]在应用退出时弹出确认提示框

1.需求在应用退出时（点击右上角的关闭按钮）弹出一个确认按钮可以说是一个最常见的操作了，例如记事本的“你是否保存”：但这个功能在UWP上居然有点小复杂。这篇文章将解释如何实现这个功能。2.CloseRequested为了监视应用退出事件，我本来使用了CoreApplication.Exiting，但好像并不起作用，后来我就没再研究它的触发机制了。在Windows10CreatorsUpdate(1

Windows

Windows 10

Windows yingyong

UWP

原创 2020-01-03 14:35:47 780 阅读

[UWP]使用CompositionGeometricClip裁剪复杂图形及进行动画

1.UWP中的其它裁剪方案之前在这篇文章里，我介绍了如何使用UIElement.Clip裁剪UIElement的内容，使用代码如下：<Canvas><ImageSource="Images/Water_lilies.jpg"Width="200"Height="150"><Image.Clip><RectangleGeometryRect="1007550

Windows

Windows 10

Windows 应用

UWP

原创 2020-01-03 14:34:50 250 阅读

[UWP]UIElement.Clip虽然残废，但它还可以这样玩

1.复习一下WPF的UIElement.Clip用了很久很久的WPF，但几乎没有主动用过它的Clip属性，我只记得它很灵活，可以裁剪出多种形状。在官方文档复习了一下，大致用法和效果如下：<ImageSource="sampleImages\Waterlilies.jpg"Width="200"Height="150"HorizontalAlignment="Left"><Imag

Windows

Windows 10

Windows 应用

UWP

原创 2020-01-03 14:32:55 356 阅读

[UWP]用Win2D和CompositionAPI实现文字的发光效果，并制作动画

1.成果献祭了周末的晚上，成功召唤出了上面的番茄钟。正当我在感慨“不愧是Shadow大人，这难道就是传说中的五彩斑斓的黑？”“那才不是什么阴影效果，那是发光效果。”被路过的老婆吐槽了。系系系，老婆说的都系对的。我还以为我在做阴影动画，现在只好改博客标题了？要实现上面的动画效果，首先使用CompositionDrawingSurface，在它上面用DrawTextLayout画出文字，然后用Gaus

Windows

Windows 10

UWP

Windows 应用

原创 2020-01-03 14:32:03 402 阅读

[UWP]用Win2D实现镂空文字

1.前言之前用PointLight做了一个番茄钟，效果还不错，具体可见这篇文章：[UWP]使用PointLight并实现动画效果后来试玩了Win2D，这次就用Win2D实现文字的镂空效果，配合PointLight做一个内敛不张扬的番茄钟。实现镂空文字的核心思想是使用CanvasGeometry.CreateText从TextLayout获取一个Geometry，然后使用DrawGeometry将它

Windows

Windows 应用

UWP

原创 2020-01-02 10:25:43 621 阅读

[UWP]通过自定义XamlCompositionBrushBase实现图片平铺

1.什么是XamlCompositionBrushBase我早就想试试自定义XamlCompositionBrushBase，但一直没机会。上一篇文章介绍到使用Win2D的BorderEffect实现图片的平铺功能，原理很简单，但每次都要写这些代码很繁琐，正好就用这个作为例子试试XamlCompositionBrushBase。CompositionBrush灵活多变，它的基本用法如下：通过Com

Windows

Windows 应用

UWP

原创 2020-01-02 10:21:42 255 阅读

[UWP]使用Win2D的BorderEffect实现图片的平铺功能

1.WPF有，而UWP没有的图片平铺功能在WPF中只要将ImageSource的TileMode属性设置为Tile即可实现图片的平铺，具体可见WPF的这些文档：ImageBrush类(System.Windows.Media)_MicrosoftDocsTileBrush类(System.Windows.Media)_MicrosoftDocsTileBrush.TileMode属性(System

UWP

Windows 10

Windows 应用

原创 2020-01-02 10:11:28 378 阅读

[UWP]使用CompositionAPI的翻转动画

1.运行效果在使用GetAlphaMask和ContainerVisual制作长阴影(LongShadow)这篇文章里我介绍了一个包含长阴影的番茄钟，这个番茄钟在状态切换时用到了翻转动画，效果如上所示，还用到了弹簧动画，可以看到翻转后有点回弹。本来打算自己这个动画效果写的，但火火已经写好了这个FlipSide控件，Github地址在这里，这篇文章就介绍下这个控件的部分原理。2.TransformM

UWP

Windows 10

Windows 应用

原创 2019-12-31 21:37:39 816 阅读

[UWP]为番茄钟应用设计一个平平无奇的状态按钮

1.为什么需要设计一个状态按钮OnePomodoro应用里有个按钮用来控制计时器的启动/停止，本来这应该是一个包含“已启动”和“已停止”两种状态的按钮，但我以前在WPF和UWP上做过太多StateButton、ProgressButton之类的东西，已经厌倦了这种控件，所以我在OnePomodoro应用里只是简单地使用两个按钮来实现这个功能：<ButtonContent="ç

Windows 应用

UWP

Windows 应用开发

番茄工作法

原创 2019-12-30 21:44:03 410 阅读

[UWP]使用SpringAnimation创建有趣的动画

1.什么是自然动画最近用弹簧动画（SpringAnimation）做了两个番茄钟，关于弹簧动画官方文档已经介绍得够详细了，这篇文章就摘录一些官方文档核心内容。在传统UI中，关键帧动画（KeyFrameAnimation）是描述运动的主要方式。关键帧为设计人员和开发人员提供了尽可能多的用于定义开始、结束和内插的方式。虽然这在许多情况下非常有用，但关键帧动画动态性不够，其运动没有适应性，在任何情况下都

Windows 10

UWP

Windows 应用开发

动画

原创 2019-12-29 22:46:39 310 阅读

[UWP]使用PointLight并实现动画效果

1.CompositionLightingUWP中的CompositionLight是一组可以创建3D光照的API，它明明十分好玩而且强大，但博客园几乎没有相关文章（用UWP或pointlight做关键字只能找到我自己的文章)，这篇文章就来介绍CompositionLighting的入门知识。CompositionLight有四种类型：AmbientLight，发出出现的非定向光源的光源反射场景中

Windows 10

UWP

Windows 应用

C#

原创 2019-12-29 14:12:40 467 阅读

[UWP]使用GetAlphaMask和ContainerVisual制作长阴影

1.什么是长阴影前几年扁平化设计（FlatDesign）十分流行，后来在扁平化的基础上又流行起了长阴影（LongShadow）。长阴影其实就是扩展了对象的投影，感觉是一种光线照射下的影子，通常采用角度为45度的投影，给对象添加了一份立体感。长阴影快速发展为流行的设计趋势，并经常被应用到扁平设计方案的对象。它很适合用在较小的元素上，一时之间几乎应用的图标都加上了长阴影。（不过现在又不流行了）2.使用

Long Shadow

UWP

Windows 10 应用

扁平化设计

原创 2019-12-28 12:19:52 380 阅读

[UWP]使用GetAlphaMask制作阴影

1.前言最近常常接触到GetAlphaMask，所以想写这篇文章介绍下GetAlphaMask怎么使用。其实GetAlphaMask的使用场景十分有限，Github上能搜到的内容都是用来配合DropShadow的，所以这篇文章也以介绍DropShadow为主。2.合成阴影先介绍一下合成阴影。Compositor.CreateDropShadow()可以创建一个DropShadow，将这个DropS

UWP

Windows 10

Windows 应用

原创 2019-12-26 22:29:26 496 阅读

[UWP]CompositionLinearGradientBrush加BlendEffect

1.什么是BlendEffect上一篇文章介绍了CompositionLinearGradientBrush的基本用法，这篇文章再结合BlendEffec介绍一些更复杂的玩法。Microsoft.Graphics.Canvas.Effects命名空间下的BlendEffect用于组合两张图片（分别是作为输入源的Background和Foreground），它包含多种模式，如下图所示：其中最简单的是

UWP

Windows 应用

Windows 10

C#

原创 2019-12-25 22:19:45 403 阅读

[UWP]使用CompositionLinearGradientBrush实现渐变画笔并制作动画

1.什么是CompositionBrushCompositionBrush(合成画笔)是操作可视化层时用于绘制SpriteVisual区域的画笔。使UWP应用时可以选择使用XAML画笔或CompositionBrush(合成画笔)绘制UIElement。很多时候XAML画笔和合成画笔都能实现同样的效果，在官方文档使用XAML画笔vs。CompositionBrush这一节中有详细的对比介绍。Com

Windows应用

UWP

Windows 10应用

番茄工作法

原创 2019-12-24 22:54:03 417 阅读

[UWP]占领标题栏

1.前言每一个有理想的UWP应用都会打标题栏的主意，尤其当微软提供将Acrylic扩展到标题栏这个功能后，大部分Windows10的原生应用都不乖了，纷纷占领了标题栏的一亩三分地。这篇博客将介绍在UWP中如何自定义标题栏。2.示例代码UWP的限制很多，标题栏的自定义几乎全部内容集中在这篇文档里面。但只参考这篇文章做起来还不够顺手，我参考了微软开源的计算器应用中的TitleBar写了一个示例应用，可

Windows应用

番茄工作法

UWP

原创 2019-12-23 10:10:51 416 阅读

[UWP]占领标题栏

1.前言每一个有理想的UWP应用都会打标题栏的主意，尤其当微软提供将Acrylic扩展到标题栏这个功能后，大部分Windows10的原生应用都不乖了，纷纷占领了标题栏的一亩三分地。这篇博客将介绍在UWP中如何自定义标题栏。2.示例代码UWP的限制很多，标题栏的自定义几乎全部内容集中在这篇文档里面。但只参考这篇文章做起来还不够顺手，我参考了微软开源的计算器应用中的TitleBar写了一个示例应用，可

Windows应用

番茄工作法

UWP

原创 2019-12-23 10:10:43 435 阅读

[UWP]从头开始创建并发布一个番茄钟

1.自己用的番茄钟自己做在PC上我一直使用“小番茄”作为我的番茄钟软件，我把它打开后放在副显示器最大化，这样不仅可以让它尽到本分，而且还可以告诉我的同事“我正在专心工作”。可是我总是嫌弃它的手感不够愉悦，总想自己写一个番茄钟软件，正好最近很久没写UWP应用了很手痒，于是就抽空写了个自用的番茄钟并发布到微软应用商店。结果手感也并不愉悦。另外，本来本来我也打算用Storyboard实现动画，但火火总是

UWP

番茄工作法

Windows应用

原创 2019-12-21 16:37:01 425 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

dino.c

WinUI 3 Preview 3 发布了，再一次试试它的性能

[UWP]抄抄《CSS 故障艺术》的动画

[UWP]用画中画模式（CompactOverlay Mode）让用总在最前端显示

[UWP]XAML中的响应式布局技术

[UWP]在应用退出时弹出确认提示框

[UWP]使用CompositionGeometricClip裁剪复杂图形及进行动画

[UWP]UIElement.Clip虽然残废，但它还可以这样玩

[UWP]用Win2D和CompositionAPI实现文字的发光效果，并制作动画

[UWP]用Win2D实现镂空文字

[UWP]通过自定义XamlCompositionBrushBase实现图片平铺

[UWP]使用Win2D的BorderEffect实现图片的平铺功能

[UWP]使用CompositionAPI的翻转动画

[UWP]为番茄钟应用设计一个平平无奇的状态按钮

[UWP]使用SpringAnimation创建有趣的动画

[UWP]使用PointLight并实现动画效果

[UWP]使用GetAlphaMask和ContainerVisual制作长阴影

[UWP]使用GetAlphaMask制作阴影

[UWP]CompositionLinearGradientBrush加BlendEffect

[UWP]使用CompositionLinearGradientBrush实现渐变画笔并制作动画

[UWP]占领标题栏

[UWP]占领标题栏

[UWP]从头开始创建并发布一个番茄钟