{"id":1362,"date":"2025-02-19T14:04:42","date_gmt":"2025-02-19T14:04:42","guid":{"rendered":"https:\/\/ibex.tech\/csharp\/?p=1362"},"modified":"2025-02-19T14:10:25","modified_gmt":"2025-02-19T14:10:25","slug":"button-pressed-ui-highlight","status":"publish","type":"post","link":"https:\/\/ibex.tech\/csharp\/uwp-programming-in-c\/windows-and-pages\/pages\/button-pressed-ui-highlight","title":{"rendered":"Button pressed UI highlight"},"content":{"rendered":"\n

Getting rid of the highlight effect<\/h4>\n\n\n\n

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:<\/p>\n\n\n\n

        <Style x:Key=\"btnTransparent\" TargetType=\"Button\">\n            <Setter Property=\"Background\" Value=\"#00000000\" \/>\n            <Setter Property=\"Foreground\" Value=\"#00000000\"\/>\n            <Setter Property=\"UseSystemFocusVisuals\" Value=\"False\" \/>\n            <Setter Property=\"AllowFocusOnInteraction\" Value=\"False\" \/>\n            <Setter Property=\"FocusVisualPrimaryBrush\" Value=\"#00000000\"\/>\n            <Setter Property=\"FocusVisualSecondaryBrush\" Value=\"#00000000\"\/>\n            <Setter Property=\"Opacity\" Value=\"100%\"\/>\n            <Setter Property=\"BorderThickness\" Value=\"0\" \/>\n        <\/Style><\/code><\/pre>\n\n\n\n
This worked….but the button then no longer works of course!<\/p>\n\n\n\n
            <Setter Property=\"Visibility\" Value=\"Collapsed\"\/><\/code><\/pre>\n\n\n\n
1 – Moving focus to another UI element<\/h5>\n\n\n\n
This worked, but there was still a noticeable delay where the effect appear briefly:<\/p>\n\n\n\n
\tprivate void CoreWindow_PointerPressed(Windows.UI.Core.CoreWindow sender, Windows.UI.Core.PointerEventArgs args)\n\t{\n\t\ttry\n\t\t{\n\t\t\t\/\/Flag that keypress has been handled (to stop it repeating forever)\n\t\t\targs.Handled = true;\n\t\t\t\n\t\t\t\/\/Move the focus onto a different control to remove the grey highlghting of a wrong UI element \n\t\t\tButton_Setup.Focus(FocusState.Programmatic);\t\/\/<<<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\n\t\t}\n\t\tcatch (Exception ex)\n\t\t{\n\t\t\tSystem.Diagnostics.Debug.WriteLine(\"Exception: \" + ex.Message);\n\t\t}\n\t}<\/code><\/pre>\n\n\n\n
2 – Overriding the style in the pages xaml<\/h5>\n\n\n\n
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.<\/p>\n\n\n\n
This is added inside you .xaml <Page area (top of the .xaml file):<\/p>\n\n\n\n
    <Page.Resources>\n        <StaticResource x:Key=\"ButtonBackgroundPressed\" ResourceKey=\"SystemControlBackgroundTransparentRevealBorderBrush\" \/>\n        <StaticResource x:Key=\"ButtonForegroundPressed\" ResourceKey=\"SystemControlBackgroundTransparentRevealBorderBrush\" \/>\n        <StaticResource x:Key=\"ButtonBackgroundPointerOver\" ResourceKey=\"SystemControlBackgroundTransparentRevealBorderBrush\" \/>\n        <StaticResource x:Key=\"ButtonForegroundPointerOver\" ResourceKey=\"SystemControlBackgroundTransparentRevealBorderBrush\" \/>\n    <\/Page.Resources><\/code><\/pre>\n\n\n\n
3 – Override the ButtonBackgroundPressed theme resource<\/h5>\n\n\n\n
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.<\/p>\n\n\n\n
\tprivate void Page_Loaded(object sender, RoutedEventArgs e)\n\t{\n\n\t\ttry\n\t\t{\n\t\t\tthis.Resources[\"ButtonBackgroundPressed\"] = new SolidColorBrush(Colors.Transparent);<\/code><\/pre>\n\n\n\n
The best solution<\/h5>\n\n\n\n
Using both 2 and 3 worked really well, the combination of them seemed to pretty much eradicate the effect from being seen.<\/p>\n","protected":false},"excerpt":{"rendered":"
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: This worked….but the button then no longer works […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[145,75],"tags":[],"class_list":["post-1362","post","type-post","status-publish","format-standard","hentry","category-buttons-uwp-programming-in-c","category-pages"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/posts\/1362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/comments?post=1362"}],"version-history":[{"count":3,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/posts\/1362\/revisions"}],"predecessor-version":[{"id":1367,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/posts\/1362\/revisions\/1367"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/media?parent=1362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/categories?post=1362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/csharp\/wp-json\/wp\/v2\/tags?post=1362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}