Skip to main content
Version: 11.0.x

Style Selectors

Avalonia UI uses style selectors to match controls using a custom XAML syntax.

info

If you are familiar with the CSS (Cascading Style Sheets) technology, then you will recognise this syntax as being very similar.

Here is a list of some example style selectors:

Style SelectorDescription
ButtonSelects all Button (class) controls.
Button.redSelects all Button controls with the red style class defined.
Button.red.largeSelects all Button controls with the red and large style classes defined.
Button:focusSelects all Button controls with the :focus pseudo class active.
Button.red:focusSelects all Button controls with the red style class and the :focus pseudo class active.
Button#myButtonSelects a Button control with the Name (attribute) defined as "myButton".
StackPanel Button.xlSelects all Button (class) controls with the xlclass defined; that are also descendants at any level of a StackPanel (class) control.
StackPanel > Button.xlSelects all Button (class) controls with the xlclass defined; that are also a direct descendant of a StackPanel (class) control.
Button /template/ ContentPresenterSelects all ContentPresenter (class) controls inside a template of a Button (class) control.

For a full description of these style selector formats, and more, see the reference here.