Can focus rectangle be removed when tabbing to rounded button?

[TangDave]

(Windows - Avalonia 11.2.0)
I have rounded buttons, but when tabbing between window controls they get a rectangle on focus.
I'd like to either remove the rectangle or perhaps change it to the same shape as the button but with a different border style (same as an html rounded button default behavior).

Using a nested style selector on 'focus-visible' I can change some properties, but 'CornerRadius' doesn't change the focus rectangle.

[msneijders]

Given you are using Avalonia.Theme.Fluent (or Simple): The focus rectangle you see on the button, is not part of the button itself, but is coming from the AdornerLayer component, specifically its property DefaultFocusAdorner.

The AdornerLayer has a ControlTheme defined for it like so:

<ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:ClassModifier="internal">
    <Thickness x:Key="SystemControlFocusVisualMargin">0</Thickness>
    <Thickness x:Key="SystemControlFocusVisualPrimaryThickness">2</Thickness>
    <Thickness x:Key="SystemControlFocusVisualSecondaryThickness">1</Thickness>

    <ControlTheme x:Key="{x:Type AdornerLayer}" TargetType="AdornerLayer">
        <Setter Property="DefaultFocusAdorner">
            <FocusAdornerTemplate>
                <Border
                    Margin="{DynamicResource SystemControlFocusVisualMargin}"
                    BorderBrush="{DynamicResource SystemControlFocusVisualPrimaryBrush}"
                    BorderThickness="{DynamicResource SystemControlFocusVisualPrimaryThickness}">
                    <Border BorderBrush="{DynamicResource SystemControlFocusVisualSecondaryBrush}" BorderThickness="{DynamicResource SystemControlFocusVisualSecondaryThickness}" />
                </Border>
            </FocusAdornerTemplate>
        </Setter>
    </ControlTheme>
</ResourceDictionary>

Overwrite this default DefaultFocusAdorner to what you like it to be. Or maybe just overwrite resource SystemControlFocusVisualPrimaryThickness and set it to 0.

One way to change SystemControlFocusVisualPrimaryThickness in your app but keep using all of Fluent theme:

In your app.xaml file:

<Application>
   <Application.Resources>
      <Thickness x:Key="SystemControlFocusVisualPrimaryThickness">0</Thickness>
   </Application.Resources>
</Application>

[TangDave]

How do you limit the app.xaml suggestion to just buttons?

[msneijders]

A control (like the Button) has a property FocusAdorner you can set -- if its not set you get the DefaultFocusAdorner as mentioned above.

Use something like:

        <Style Selector="Button">
            <Setter Property="FocusAdorner" />
        </Style>

Or override the default ControlTheme of the button which sets this property.

[TangDave]

Thanks - the following worked:

<Style Selector="Button.MyCustomButton">
	<Setter Property="FocusAdorner">
		<FocusAdornerTemplate>
			<Border BorderThickness="0" />
		</FocusAdornerTemplate>
	</Setter>
</Style>