fluent-design

How to get a blurred translucent QML Window (similar to Fluent Design guidelines) on Windows 10?

由 不羁的心 提交于 2021-01-18 06:47:34
问题 I would like to get a semi-transparent blurred window in QML on Windows 10 similar to the Fluent Design guidelines (example). I know you can make a transparent window: Window{ visible: true color: "transparent" } but this doesn't achieve the blur effect I am looking at. I am also aware that one can blur elements inside the windows using QtGraphicalEffects like FastBlur but I would like to blur the entire window itself. Is there a way to achieve this? I have also tried using the QtWinExtras

Fluent Design card lift effect

由 拈花ヽ惹草 提交于 2020-01-01 19:56:26
问题 I want to add the card lift effect to my bootstrap cards with fluent design styles on hover. You can see what I mean on microsoft design website. Here's what I tried, but there is something missing and I cannot quite grab it. I tried: .card { box-shadow: -3px 6px 5px 0px rgba(176,164,176,1); transition: all .3s ease-in-out; } .card:hover { box-shadow: -3px 18px 20px 0px rgba(99,89,99,1); } <div class="card" style="width:19.5rem"> <div class="card-body"> Lorem ipsum dolor sit ameta, card

Does Windows 10 Mobile support the Fluent Design System for UWP apps?

由 巧了我就是萌 提交于 2019-12-23 05:11:57
问题 I'm developing a new UWP app with the Fluent Design System (Acrylic Background and reveal) but apart from being available on Windows 10 Desktop, I also want to publish the application to Windows 10 Mobile. Does Windows 10 Mobile support the Fluent Design System? Or do I have to develop another application just for Windows 10 Mobile without the Fluent Design System? 回答1: Windows 10 Mobile build 10.0.15063 (Creators Update) supports composition effects as well as in-app acrylic (see How to use

How to use Acrylic Accent in Windows 10 Creators Update?

由 僤鯓⒐⒋嵵緔 提交于 2019-12-17 07:07:13
问题 I can't find any detailed document to use Acrylic Accent (CreateBackdropBrush). I found a post in StackOverflow which is somewhat useful but it doesn't help to get started. So please create a detailed answer to this post so that everyone can learn. Update: Microsoft has released an official Acrylic material document Note: If anyone doesn't know about Acrylic Accent. Acrylic Accent is the new feature in Windows 10 Creators Update that allows the app background to be Blurred and Transparent.

UWP change NavigationViewItem height

由 余生颓废 提交于 2019-12-11 18:04:57
问题 On the image above, you can see my app (left) and Groove Player (right). I want to make NavigationViewItem height big like Groove Player, but I don't know how. I tried playing with Padding and MinHeight but it doesn't look the same. I want to do the same for the AutoSuggestBox and the Settings button, that are part of NavigationView. <NavigationView x:Name="navView" IsSettingsVisible="True"> <NavigationView.AutoSuggestBox> <AutoSuggestBox QueryIcon="Find" PlaceholderText="Search"><

Acrylic material in win32 app

由 烈酒焚心 提交于 2019-12-06 05:38:40
问题 Microsoft recently revealed their new "fluent" design langauge, and one part of it is the "acrylic" material. This effect makes an element transparent and blurs the background. It can either be applied to a window, such that parts of underlying windows shine though (background acrylic), or to individual elements in the window, so other controls shine through (in-app acrylic). It is conceptually and visually very similar to vibrancy on macOS. It is implemented as a special Brush in XAML, but I

Fluent Design card lift effect

由 早过忘川 提交于 2019-12-04 20:48:18
I want to add the card lift effect to my bootstrap cards with fluent design styles on hover. You can see what I mean on microsoft design website . Here's what I tried, but there is something missing and I cannot quite grab it. I tried: .card { box-shadow: -3px 6px 5px 0px rgba(176,164,176,1); transition: all .3s ease-in-out; } .card:hover { box-shadow: -3px 18px 20px 0px rgba(99,89,99,1); } <div class="card" style="width:19.5rem"> <div class="card-body"> Lorem ipsum dolor sit ameta, card content </div> </div> Kindly thanks for your help. What makes the effect to looks like it is lifting is the

Acrylic material in win32 app

由 寵の児 提交于 2019-12-04 10:41:57
Microsoft recently revealed their new "fluent" design langauge, and one part of it is the "acrylic" material . This effect makes an element transparent and blurs the background. It can either be applied to a window, such that parts of underlying windows shine though (background acrylic), or to individual elements in the window, so other controls shine through (in-app acrylic). It is conceptually and visually very similar to vibrancy on macOS. It is implemented as a special Brush in XAML, but I wonder it there is a way to use it (background acrylic) in a regular Win32 app? The effect looks very

Microsoft Fluent Design for Web (CSS framework) [closed]

由 狂风中的少年 提交于 2019-11-29 00:40:58
问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed last year . As Microsoft recently released a design system called "Fluent Design", is it appropriate to apply it on web design? Most of my searching has been for all Microsoft platforms, C# app, F# etc.. I have never seen anything regarding in web design. 回答1: Take a look at Microsoft Web

CSS-only Acrylic Material from Fluent Design System

由 社会主义新天地 提交于 2019-11-28 15:49:16
With the advent of Microsoft's Fluent Design System and the propagation of the new Acrylic Material around the Windows ecosystem, I thought it would be great to use it in some Web layouts. Acoording to the spec , the composition of an acrylic layer is: So I went to try a CSS-only approach inspired by the layers in that picture, this way: body { margin: 0; font: 1em/1.4 Sans-serif; background: url("https://cdn.pixabay.com/photo/2017/03/27/16/50/beach-2179624_1280.jpg") center center; background-size: 100vw auto; } main { display: flex; align-items: center; justify-content: center; height: 100vh
订阅 fluent-design