Acrylic default recipes incorrect

[niels9001]

Love the easy to use backdrops! By default (without any changes), they are not 1:1 the same as the backdrop Acrylic/Mica brushes used in windows and shell. This requires devs to manually tweak, which can be time consuming and results might differ.

These are the correct settings according the design toolkit :):

Mica

Acrylic

[dotMorten]

Looking at the source code comparing to the above, Mica matches what the defaults are: https://github.com/dotMorten/WinUIEx/blob/main/src/WinUIEx/SystemBackdrop.cs

Do you have a link to the doc where the acrylic values are documented?

[adamplonka]

Yes I found the same, it works good without overriding the default values. What I did is just to create a class derived from MicaSystemBackdrop and override UpdateController with no code and no calling to base class. The default values make it look just like any other app that uses mica.

[niels9001]

Yeah, you're right - Mica is indeed using the right defaults :). The default AcrylicSystemBackdrop however is too translucent and should be a bit more opaque - with the settings defined in the original post we stick to the defaults :).

These are defined in the Windows UI Figma design toolkit: https://www.figma.com/community/file/989931624019688277 (Under 'Guidance & Charts' -> Acrylic Background) (EDIT: I realize that the Community version of this toolkit does not contain the exact values..)

[adamplonka]

I don't know which defaults are we talking about but for me mica in WinUIEx is way too bluish. Here's the comparison of WinUIEx defaults and mica used in system applications (for example notepad settings page):

WinUIEx: Notepad:

Here's the look after using defaults from MicaController:

MicaController default:

Light theme looks the same in all three cases for me:

WinUIEx: Notepad: MicaController default:

[dotMorten]

@plonkaadam nice write up. It’s odd where the blue hue is coming from. It’s literally just a dark gray: https://github.com/dotMorten/WinUIEx/blob/ce3b8d6d270b8124c4f16acc00b694fbc3d2dd9e/src/WinUIEx/SystemBackdrop.cs#L262

[adamplonka]

Looks like it's coming from my wallpaper, it's the default blue windows 11 wallpaper. Changing the wallpaper proves that. In other applications the effect is much more subtle. Interesting thing I found is that it's not possible to get default values from MicaController as it's not reporting the values correctly before setting them first. Executing this code:

mica.LuminosityOpacity = mica.LuminosityOpacity;

Or changing any of color values completely changes the appearance. Looks like overriding any of its properties enables customization mode which is off by default. By using trial and error method I can say that the color values in WinUIEx are correct but the TintOpacity should be set to 0.75 not 0.5 in dark theme. Can we simply not touch the MicaController at all if user doesn't change the values or introduce some flag to enable customization?

[dotMorten]

an we simply not touch the MicaController at all if user doesn't change the values or introduce some flag to enable customization?

I had that in the initial implementation with nullable doubles as values and it was rather ugly. I preferred the explicitness of that the default values are returned and are correct. Code like mica.LuminosityOpacity= mica.LuminosityOpacity; should definitely be a no-op and that's what I found wasn't the case. The current implementation guarantees that.

I am now noticing that Niels was correct and the default isn't right - he did say 0.8, and it's 0.5. I'll change it to 0.8. @PlonkaAdam can you confirm if you set it to 0.8 (close to the .75 you found) it matches perfectly?

[dotMorten]

@niels9001 where do you see the spec in figma? All I see is this:

Btw this made me wonder if we should have some helpers to create the alternative backdrops described:

public class SystemBackdrop
{
  public static AcrylicSystemBackdrop SystemBackdrop.CreateAcrylicAccent();
}

It could also take the application or resource dictionary as a parameter, so it could look up the current brushes.

[adamplonka]

Yes I compared screenshots pixel by pixel now and it matches perfectly on 0.8 setting. I just worry that when for example this proposal https://aka.ms/AAftsr1 passes it will not match the system settings anymore. For me it would be better to not hardcode this value. I guess I'll stick to:

internal class MicaDefaultSystemBackground : MicaSystemBackdrop
{
    protected override void UpdateController(ISystemBackdropController controller, SystemBackdropTheme theme)
    {
        // keep system defaults
    }
}

for now.

[dotMorten]

Seems like the WinAppSDK should be able to return the defaults, and we could initialize them with those defaults. However the biggest problem is we can't actually get at the backdrop objects until they are created, which can only happen later, and only on Windows 11.

[dotMorten]

...my main goal here is to get comments like Niels':

Love the easy to use backdrops!

So I still have to balance all this with a much easier to use API than what WinAppSDK currently delivers (hopefully they'll actually address this - my hope for WinAppSDK is that WinUIEx isn't needed at all at some point)

[niels9001]

Aah.. It seems that the internal design kit provides the Acrylic recipe where as the public version does not (yet). Anyways, they are as I defined in the XAML screenshots at the top 😊.

I actually used those Acrylic values in a new PowerToys tool that uses WinUIEx for the Toolbar - check out the GIF here: https://github.com/microsoft/PowerToys/pull/19701

(As you can see, this mimics the Snipping Tool acrylic 1:1 😊!

[dotMorten]

@niels9001 I spent some additional time in 2.0 to ensure that the defaults Acrylic and Mica/MicaAlt is using matches exactly the defaults of the WinAppSDK Controllers for both dark and light mode. I'm still not getting the Acrylic values you listed - would you mind checking v2.0 and see if the default acrylic now matches your expectation?

[niels9001]

@dotMorten Just upgraded to 2.1 to test and these are the results:

When looking at the default Acrylic that comes with WinUIEx I'm seeing the following values:

I also saw that my Acrylic snippet mentioned in the original post is not correct (I've replaced it now to avoid confusion). When looking at the Windows Visual Library and the values defined in the WinUI 2 repo these would be the correct values (to mimic the AcrylicBackgroundFillColorBaseBrush):

I created a little overview to show all parameters.. As you can see the colors are the same for Mica/Acrylic, but the Tint Opacity/ Luminosity Opacity/Fall back color is different:

You can find the AcrylicBackgroundFillColorBaseBrush here: https://github.com/microsoft/microsoft-ui-xaml/blob/fc4900a7420f98c69787f5d6de133b6dc32c6379/dev/Materials/Acrylic/AcrylicBrush_19h1_themeresources.xaml

Could it be that the values that come with the WinAppSDK Controller are actually different than AcrylicBackgroundFillColorBaseBrush (which is used as the bottom most layer)?

[Jay-o-Way]

my hope for WinAppSDK is that WinUIEx isn't needed at all at some point

Could not agree more! 💙

[dotMorten]

Closing now that backdrop APIs are in Windows App SDK and deprecated in WinUIEx