Expander styles broken when using Simple Theme

[jp2masa]

Describe the bug

Expanding an expander breaks its styles. This bug only seems to occur when using the Simple Theme. I could only create a simple repro for pointer over styles not working, although the original bug is that the list box would measure 0 height after the expander is expanded at least once. I believe it's the same bug.

To Reproduce

Steps to reproduce the behavior:

1. Clone branch https://github.com/jp2masa/Avalonia/tree/styles-bug-repro
2. Run Sandbox
3. Expanding any item will break its styles. At least, the border color doesn't change anymore on pointer over

Expected behavior

Expander's border color should change according to pointer over, even after expanding it at least once.

Screenshots

styles-bug-repro.mp4

Desktop (please complete the following information):

• OS: Windows 11
• Version: 6415506

[robloo]

See here: #10237 (comment)

It is likely all related.

[jp2masa]

See here: #10237 (comment)

It is likely all related.

I saw that and thought the same, but then tried reverting the changes in the PR and nothing apparently changed.

[jp2masa]

After investigating a bit more, I suspect it may be related to <Setter Property="Theme" ...>. Fluent theme uses those too, but only for default styles, while simple theme uses those with :expanded pseudoclass, which triggers a theme change and breaks stuff.

Relevant code

Simple theme control template:

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

Line 142 in d8cdac1

Theme="{StaticResource SimpleExpanderToggleButtonRightTheme}" />

Simple theme setter for Theme:

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

Lines 155 to 157 in d8cdac1

	<Style Selector="^:expanded /template/ ToggleButton#PART_toggle">
	<Setter Property="Theme" Value="{StaticResource SimpleExpanderToggleButtonDownTheme}" />
	</Style>

Fluent theme setter for Theme:

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

Lines 314 to 316 in d8cdac1

	<Style Selector="^:down /template/ ToggleButton#ExpanderHeader">
	<Setter Property="Theme" Value="{StaticResource FluentExpanderToggleButtonDownTheme}" />
	</Style>

Additionally, I believe that the theme setter should have no effect because it has lower priority than the local value in the control template, but not sure if priorities behave the same in control themes. Also tried moving from local value to "default" style (i.e. without :expanded, but nothing changed.

[jp2masa]

I think I finally understand what's happening. The template changes, but the selectors are applied before the template is applied, so the styles are applied to the old template and not the new one.

I could fix it by adding ApplyTemplate(); to TemplatedParent.OnControlThemeChanged override, on line 402 here:

Avalonia/src/Avalonia.Controls/Primitives/TemplatedControl.cs

Lines 399 to 412 in 87af060

	private protected override void OnControlThemeChanged()
	{
	base.OnControlThemeChanged();
	var count = VisualChildren.Count;
	for (var i = 0; i < count; ++i)
	{
	if (VisualChildren[i] is StyledElement child &&
	child.TemplatedParent == this)
	{
	child.OnTemplatedParentControlThemeChanged();
	}
	}
	}

Not sure if this is a fix or a hack though, could someone please confirm? Maybe @maxkatz6 or @grokys?