Getting rid of the highlight effect

UWP adds highlighting when a button is pressed, in my case a translucent grey fill over the button. If you don’t want it it turned out there wasn’t a simple setting to turn it off. For instance, none of these worked:

        <Style x:Key="btnTransparent" TargetType="Button">
            <Setter Property="Background" Value="#00000000" />
            <Setter Property="Foreground" Value="#00000000"/>
            <Setter Property="UseSystemFocusVisuals" Value="False" />
            <Setter Property="AllowFocusOnInteraction" Value="False" />
            <Setter Property="FocusVisualPrimaryBrush" Value="#00000000"/>
            <Setter Property="FocusVisualSecondaryBrush" Value="#00000000"/>
            <Setter Property="Opacity" Value="100%"/>
            <Setter Property="BorderThickness" Value="0" />
        </Style>

This worked….but the button then no longer works of course!

            <Setter Property="Visibility" Value="Collapsed"/>

1 – Moving focus to another UI element

This worked, but there was still a noticeable delay where the effect appear briefly:

	private void CoreWindow_PointerPressed(Windows.UI.Core.CoreWindow sender, Windows.UI.Core.PointerEventArgs args)
	{
		try
		{
			//Flag that keypress has been handled (to stop it repeating forever)
			args.Handled = true;
			
			//Move the focus onto a different control to remove the grey highlghting of a wrong UI element 
			Button_Setup.Focus(FocusState.Programmatic);	//<<<This works, but you still get a very brief flash of the semi transparent grey highlight on a wrong button if bad screen coords align with it
		}
		catch (Exception ex)
		{
			System.Diagnostics.Debug.WriteLine("Exception: " + ex.Message);
		}
	}

2 – Overriding the style in the pages xaml

This worked….nearly perfectly. The effect was nearly gone, but you’d still get an occasional very brief flicker of the translucent grey appearing. It was like there was a conflict in the system starting the default effect and then this setting kicking in and stopping it. Much better than the CoreWindow_PointerPressed() approach, but not perfect.

This is added inside you .xaml <Page area (top of the .xaml file):

    <Page.Resources>
        <StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="SystemControlBackgroundTransparentRevealBorderBrush" />
        <StaticResource x:Key="ButtonForegroundPressed" ResourceKey="SystemControlBackgroundTransparentRevealBorderBrush" />
        <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="SystemControlBackgroundTransparentRevealBorderBrush" />
        <StaticResource x:Key="ButtonForegroundPointerOver" ResourceKey="SystemControlBackgroundTransparentRevealBorderBrush" />
    </Page.Resources>

3 – Override the ButtonBackgroundPressed theme resource

This gave the best result, still not 100% perfect, but very nearly. Very occasionally you’d get the briefest flash, but most of the time it is gone.

	private void Page_Loaded(object sender, RoutedEventArgs e)
	{

		try
		{
			this.Resources["ButtonBackgroundPressed"] = new SolidColorBrush(Colors.Transparent);

The best solution

Using both 2 and 3 worked really well, the combination of them seemed to pretty much eradicate the effect from being seen.