Windows 11 design language

[kronuschan]

Hello, first of all, this is a fantastic app, the best one I've tried so far. The main question I have is if there are plans to update this app to have the more rounded Windows 11 design language? I think having the new Mica/Tabbed material behind books would be absolutely incredible. At any rate, thanks for providing this excellent program. I'm definitely looking forward to what comes next.

[kurema]

Thank you for using BookViewer 3. It always makes me happy to be praised.

Supporting Mica sounds good idea. I've tested just now. But I've found two issues.

• My machine (Windows 10) doesn't seems to be supported. At least there's no difference to my eyes. So I cannot test myself and it's the case for lots of users. I couldn't find the way to check if it's supported.
• I have to ignore "Brightness of background" setting. I think very few people change this value, so maybe that's fine.

I'm still investigating.

Screenshot of WinUI 3 Gallary: I've also tested on BookViewer 3 and new UWP project.

"Brightness of background" setting:

Document

• Microsoft Docs - BackdropMaterial Class
• GitHub - Backdrop

[kronuschan]

Thank you for the quick reply!

For point 1:

I believe Mica and the new Acrylic materials are only supported on Windows 11 after some investigation. I'm running Windows 11 right now and hadn't realized these things weren't in 10. I just did some tests and can confirm this to be the case, unfortunately.

Mica and Acrylic change in darkness/lightness when you change the color settings in Windows when applied through DWM. I think in theory it makes implementing dark and light mode easier as now the user can decide in the OS. From what I can tell, most controls in Windows 11 behave this way. Mica and Acrylic in 11 are more optimized than old implementations of glass/acrylic/areo too because if the window is not in focus, the transparency disappears, and it becomes a solid background, so that background processes don't take up more resources than needed.

Here is what Mica is looks like, it's a very subtle effect, which only uses the wallpaper for its transparency. Top is with dark colors and bottom with light.

Here is what Acrylic looks like, which just makes the window semi-transparent and applies blur to it. Again, top is dark, bottom is light.

I wouldn't mind testing anything if you want me to. But I would understand if you don't want to implement this. Windows 10 is still widely used and won't get phased out for at least a while longer.

For point 2:

I haven't used this option specifically and don't know if it's needed. I usually leave settings like this at default but I'm not sure if other people use it.

[kurema]

After some consideration, I decided to go with if

1. "Brightness of background" has the ~default value(90%)~ max value (100%)
2. Windows 11 is running (Build version >= 22000)

then enable Mica. Mica looks like 100% brightness/darkness and I prefer current Acrylic as default. It won't affect many people.

WinUI 3.x has a way to check if Mica is supported but WinUI 2.x for UWP doesn't, at least it seems.

Microsoft.UI.Composition.SystemBackdrops.MicaController.IsSupported()

Another way is to add option to enable Mica but I think it's too much. Adding too many options will confuse users. In that case I can control brightness by adding a layer (Grid). Mica App (Store, GitHub) is doing it. It's not a problem.

[kurema]

I changed my mind. I decided to add a "Theme" setting like every other Apps are doing.

Mica will be applied to background of the viewer and settings page.

[kronuschan]

Hello, thank you so much for your responses. I apologize for not responding sooner.

Awesome, a theme setting is a fantastic middle ground. Thank you so much for adding it in the end, looks like a great middle ground!

Also, thank you for all the explanations and thought/dev process behind it, helps understand why things work as they are.

Is there a way to test the latest build with these changes of bookviewer? Or should I wait for a full release?

[kurema]

You can download and build, but I think you should wait. I do all my work on the master branch (it's definitely not good habit but is simple and easy) so it's all there. It may takes some times (some days ~or a few weeks~) for the next release because I have some other stuffs I want to do in this version. It's still not tested on Windows 11. But the code is simple. I think it will work fine.

This Issue will be closed when it's released.

[kurema]

~This Artifact is the latest build, but you will have some trouble like losing data or untested functions.~ Please wait for a while. v3.2.6.0 is released. Please wait for a few days.

[kurema]

v3.2.6.0 is in the Store now. Closing the issue.

[kronuschan]

Great work! I didn't notice the artifact posted previously; sorry for not responding to it. However, it seems that Mica isn't working, the side panel is flickering with acrylic and a blank canvas when the theming is set to auto, and when I try to override it to just 'dark' it doesn't load at all.

Any idea what's going wrong?

[kurema]

Mica is not applied to Explorer tab. Explorer tab should look the same as before. It's only applied to the Viewer and Settings. If it looks like this, that's fine.

Foreground: Not:

I don't know about flickering but I haven't changed anything about Explore page other than overriding the theme as far as I remember. So I don't think there's a new glitch.

Reason why Explorer is excluded is that Explorer and Viewer function are in separate projects. It is still possible to apply Mica but the code will be a bit too dirty and I like acrylic.

[kronuschan]

Heya there, thanks for the quick answer. Yes, I'm aware that the explorer isn't affected by this change. The flickering happens in the sidebar only. And, the flickering only happens when I set it to Auto. Dark makes the transparency disappear altogether, and Dark Acrylic works well, showing just Acrylic. Only the new dark/light themes are affected - not the Acrylic versions. Note that in addition to looking darker, Mica material only samples the desktop wallpaper once to create its visualization and shouldn't reflect any other software in its transparency which I think the transparency does in this implementation (source in documents). In addition, selecting and unselecting both result in a fully opaque background, which doesn't happen under Acrylic. I'm not sure why the rendering is glitching on my end though, but it's perfectly fine when selecting Acrylic in the themes.

Documents: https://docs.microsoft.com/en-us/windows/apps/design/style/mica https://docs.microsoft.com/en-us/windows/apps/design/style/acrylic

[kurema]

OK. I'll investigate and reopen this.

[kurema]

I rent a computer with Windows 11 and tested. I confirmed the issues you reported.

1. Flickering It happened when it is resized and only on Windows 11, not on Windows 10. The panel randomly become acrylic and fallback color. In my case, the theme does not seems to affect the behavior of flickering. I assume it's a issue of Windows 11 or WinUI but am not sure.

2. Mica Mica does not seems to be applied, at least to my eyes. I updated the code several times, but none of which improved the result. I don't think I'm doing wrong on my code, and could not find a way to fix. It may be related to the reported Issue of WinUI but none of which is exact same situation of mine. What I'm using is BackdropMaterial and it seems to be a little unstable. It may be currently impossible to enable Mica under the TabView.

So Mica theme is temporary disabled in v3.2.7.0. It may be fixed in the future.