Documentation
API Reference
Tutorials
Troubleshooting
Avalonia styling system is a mix of XAML and CSS styling approaches, so developers with knowledge of only one of these technologies can be confused by details of another one.
Let's imagine a problem when one or all style setters are not applied to the control. Below we will list common possible reasons and solutions.
Selector targets a control that doesnt exist
Avalonia selectors, like CSS selectors, do not raise any errors or warnings, when there are no controls which can be matched by the selector. This includes using a name or class that doesnt exist or a child selector when there are no children to match the inner selector. The reason is simple, one style can target many controls, that can be created or removed at runtime, so there is no possible way to validate the selector.
Target property is overridden by another style
Styles are applied in order of declaration. If there are multiple style files that target the same control property, one style can override the other:
Styles2.axaml
1
<Style Selector="TextBlock.header">
2
<Style Property="Foreground" Value="Green" />
3
</Style>
Copied!
Styles1.axaml
1
<Style Selector="TextBlock.header">
2
<Style Property="Foreground" Value="Blue" />
3
<Style Property="FontSize" Value="16" />
4
</Style>c
Copied!
App.axaml
1
<StyleInclude Source="Style1.axaml" />
2
<StyleInclude Source="Style2.axaml" />
Copied!
Here styles from file Styles1.axaml were applied first, so setters in styles of file **Styles2.axaml **take priority. The resulting TextBlock will have FontSize="16" and Foreground="Green". The same order prioritisation happens within style files also.
Locally set Properties override Styles
Similarly, to WPF, Avalonia properties can have multiple values, often of different priorities.
In this example you can see that local value (defined directly on the control) has higher priority than style value, so text block will have red foreground:
1
<TextBlock Classes="header" Foreground="Red" />
2
...
3
<Style Selector="TextBlock.header">
4
<Setter Property="Foreground" Value="Green" />
5
</Style>
Copied!
You can see the full list of value priorities in the BindingPriority enum, where lower enum values have higher priority. For example
Animation values have the highest priority and even override local values.Some default Avalonia styles use local values in their templates instead of template bindings or styles-setters, which makes it impossible to update template property without replacing whole template.
Missing style pseudoclass (trigger) selector
Let's imagine a situation in which you might expect a second style to override previous one, but it doesn't:
1
<Style Selector="Border:pointerover">
2
<Setter Property="Background" Value="Blue" />
3
</Style>
4
<Style Selector="Border">
5
<Setter Property="Background" Value="Red" />
6
</Style>
7
...
8
<Border Width="100" Height="100" Margin="100" />
Copied!
With this code example the
Border has a Red background normally and Blue when the pointer is over it. This is because as with CSS more specific selectors have precedence. It is an issue, when you want to override default styles of any state (pointerover, pressed or others) with a single style. To achieve it you will need to have new styles for these states as well.Visit the Avalonia source code to find the original templates when this happens and copy and paste the styles with psuedoclasses into your code.
Selector with a pseudoclass doesn't override the default
The following code example of styles that can be expected to work on top of default styles:
1
<Style Selector="Button">
2
<Setter Property="Background" Value="Red" />
3
</Style>
4
<Style Selector="Button:poinverover">
5
<Setter Property="Background" Value="Blue" />
6
</Style>
Copied!
You might expect the
Button to be red by default and blue when pointer is over it. In fact, only setter of first style will be applied, and second one will be ignored.1
<Style Selector="Button">
2
<Setter Property="Background" Value="{DynamicResource ButtonBackground}"/>
3
<Setter Property="Template">
4
<ControlTemplate>
5
<ContentPresenter Name="PART_ContentPresenter"
6
Background="{TemplateBinding Background}"
7
Content="{TemplateBinding Content}"/>
8
</ControlTemplate>
9
</Setter>
10
</Style>
11
<Style Selector="Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
12
<Setter Property="Background" Value="{DynamicResource ButtonBackgroundPointerOver}" />
13
</Style>
Copied!
The actual background is rendered by a
ContentPresenter, which in the default is bound to the Buttons Background property. However in the pointer-over state the selector is directly applying the backgroun to the ContentPresenter (Button:pointerover /template/ ContentPresenter#PART_ContentPresenter) That's why when our setter was ignored in the previous code example. The corrected code should target content presenter directly as well:1
<!-- Here #PART_ContentPresenter name selector is not necessary, but was added to have more specific style -->
2
<Style Selector="Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
3
<Setter Property="Background" Value="Blue" />
4
</Style>
Copied!
You can see this behavior for all controls in the default themes (both old Default and the new Fluent), not just Button. And not just for Background, but also other state-dependent properties.
Why default styles change the ContentPresenter
Background property directly instead of changing theButton.Backgroundproperty?This is because if the user were to set a local value on the button, it would override all styles, and make button always the same color. For more details see this reverted PR.
Previous value of specific properties is not restored when style is not applied anymore
In Avalonia we have multiple types of properties, and one of them, Direct Property, doesn't support styling at all. These properties work in simplified way to achive lower overhead and higher performance, and do not store multiple values depending on priority. Instead only latest value is saved and cannot be restored. You can find more details about properties here.
Typical example is CommandProperty. It is defined as a DirectProperty, and it will never work properly. In the future attempt to style direct property will be resulted in compile time error, see #6837.
Last modified 26d ago
Export as PDF
Copy link
Contents
Selector targets a control that doesnt exist
Target property is overridden by another style
Locally set Properties override Styles
Missing style pseudoclass (trigger) selector
Selector with a pseudoclass doesn't override the default
Previous value of specific properties is not restored when style is not applied anymore