【开源】XPShadow, 用阴影让UWP更有层次感

UWP采用的是纯扁平化的设计,个人感觉极端了点,整个世界都是平的,导致App分不清层次,看不出重点。其实扁平化是趋势,android, ios都在搞,问题是android, ios都可以很轻松的实现阴影来突出重点和分层,android的material design更是火了一通,其中也大量用到阴影(card, float button等)。

做UWP应用的时候就想WinRT用的xaml和WPF差不多,WPF画阴影很轻松,WinRT应该也很方便吧,结果查了半天资料,硬是找不到解决方案。

只能自己来想办法了,当时首先想到了两种办法:

第一种:利用NineGrid图片

UWP是支持NineGrid图片,熟悉Android的应该知道点9图,一回事。

先在photoshop里先做个阴影图

在xaml里设置阴影图的NineGrid设置,做为对比,第一个图是没用NineGrid,第二个是用了。

NineGrid的值是Thickness,分别表示左,上,右,下, 这样就画出一个九格图:

NineGrid有以下几个好处:

1.因为各厂家分辨率不一致,用九图不用再辛苦的针对每种机型做特定适配了,因为点九图具有在拉伸的时候还能够保持图片的细节。

2.使用了九图,可以把图片做的很小,从而减小应用程序的大小。

3.图片变小了,内存使用也就小了,程序运行和加载起来速度更快了。

上面Xaml显示出来的结果:

没用九图的就很模糊,因为是整体放大,一样的300*300就显得小了好多,被阴影占了很大一部分,用九图的就很清晰。

总结下九图做阴影的优缺点:

优点是用起来很简单,支持大小变化

缺点是每次要做个图片,不同角度的圆角矩形和不同大小的圆形不能很好支持,因为九图是要拉长两边的,圆的拉长就不是圆了。

第二种:用border来模拟

想想每次做个按钮可能都要做图片挺烦的,有没有用代码的方式来解决。

把阴影放大了看,其实也就是由不同透明度的线组成:

那用border来模拟行不行呢,通过算法生成一组模拟阴影的透明度,再用border表示出来,想起来还不错哦,试下。

结果如下:

尼玛,这是什么梗,说好的阴影呢。。

再在photoshop里看一下正常的阴影,原来拐角处和直线处的不一样,是有弧度的。

晕死,只能怪自己想当然了,没在photoshop里先注意到这块。失败!还浪费不少时间在阴影算法上。。

第三种:Win2D

基于第二种想法,用代码的方式应该是有办法的,后来找了下WinRT Direct2D的资料,可以通过Direct2D画出阴影,封装成库给App调用。想法不错,实现起来有点难度,在找Direct2D相关资料时在Microsoft的github下面找到了神器Win2D,尼玛这么好的库怎么不放到标准库里来。。。

Win2D github: https://github.com/Microsoft/Win2D。另外官方有个例子在WinStore上,装了Win10的同学有兴趣可以安装看看,里面实现很多很酷的效果:

Win2D里用Direct2D实现了2d绘图的各种方法,XPShadow就是基于Win2D的,先看下效果:

是不是有点Material Design的味道。

用起来也很简单:

1 <xp:Shadow
2     IsCached="True"    //default is False, if page use NavigationCacheMode = NavigationCacheMode.Required, should set IsCached=True
3     Z_Depth="1"        //shadow depth, from 1 to 5
4     CornerRadius="10"> // shadow corner radius, 0-1 for percent of width, > 1 for actual value
5       <Border Width="80" Height="80" Background="White" CornerRadius="10"/>
6   </xp:Shadow>

来看看实现:

因为是封装成一个内容控件,那画了阴影之后,控件里的内容大小就会相应变小,不然阴影会画到外面去。具体请看:

最后

“这么好的库实在是各位UWP程序猿行走江湖,奋力码砖之必备良库”。

“那么……在哪里才能搞得到呢?”。

“啊!这位仁兄运气真好,小弟正好放到github上开源,仁兄只要访问https://github.com/brookshi/XPShadow就可以了,另外别忘了Star/Fork哦”

时间: 2024-08-09 06:23:19

【开源】XPShadow, 用阴影让UWP更有层次感的相关文章

【开源】知乎日报UWP 更新

说明 大概十天之前我更新了一次APP,后来又仔细看了一下Store里的评论,发现还有几个地方没有改过来.于是前天晚上抽时间改了一下,顺便完善了一下UI体验. 没有看前面文章的童鞋可以看一下下面的链接: 这里是之前的一些文章: [完全开源]知乎日报UWP(上篇):界面设计.官方API分析. [完全开源]知乎日报UWP(下篇):商店APP.github源码.Windows APP良心出品. [开源]知乎日报UWP 更新(1.2.8.0) 这里是源码下载: github源码 这里是Windows St

人生维艰,何不利用开源.NET函数库让工作更轻松

今天推荐的文章会谈到一些让你工作更轻松的开源.NET函数库. 即使业界有时候认为.NET开源社区不太健康,很多开发团队都更多依赖于微软提供的东西来开发.不过最近在.NET世界中还是诞生了一些优秀和有意思的开源函数库. thomasvm就在他的博文中推荐了一些比较有代表性的开源函数库.这些函数库都是解决一些比较通用的问题,具备良好的文档,并非是一个强制你遵循某种规则和代码结构的框架,可以很好地嵌入到你的应用程序当中.当然,作者也给出了一些推荐理由: Hangfire.这是一个运行在ASP.NET中

Android开发之神奇的Fading Edge,让你的View更有层次感!

最近在研究Android Framework层源码,发现我们对源码的理解应该建立在对API的理解之上,如果有一些API你没用过,那么即使你在源码中见到这个东西都不知道是干嘛的,更谈不上理解了.一直以来我都很想把View的绘制方法draw详细的走一遍,但是这里涉及到的细节问题是在是太多了,因此,今天我们还是先来看看Fading Edge,为draw方法详解继续打基础. 在这篇博客之前,我已经陆续推出了五篇关于View绘制的文章,相信这五篇博客对你理解本篇博客会有帮助. 1.View绘制详解,从La

C++开源代码项目汇总

Google的C++开源代码项目 v8  -  V8 JavaScript EngineV8 是 Google 的开源 JavaScript 引擎.V8 采用 C++ 编写,可在谷歌浏览器(来自 Google 的开源浏览器)中使用.V8 根据 ECMA-262 第三版中的说明使用 ECMAScript,并在使用 IA-32 或 ARM 处理器的 Windows XP 和 Vista.Mac OS X 10.5 (Leopard) 以及 Linux 系统中运行.V8 可以独立运行,也可以嵌入任何

开源服务器软件

Java缓存服务器 jmemcached http://www.oschina.net/p/jmemcached jmemcached 是一个Java版的 memcached 缓存服务器,基本上跟 memcached 是兼容的.jmemcached 是使用 Apache MINA 作为无堵塞的网络IO操作,但之后使用Netty作为网络异步实现机制. Web服务器 TornadoTornado web server 是使用Python编写出來的一个极轻量级.高可伸缩性和非阻塞IO的Web服务器软件

走进《开源世界》

<信息系统project>杂志决定从今年第六期添加一个栏目:<开源世界>,每期有固定的版面.那么,<开源世界>应该怎么办呢? <信息系统project>的英文刊名是<CCnews>,定位于“China CIO News”.这表明刊物的主要读者群是“CIO”(Chief Information Officer),中文意思就是“首席信息官”.非常明显,CIO是信息系统project的灵魂人物,由于这个“CIO组合词”的第一个字母是“C”(首席之意).

UWP开发之Mvvmlight实践五:SuspensionManager中断挂起以及复原处理

最近比较忙有一段时间没有更新了,再接再厉继续分享. 先我们看看App在生命周期中会出现那些状态: 详细介绍参考官网:App lifecycle  https://msdn.microsoft.com/en-us/windows/uwp/launch-resume/app-lifecycle 一般情况: 比如用新闻APP看新闻的时候突然收到邮件,然后跳转到邮件APP查看邮件,查看完了再回到APP继续看新闻. 这个时候如果不做中断挂起处理的话,是很难保证APP会恢复到跳转之前的状态.之所以说很难保证

《开源框架那些事儿22》:UI框架设计实战

UI是User Interface的缩写,通常被认为是MVC中View的部分,作用是提供跟人机交互的可视化操作界面.MVC中Model提供内容给UI进行渲染,用户通过UI框架产生响应,一般而言会由控制层调用业务逻辑进行处理,并把处理结果以Model方式返回View,再次渲染.UI框架的大致过程就是如此,按实现方式可以分为RIA和瘦客户端方式,目前基于B/S的瘦客户端方式比较流行.UI框架套路上很简单,但是想要做好可就不容易了.目前基于MVC的框架灿若繁星,不客气的说是个软件公司就有自己的技术框架

《开源框架那点事儿19》:特斯拉建“桩”与开源的生命力

在美国的硅谷,在中国的中关村,许多的技术先驱者怀揣梦想,用激情不懈地追求着他们宏远的目标和巨大的个人财富.开源,正在成为这个时代目前最火热的名词之一.开源精神,作为一种合作协同的驱动力,正在发展为一种更具竞争力的产品开发模式. 我们可以从几个典型故事说起. 一.特斯拉建“桩” 2014年5月份,苹果与三星的专利侵权案做出判决,三星向苹果赔偿约1.2亿美元,巨头公司们再次向世人展示“专利”两字的份量可以重若泰山.然而,时隔一个月后,特斯拉电动车宣布开放其所有专利,仿佛要告诉人们,其实“专利”两字可