xaml - Avalonia UI use Button.myclass:pointerover to override Button:pointerover - Stack Overflow

I managed to override properties of a button class using styles:

<Style Selector="Button.icononly">
  <Setter Property="Background" Value="Yellow"/>
</Style>
<Style Selector="Button">
  <Setter Property="Background" Value="Green"/>
</Style>

<Button Classes="icononly"/> 
<Button />

Both show their correct colors.

Now, the part that doesn't work:

<Style Selector="Button.icononly:pointerover /template/ ContentPresenter">
  <Setter Property="Background" Value="Blue"/>
</Style>
<Style Selector="Button:pointerover /template/ ContentPresenter">
  <Setter Property="Background" Value="Red"/>
</Style>

Both buttons are red on hover. But, I expect that icononly button should be blue in :pointerover state. This only works if I don't override the :pointerover of all the buttons (leave out the last 3 lines).

I don't understand how overriding the regular state isn't a problem, it prefers the specific class over none defined, as I would expect. For :pointerover it prefers the other one.

I managed to override properties of a button class using styles:

<Style Selector="Button.icononly">
  <Setter Property="Background" Value="Yellow"/>
</Style>
<Style Selector="Button">
  <Setter Property="Background" Value="Green"/>
</Style>

<Button Classes="icononly"/> 
<Button />

Both show their correct colors.

Now, the part that doesn't work:

<Style Selector="Button.icononly:pointerover /template/ ContentPresenter">
  <Setter Property="Background" Value="Blue"/>
</Style>
<Style Selector="Button:pointerover /template/ ContentPresenter">
  <Setter Property="Background" Value="Red"/>
</Style>

Both buttons are red on hover. But, I expect that icononly button should be blue in :pointerover state. This only works if I don't override the :pointerover of all the buttons (leave out the last 3 lines).

I don't understand how overriding the regular state isn't a problem, it prefers the specific class over none defined, as I would expect. For :pointerover it prefers the other one.

• xaml
• styling
• avaloniaui
• avalonia

Share Improve this question Follow edited Jan 16 at 18:48 Ibram Reda 2,83322 gold badges1212 silver badges2323 bronze badges asked Jan 16 at 13:39 Frederik SteinmetzFrederik Steinmetz 23122 silver badges88 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Referring to Style Priority in docs

Position of the style in the located styles collection - 'latest' has priority.

the order of style is a matter, so always generic styles should come first and then the more specific styles come after

Here is what you want to do.

<StackPanel>
  <StackPanel.Styles>
    <Style Selector="Button">
      <Setter Property="Background" Value="Green"/>
    </Style>
    <Style Selector="Button.icononly">
      <Setter Property="Background" Value="Yellow"/>
    </Style>      
    <Style Selector="Button:pointerover /template/ ContentPresenter">
      <Setter Property="Background" Value="Red"/>
    </Style>      
    <Style Selector="Button.icononly:pointerover /template/ ContentPresenter">
      <Setter Property="Background" Value="Blue"/>
    </Style>      
  </StackPanel.Styles>

  <Button Classes="icononly" Content="icon only" />
  <Button  Content="normal button" />
</StackPanel>