Selectors
XAML
C#
<Style Selector="Button">
<Style Selector="local|Button">
new Style(x => x.OfType<Button>());
new Style(x => x.OfType(typeof(Button)));
Selects a control by type. The first example above selects the
Avalonia.Controls.Button
class. To include a XAML namespace in the type separate the namespace and the type with a |
character.Note the type of an object is actually determined by looking at its
IStyleable.StyleKey
property. By default this simply returns the type of the current instance, but if, for example, you do want your control which inherits from Button
to be styled as a Button
, then you can implement the IStyleable.StyleKey
property on your class to return typeof(Button)
.XAML
C#
<Style Selector="#myButton">
<Style Selector="Button#myButton">
new Style(x => x.Name("myButton"));
new Style(x => x.OfType<Button>().Name("myButton"));
XAML
C#
<Style Selector="Button.large">
<Style Selector="Button.large:focus">
new Style(x => x.OfType<Button>().Class("large"));
new Style(x => x.OfType<Button>().Class("large").Class(":focus"));
Selects a control with the specified style classes. Multiple classes should be separated with a
.
character, or a :
character in the case of pseudoclasses. If multiple classes are specified then the control must have all of the requested classes present in order to match.XAML
C#
<Style Selector=":is(Button)">
<Style Selector=":is(local|Button)">
new Style(x => x.Is<Button>());
new Style(x => x.Is(typeof(Button)));
Again, the type of an object is actually determined by looking at its
IStyleable.StyleKey
property.XAML
C#
<Style Selector="StackPanel > Button">
new Style(x => x.OfType<StackPanel>().Child().OfType<Button>());
A child selector is defined by separating two selectors with a
>
character. This selector matches direct children in the logical tree, so in the example above the selector will match any Button
that is a direct logical child of a StackPanel
.XAML
C#
<Style Selector="StackPanel Button">
new Style(x => x.OfType<StackPanel>().Descendant().OfType<Button>());
When two selectors are separated by a space, then the selector will match descendants in the logical tree, so in this case the selector will match any
Button
that is a logical descendant of a StackPanel
.XAML
C#
<Style Selector="Button[IsDefault=true]">
new Style(x => x.OfType<Button>().PropertyEquals(Button.IsDefaultProperty, true));
Matches any control which has the specified property set to the specified value.
Note: When using a
AttachedProperty
in selectors inside XAML, it has to be wrapped in parenthesis.<Style Selector="TextBlock[(Grid.Row)=0]">
XAML
C#
<Style Selector="Button /template/ ContentPresenter">
new Style(x => x.OfType<Button>().Template().OfType<ContentPresenter>());
Matches a control in a control template. All other selectors listed here work on the logical tree. If you wish to select a control in a control template then you must use this selector. The example selects
ContentPresenter
controls in the templates of Button
s.XAML
C#
<Style Selector="TextBlock:not(.h1)">
new Style(x => x.OfType<TextBlock>().Not(y => y.Class("h1")));
Negates an inner selector.
XAML
C#
<Style Selector="TextBlock, Button">
new Style(x => Selectors.Or(x.OfType<TextBlock>(), x.OfType<Button>()))
Finds the elements that match any of these selectors. Each selector is separated by ",".
XAML
C#
<Style Selector="TextBlock:nth-child(2n+3)">
new Style(x => x.OfType<TextBlock>().NthChild(2, 3));
Matches elements based on their position in a group of siblings.
XAML
C#
<Style Selector="TextBlock:nth-last-child(2n+3)">
new Style(x => x.OfType<TextBlock>().NthLastChild(2, 3));
Matches elements based on their position among a group of siblings, counting from the end.
:nth-child()
and :nth-last-child()
takes a single argument that describes a pattern for matching element indices in a list of siblings. Element indices are 1-based. Below samples use :nth-child()
, but also applicable for :nth-last-child()
.odd
Represents elements whose index in a series of siblings is odd: 1, 3, 5, etc.even
Represents elements whose index in a series of siblings is even: 2, 4, 6, etc.An+B
Represents elements in a list whose indices match those found in a custom pattern of numbers, defined by An+B, where:A
is an integer step size,B
is an integer offset,n
is all non-negative integers, starting from 0.
It can be understood as every
A
th element starting from B
thExample | Representation |
---|---|
:nth-child(odd) | The odd elements: 1, 3, 5, etc. |
:nth-child(even) | The even elements: 2, 4, 6, etc. |
:nth-child(2n+1) | The odd elements: 1(2×0+1), 3(2×1+1), 5(2×2+1), etc. equivalent to :nth-child(odd) |
:nth-child(2n) | The even elements: 2(2×1), 4(2×2), 6(2×3), etc. equivalent to :nth-child(even) . Notice that 0(2×0) a valid notation, however it's not matching any element since index starts from 1. |
:nth-child(7) | The 7th element |
:nth-child(n+7) | Every element start from 7th: 7(0+7), 8(1+7), 9(2+7), etc |
:nth-child(3n+4) | Every 3rd element start from 4th: 4(3×0+4), 7(3×1+4), 10(3×2+4), 13(3×3+4), etc |
:nth-child(-n+3) | First 3 elements: 3(-1×0+3), 2(-1×1+3), 1(-1×2+3). All subsequent indices are less than 1 so they are not matching any elements. |
Last modified 1mo ago