0

After following this post: How to use Acrylic Accent in Windows 10 Creators Update?

I've successfully added acrylic to my app on the Creators Update. Unfortunately, when transparency is disabled in the color settings in Windows, my app's background is either a very dark gray in the Light Theme or almost completely pitch black in dark Theme despite the fact that I set the background of my grid that's above the relative panel that makes the window transparent to: Background="{ThemeResource CommandBarBackground}".

Does anyone know how to implement the fallback color in the creators update so that when transparency is disabled, the background switches to the original background color that was set.

Vijay Nirmal
  • 5,239
  • 4
  • 26
  • 59
Colin Kiama
  • 44
  • 7
  • Looking at your answer, it says that it was using Windows 10 SDK 16190. I don't think it applies in the Creators Update SDK (15063) since there is no Acrylic Brush available in the Creators Update. – Colin Kiama Jul 10 '17 at 11:24
  • Oh sorry, yeah that is only available in *Fall* Creators Update. One way you can probably try is to subscribe to `Window.Current.Activated` and when `WindowActivationState` is `Deactivated`, show another background on top of your blur. – Justin XL Jul 10 '17 at 11:36
  • @JustinXL Your suggestion did help a bit because now the correct colors are showing when the app is not in focus. Unfortunately, when the app is in focus again, it shows the incorrect colors. – Colin Kiama Jul 10 '17 at 13:34
  • I wonder why it shows incorrect colors. You should have a rectangle that overlays your blur element and use the rectangle as a fallback background. – Justin XL Jul 10 '17 at 13:40
  • @ColinKiama are you trying to add transparency to XAML screens ? Is that option available in Creator's update? – Apoorv Jul 10 '17 at 14:02
  • @Apoorv I've already added transparency, there is a way for you to add it in the Creator's Update and it's discussed in the link the post I linked on this post. – Colin Kiama Jul 10 '17 at 14:52
  • @JustinXL It turns out I did forget the second rectangle, setting its the background does work as a fallback color but the transparency effect won't be easily visible without the Alpha value and/or background opacity being reduced. It would be great if there was a way to detect when the transparent effects are enabled on the user's device or not. – Colin Kiama Jul 10 '17 at 16:05

1 Answers1

1

Does anyone know how to implement the fallback color in the creators update so that when transparency is disabled, the background switches to the original background color that was set.

There is an AdvancedEffectsEnabled property in U​ISettings Class which indicates whether the system Transparency effects setting is enabled. When it returns false, you can reset the background to the original background color.

And there is also an AdvancedEffectsEnabledChanged event occurs when the system advanced UI effects setting is enabled or disabled. You can combine this event with AdvancedEffectsEnabled property and use them like the following:

UISettings uiSettings = new UISettings();
uiSettings.AdvancedEffectsEnabledChanged += UiSettings_AdvancedEffectsEnabledChangedAsync;

private async void UiSettings_AdvancedEffectsEnabledChangedAsync(UISettings sender, object args)
{
    if (sender.AdvancedEffectsEnabled)
    {
        await this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
        {
            //TODO: Apply Acrylic Accent
        });
    }
    else
    {
        await this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
        {
            //TODO: Reset Background
        });
    }
}

Please note, AdvancedEffectsEnabledChanged event may not raised in UI thread. To change the background color, we will need Core​Dispatcher.RunAsync method.

Jay Zuo
  • 15,653
  • 2
  • 25
  • 49