kurema / BookViewerApp3

A powerful and beautiful viewer app for booklovers and comic fans.
https://www.microsoft.com/store/apps/9N607JHLBCZB
MIT License
80 stars 7 forks source link

Windows 11 design language #8

Open kronuschan opened 2 years ago

kronuschan commented 2 years ago

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 commented 2 years ago

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.

I'm still investigating.

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

"Brightness of background" setting: image

Document

kronuschan commented 2 years ago

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. image image

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. image image

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 commented 2 years ago

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 commented 2 years ago

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

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

kronuschan commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

~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 commented 2 years ago

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

kronuschan commented 2 years ago

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.

image image

Any idea what's going wrong?

kurema commented 2 years ago

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: image Not: image

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 commented 2 years ago

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 commented 2 years ago

OK. I'll investigate and reopen this.

kurema commented 2 years ago

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.