首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

如何使用Fluent Design System (上)

前言 微软Build 2017公布了新设计语言Fluent Design System(以下简称FDS),不过官网只是堆砌了各种华丽词语以及一堆动画。...至于UWP要做成怎么样,怎么做,可以参考这个视频: Build Amazing Apps with Fluent Design - Build 2017 视频中使用BuildCast这个示例应用详细展示了...Fall Creators UpdateFluent Design System 本文主要介绍微软Fall Creators Update主打的各种FDS特效、控件。...Reveal最大特点是鼠标靠近时控件边框会被照亮,这对于无边框按钮或ListViewItem可以不破坏其简约设计前提下提示其可操作区域。(或许MRReveal有更多应用场景。)...它没有主打的控件或API,简单地理解成适应各种屏幕尺寸响应式设计也可以,但我更愿意将它主旨理解成设计可以0D到3D形式延伸,即可以适应从语言到鼠标、键盘、触摸、MR等各种形式输入和输出。

2.4K30

如何使用Fluent Design System (下)

上面这种情况,可以XAML添加条件命名空间: xmlns:fcu="http://schemas.microsoft.com/winfx/2006/xaml/presentation?...文档方面,Material Design有很详细使用规范、指导原则,而且有面向设计师文档,而FDS还太过空泛,文档主要是面向开发者,各种规范分布UWP开发文档。...觉得暂时来说,设计师们还没有完全上手以前,只要规规矩矩用上新Style、Brush、控件就可以让应用很好看了,可惜现在不少声称使用上FDS应用为了炫技把各种新Control、新Brush、新Style...文章开头介绍视频展示了ParallaxViewMR运行效果,效果有趣很多: ? 即使只桌面上运行,FDS也激发了不少创意。例如这些设计: ?...参考 Fluent Design System Fluent Design System for UWP apps Reveal highlight Acrylic material Connected

1.2K20

程序员练级攻略(2018):前端 UIUX设计

这个是订阅 陈皓老师极客上专栏《左耳听风》,整理出来是为了自己方便学习,同时也分享给你们一起学习,当然如果有兴趣,可以去订阅,为了避免广告嫌疑,这就不多说了!以下第一人称是指陈皓老师。...不仅如此,这也是一本人类行为原理入门书。...原子设计(Atomic Design 2013 年网页设计师布拉德·弗罗斯特(Brad Frost)从化学受到启发:原子(Atoms)结合在一起,形成分子(Molecules),进一步结合形成生物体...通过大层面(页)和小层面(原子)同时思考界面,布拉德认为,可以利用原子设计建立一个适应组件动态系统。 为什么要玩原子设计,认为,这对程序员来说是非常好理解,因为这就是代码模块化重用化体现。...除了到 官网 学习 Material Design,你还可以访问 Material Design 中文版 来学习。

1.3K20

【翻译】WPF 附加行为介绍 Introduction to Attached Behaviors in WPF

本文解释了什么是附加行为,以及您如何在 WPF 应用程序实现它们。本文读者需要稍微熟悉 WPF、XAML、附加属性、以及 MVVM 模式。...我们可以创建一个 TreeViewItem 子类,该类拥有当被选中时将自己带到视野内建支持,但是, WPF 世界,这肯定就是杀鸡用牛刀了。...把对附加行为解释写在了文章《Working with CheckBoxes in the WPF TreeView( WPF TreeView 中使用 CheckBoxes)》: 这个点子就是...,你一个元素上设置一个附加属性,那么你就可以从暴露这个附加属性获得该元素访问。...做了些修改,例如,往 TreeView 添加了更多项,增大了字体大小,添加了附加行为。附加行为一个叫做 TreeViewItemBehavior 静态类

1.5K10

WPF 很少人知道科技

本文介绍不那么常见 WPF 相关知识。 ---- C# 代码创建 DataTemplate 大多数时候我们只需要在 XAML 中就可以实现我们想要各种界面效果。...但字典带来了内存泄漏问题,要自己处理内存泄漏问题可能会写比较复杂代码。 然而,WPF 附加属性可以非常容易地为对象添加属性或者行为,而且也不用担心内存泄漏问题。...例如,曾经用 WPF 来模拟 UWP 流畅设计(Fluent Design光照效果,使用附加属性来管理此行为则完全不用担心内存泄漏问题: 流畅设计 Fluent Design System 光照效果...如果要将 WPF 模拟得很像 UWP,可以参考这两篇博客: WPF 使用 WindowChrome,自定义窗口标题栏同时最大程度保留原生窗口样式(类似 UWP/Chrome) WPF 应用完全模拟... Windows 10 上为 WPF 窗口添加模糊特效 然而充分利用 Fluent Design 高性能,需要上 XAML Islands,详见: [Using the UWP XAML hosting

24320

Android Studio 4.1 Design Tools 改进

这些属性构建应用时会被删除,它们仅被用于设计/开发,因此对于生成 APK 大小或者运行时行为不会造成任何影响。...这里要注意是,设计时 (design-time) ,tools 命名空间会覆盖 android 命名空间下 visibility 属性,这一行为也会在控件上反映出来 — 如果您设置了 tools... Studio 4.1 版本,我们对 Design Tools Suite 中所有的快捷键 进行了重新审视,并将它们都注册到了 Preferences > Keymap ,您可以探索相应快捷键设置... 4.1 版本,我们将相同理念引入到了 Drawable ,当项目文件包含 Drawable 资源时,您会发现一个 gutter icon (间距图标) 出现在编辑器旁,通过它可以快速更改 Drawable...因此,现在您可以 wizard 随时使用最新版本 Material 图标啦!

2.2K30

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

其实扁平化是趋势,android, ios都在搞,问题是android, ios都可以很轻松实现阴影来突出重点和分层,androidmaterial design更是火了一通,其中也大量用到阴影(card...xaml里设置阴影图NineGrid设置,做为对比,第一个图是没用NineGrid,第二个是用了。 ?...2.使用了九图,可以把图片做很小,从而减小应用程序大小。 3.图片变小了,内存使用也就小了,程序运行和加载起来速度更快了。 上面Xaml显示出来结果: ?...另外官方有个例子WinStore上,装了Win10同学有兴趣可以安装看看,里面实现很多很酷效果: ?...Win2D里用Direct2D实现了2d绘图各种方法,XPShadow就是基于Win2D,先看下效果: ? 是不是有点Material Design味道。

928100

Windows 10 应用创建模糊背景窗口三种方法

-08-31 23:59 现代操作系统创建一张图片高斯模糊效果非常容易,不过如果要在窗口中获得模糊支持就需要操作系统原生支持了。...Please select yours: 中文 English 最早 StackOverflow 上回答一位网友提问时写了一份非常长答案,后来小伙伴建议将答案改写成博客,于是就改了...使用 Fluent Design System 亚克力效果 —— AcrylicBrush。这绝对是 Windows 10 上获得背景模糊效果中视觉效果最好,同时又最省性能方法了。...可以 XAML 代码中使用 interop:WindowBlur.IsEnabled="True": <Window x:Class="Walterlv.Demo.MainWindow" xmlns...Height="350" Width="525" interop:WindowBlur.IsEnabled="True" Background="Transparent"> 可以

2.7K30

【Web技术】522- 设计体系响应式设计

认为移动设备高度发展的当下,「移动优先」不再适合作为单独概念提出来,而渐进增强设计思想应该体现在更细分场景,例如在布局、信息排版以及交互反馈,我们应该优先考虑限制更大移动端;一些交互方式上...设计模式 这里讲设计模式是指设计师具体业务针对不同情况可以采用通用性设计方案,这些设计模式除了单独应用外,有时候也可以多种模式结合应用。...Material 组件响应式行为里提到 Expand 也属于 Show / Hide 延伸。 ?...Density - 内容密度 除了上述 6 种模式以外,把内容密度也归纳为一种设计模式,Fiori、Material Design、 以及 Atlassian 都提出了内容密度概念。...除此之外其它平台也都有类似的弹性布局能力,例如 Fluent windows 采用 XAML 构建布局系统。

1.8K20

Flutter 全栈式——页面框架

Material Design是由Google推出全新设计语言,这种设计语言旨在为手机、平板电脑等平台提供更一致、更广泛外观和感觉。...Material Design是一种有质感设计风格,还会提供一些默认交互动画。...对于没有相关基础的人,正式学习AppUI之前,建议先了解Material Design相关知识 关于Material Design设计风格资料 MaterialApp MaterialApp代表使用...,按钮text等 localeListResolutionCallback LocaleListResolutionCallback 该回调负责应用启动时以及用户更改设备区域设置时选择应用区域设置... ActionBar body Widget 当前页面所显示主要内容 floatingActionButton Widget Material中所定义FAB,是一个悬浮功能按钮 floatingActionButtonLocation

2.8K30

推荐开发者使用 Material Design 组件

为了保证您应用与用户设备安装其他应用在视觉和行为上保持一致,我们 推荐 您遵循 Material Design 规范,因为用户从一个应用中学习操作模式可以无缝衔接地另一个应用中使用。...attr/materialButtonOutlinedStyle"/> 最喜欢功能之一是使用 MaterialTextView 替换 TextView,它 新增功能 可以很方便地 TextAppearance...-1.image Material 主题 可以更系统地 自定义 Material Design 样式来体现您产品品牌。...Chris Banes 在下面这篇文章深入介绍了 MDC 深色主题: 使用 Material Design 组件实现深色主题 Material 动效 https://ask.qcloudimg.com...我们 近期更新 了 Android Studio 通过 File > New Project 菜单新建模版,这些模版为您预设置了 Material 主题并使用了 MDC,因此您可以更容易开始使用

1K30

使用Acrylic(亚克力)

前言 如何使用Fluent Design System 这篇文章里已经简单介绍过Reveal用法,这篇再详细介绍其它内容。...使用Acrylic 2.1 XAML中使用Acrylic UWP提供了一组已定义好Acrylic Brush供开发者使用,通过ThemeResource找到资源名字包含“Acrylic”Brush...Acrylic具体来说包含两种: Background acrylic 透视整个应用UI,可以看到应用窗体后其它应用或桌面(ThemeResource名称包含 -AcrylicWindow-)。...In-app acrylic 只透视套用了acrylic brush元素(ThemeResource名称包含 -AcrylicElement-)。 ? ?...4 Acrylic与Depth Fluent Design System五个话题中,Acrylic同时隶属于Material和Depth话题中,半透明背景可以透视到处于Z轴下一层内容,从而营造出深度效果

1.1K20
领券