How to set Style to Expander.Border

[Coloryr]

[thevortexcloud]

Are you trying to change the border of the content in the expander or the expander's border? If it's the former that is not correct. You should not be using /template/. That's for modifying the control template. Instead just target your border inside the expander. If it's the latter that's also not correct. The control has proper template bindings which means you can just set the border properties on it without a /template/ selector.

https://github.com/AvaloniaUI/Avalonia/blob/fcea3453ff62225c4be56cf2569edffc72e7402e/src/Avalonia.Themes.Fluent/Controls/Expander.xaml#L81C16-L82C69.

[robloo]

It's best to use lightweight styling resources for this if you are modifying the header-area.

ExpanderHeaderBackground
ExpanderHeaderBorderBrush

If you are modifying the content-area just use the standard Background and BorderBrush properties. Comments above are correct -- you need to fix the selector.

[ISDHN]

I'd just override the dynamic resource in App.Resources. If you use the Fluent Theme it would be:

<SolidColorBush x:Key="ExpanderHeaderBorderBrush">Red</SolidColorBrush>

Check original styles for the keys to override

Avalonia/src/Avalonia.Themes.Fluent/Controls/Expander.xaml

Line 69 in fcea345

<Setter Property="BorderBrush" Value="{DynamicResource ExpanderHeaderBorderBrush}" />

May I asked why neither the Style nor the ControlTheme works for this?

[robloo]

May I asked why neither the Style nor the ControlTheme works for this?

What do you mean?

1. Style will work to change this if you target the nested border using a selector
2. The Expander control itself only has one border property like other controls. It's more intuitive for that to target the content area instead so we can't use it here.
3. I gave you the lightweight styling resource to modify this without retemplating which was agreed with Microsoft years ago. We follow upstream WinUI here.

What exactly doesn't work?

[ISDHN]

What do you mean?

1. Style will work to change this if you target the nested border using a selector
2. The Expander control itself only has one border property like other controls. It's more intuitive for that to target the content area instead so we can't use it here.
3. I gave you the lightweight styling resource to modify this without retemplating which was agreed with Microsoft years ago. We follow upstream WinUI here.

What exactly doesn't work?

Both

<Style Selector="Expander /template/ Border#ToggleButtonBackground">
	<Setter Property="Background" Value="#2F2F2F"/>
</Style>

in Application.Styles
and

<ControlTheme x:Key="{x:Type Expander}" BasedOn="{StaticResource {x:Type Expander}}" TargetType="Expander">
	<Style Selector="^ /template/ Border#ToggleButtonBackground">
		<Setter Property="Background" Value="#2F2F2F"/>
	</Style>
</ControlTheme>

in Application.Resource doesn't work.

[robloo]

It's nested, you have to target the ToggleButton control template inside the Expander control template itself.

That said, the control theme changes dynamically so that may be an undefined edge case. I would still expect it to work though if you don't change the expand direction after initialization.

Avalonia/src/Avalonia.Themes.Fluent/Controls/Expander.xaml

Line 312 in f7feaba

<Setter Property="Theme" Value="{DynamicResource FluentExpanderToggleButtonLeftTheme}" />

[ISDHN]

Ok, I see. Thank you.