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 Selector	Description
`Button`	Selects all `Button` (class) controls.
`Button.red`	Selects all `Button` controls with the `red` style class defined.
`Button.red.large`	Selects all `Button` controls with the `red` and `large` style classes defined.
`Button:focus`	Selects all `Button` controls with the `:focus` pseudo class active.
`Button.red:focus`	Selects all `Button` controls with the `red` style class and the `:focus` pseudo class active.
`Button#myButton`	Selects a `Button` control with the `Name` (attribute) defined as `"myButton"`.
`StackPanel Button.xl`	Selects all `Button` (class) controls with the `xl`class defined; that are also descendants at any level of a `StackPanel` (class) control.
`StackPanel > Button.xl`	Selects all `Button` (class) controls with the `xl`class defined; that are also a direct descendant of a `StackPanel` (class) control.
`Button /template/ ContentPresenter`	Selects 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.