Windows 10 Fluent Design / Acrylic material

[marcinciarka]

Fall Creators update gave us the acrylic material ability, can electron-vibrancy utilize this for WIndows?

[0x61726b]

I think only UWP apps are able to use those new features. Unless I'm missing something that should be the case. I'll do some research anyway.

[23phy]

Any news?

[23phy]

Maybe with windows.ui.xaml.media from NodeRT it would be possible. That's where the Acrylic API is located.

[VatsaPatel]

Waiting for acrylic support too.

[23phy]

I did some research and it's definitely possible, the NodeRT gives you access to all the UWP APIs so you can use them in your Electron applications, but I am struggling with building the windows.ui.xaml.media module.. looks like there are many errors which are beyond my comprehension. A log can be found below. I've used Visual Studio 2017 (successfully built other modules with it so it's not the VS, I tried with VS2015 but with the same results)
build.log (If you open it I suggest you use VSCode or Sublime)

[0x61726b]

I've found this quote on SO talking about AcrylicBrush;

It's effects are created using the Lower level XAML Composition APIs, which uses UWP's XAML Compositor, so I would say that I doubt you will be able to achieve this natively in Win32. If you really want it, you can either take your app across the Desktop Bridge, and convert the UI, or mimic the effects with the technology available today. (Browsers such as Chrome, manage to use bring the Window Chrome further into their app, although I'm not sure how you would achieve the acrylic effect).

Even though the API might be usable, it is possible it will have no effect. Still, we will have to try and see if it will work or not.

[VatsaPatel]

Any new findings about the API ?

[23phy]

Sadly, not really, but another way of using UWP APIs in your Node project (Electron in my case), is to have a background task that handles the UWP things, see electron-uwp-background, I am not yet sure if it is possible to have achieve Acrylic effect in your window with this solution but I am investigating, it is really late now, but I will try tomorrow, will keep you updated.

[23phy]

Great news everyone, lately Windows started to roll out the new build called Redstone 4 (Windows 10 version 1803), and exposed some new stuff about acrylic effects in Win32 apps. I modified electron-vibrancy a bit and I got the result I wanted but with a single problem, and it's that the background of the Electron app (with the acrylic effect) was of the size of your resolution, albeit your app which has a fixed width and height, I'll investigate this more in depth and after I figure out how to work with N-API, I'll build a module just for that effect on Windows, it'll be called electron-acrylic. I'll keep you updated.

[23phy]

The module is on it's way, just a few bugs here and there. How's looking so far:

• The full window (I've used Snipping Tool)
  

• This is on desktop:
  

• And here (YouTube) is moving :O

Gonna game a little and go to sleep, updates tomorrow, I hope to finish this week and release it to npm.

[matthiasg]

@23phy this is is this issue closed or still work in progress ? I really like what you did so far and would love to see it continued.

[23phy]

The module that I am building is not related to this repo, just this specific issue (the UWP acrylic blur). If @arkenthera wants to merge the two repos, s/he is more than welcome. I tried to make a fork and adding to that one but I don't quite understand NAN. That's why I made another module for this issue with N-API. This issue can be closed indeed, but someone should leave a reference to the electron-acrylic module in case it will remain standalone.

[matthiasg]

@23phy thanks for the update .. will follow your work on acrylic over there then

[23phy]

Cool, then @dreszczyk can close this issue.

[0x61726b]

Good work @23phy!. Although, I recommend making this change for Electron rather than making a new module. Make a PR and it will most likely be supported and eventually merged,it will be easier for Electron developers to use it in their projects.

[wdanilo]

What happened to this topic @arkenthera and @23phy ? @23phy your work is spectacular. It seems you spend amazing amount of time to make it work. Why the last step did not happen? :( Is it possible to add it to electron?