1

I'm a newbie with UWP and I'm trying to realize an app with the new Blur Background effect

Is there any way to make it with a js project?

vpwi
  • 31
  • 1
  • 6
  • I don't know what that screenshot has to do with your question, but what file manager is that in your screenshot? – Hubert Grzeskowiak May 06 '17 at 16:19
  • @HubertGrzeskowiak On the left site of the screenshot there is the blur effect. – DevAttendant May 06 '17 at 18:49
  • @schumi1331i see no blur at all in that image. – Hubert Grzeskowiak May 06 '17 at 22:19
  • I believe the question is refering to https://wpdev.uservoice.com/forums/110705-universal-windows-platform/suggestions/8232264-enable-blur-and-transparency-xaml-effects-to-allow. Which is implemented and documented at https://learn.microsoft.com/en-us/uwp/api/windows.ui.composition. The documentain does not describe how to use it from JavaScript. However, the API can be used in JavaScript. I'm not sure how to create a similar effect on the window though. – Sorskoot Jun 16 '17 at 13:17

1 Answers1

0

The new blur background effect (Fluent Design acrylic material) can be mimicked to some extent in a WinJS project using CSS gaussian blur (filter: blur(10px);) and a noise texture overlay.

However, you of course cannot make the actual window transparent to see the desktop underneith this way.

See examples: CSS-only Acrylic Material from Fluent Design System

scripter
  • 75
  • 2
  • 12