How to remove the thick focus border from controls in MAUI?

user_217823 0
Viewed 130

I'm using the default MAUI application generated by Visual Studio as a starting point. I have added custom focus borders for VisualState Focused and it works fine when focusing with the mouse. However, when navigating the form with Tab key, the default black frame appears around the focused buttons.

button with black frame

Some WinUI articles suggest that UseSystemFocusVisuals should work. So I have done the following in my App.xaml in Windows folder:

<maui:MauiWinUIApplication.Resources>
    <x:Boolean x:Key="UseSystemFocusVisuals">False</x:Boolean>
    <Thickness x:Key="TextControlBorderThemeThickness">0</Thickness>
    <Thickness x:Key="TextControlBorderThemeThicknessFocused">0</Thickness>
</maui:MauiWinUIApplication.Resources>

Unfortunately, it did not work on Buttons. However, at least the TextControl settings worked for Entry elements. So, in general, the Resources section is being applied, it's just that UseSystemFocusVisuals seems to have no effect on Button controls. Checkboxes and radios have the same problem.

How do I get rid of these globally, without extending all the controls?

maui winui-3 xaml .net
1 Answers

After some digging and experimenting, I found a workaround:

    <Style TargetType="Button">
        <Setter Property="UseSystemFocusVisuals" Value="False"/>
    </Style>

    <Style TargetType="CheckBox">
        <Setter Property="UseSystemFocusVisuals" Value="False"/>
    </Style>

    <Style TargetType="RadioButton">
        <Setter Property="UseSystemFocusVisuals" Value="False"/>
    </Style>

So, the global UseSystemFocusVisuals did not work but it started working when I added it to each control style separately.

user_2178230
Related