The Fluent Design System introduced by Windows 10 from v1709 is very beautiful, the latest v1809 further refined FDS, many UWP built in controls got FDS effect by default while developers do not need to do anything. This is usually a good thing, but it can also cause performance problems for some apps. My Character Map UWP is one of the victimized apps, and let's take a look at how to remove the default FDS effect in a UWP app to avoid performance issues.

The Problem

The specific problem is that Character Map UWP has is that the same version, the same code, can run smoothly on Windows 1809 v1803, but and after upgrading to 1908, even scrolling a little bit on he page, select a few characters can immediately stuck the App.

A few days ago, I received an email from a user saying that just turning off the transparency in Windows 10 personalization settings, that is, turning off all FDS, would allow the app to resume responding.

The main performance impact is the GridViewItem and ListViewItem got the reveal effect, which is one of the effects of FDS. That is, when the mouse moves onto the element, the surrounding border is highlighted. In my Character Map UWP, this affects performance, mainly because GridView shows hundreds of or even tens of thousands of characters, this is way too much for the FDS to render.

Fixing the Problem

On Windows 10 v1809, the reveal effects of GridViewItem and ListViewItem are turned on by default, it do not require any designation from the developer, and do not require updating the code of the old app, it will appear automatically. However, it is not so straightforward to turn off.

The way to turn off the default reveal effect is to rewrite several brush key in the system, and for my application, I need to rewrite these keys:

<SolidColorBrush x:Key="SystemControlTransparentRevealBackgroundBrush" Color="Transparent" />
<SolidColorBrush x:Key="SystemControlTransparentRevealBorderBrush" Color="Transparent" />
<SolidColorBrush x:Key="GridViewItemRevealBorderBrush" Color="Transparent" />
<Thickness x:Key="ListViewItemRevealBorderThemeThickness">0</Thickness>
<Thickness x:Key="GridViewItemRevealBorderThemeThickness">0</Thickness>
<SolidColorBrush x:Key="ListViewItemRevealBackgroundSelectedPressed" Color="Transparent" />
<SolidColorBrush x:Key="ListViewItemRevealPlaceholderBackground" Color="Transparent" />
<SolidColorBrush x:Key="GridViewItemRevealBackground" Color="Transparent" />
<SolidColorBrush x:Key="GridViewItemRevealBackgroundPointerOver" Color="Transparent" />
<SolidColorBrush x:Key="GridViewItemRevealBackgroundPressed" Color="Transparent" />
<SolidColorBrush x:Key="GridViewItemRevealBackgroundSelected" Color="Transparent" />
<SolidColorBrush x:Key="GridViewItemRevealBackgroundSelectedPointerOver" Color="Transparent" />
<SolidColorBrush x:Key="GridViewItemRevealBackgroundSelectedPressed" Color="Transparent" />
<SolidColorBrush x:Key="GridViewItemRevealPlaceholderBackground" Color="Transparent" />

Now run the app and you'll find that the reveal effect is gone and the overall experience is very good.

How did I Find These Keys

As for how these keys were found, it's actually very simple, after you install the UWP SDK, all the system's brush and other style definitions of the controls are in this file:

C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.17763.0\Generic\generic.xaml

Open ths file and search for "Reveal", you can find everything: