CODEWITHSUNDEEP
buttonflickermousehoveravalonia
Reto Truninger
Reto Truninger

Reputation: 1

Button:pointerover flicker after upgrade to latest Avalonia version (11.0.4)

I've got the following button Style selector in my app.axaml:

<Style Selector="Button.RoundedButton" >
  <Setter Property="Margin" Value="5,5,5,5"/>
  <Setter Property="Height" Value="50"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <Panel>
          <Image Source="\Resources\Bitmaps\Buttons\BtnRoundedNormal.png" Classes="SetupButtonImage"/>
          <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{TemplateBinding Content}"></TextBlock>
        </Panel>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style Selector="Button.RoundedButton:pointerover" >
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <Panel>

          <Image Source="\Resources\Bitmaps\Buttons\BtnRoundedHover.png" Classes="SetupButtonImage"/>
          <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{TemplateBinding Content}"></TextBlock>
        </Panel>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
<Style Selector="Button.RoundedButton:pressed" >
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <Panel>
          <Image Source="\Resources\Bitmaps\Buttons\BtnRoundedPushed.png" Classes="SetupButtonImage"/>
          <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Orange" Text="{TemplateBinding Content}"></TextBlock>
        </Panel>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

and then I create a button from this template in my MainWindow.axaml:

  <Button  DockPanel.Dock="Left"  HorizontalAlignment="Left"  Classes="RoundedButton" x:Name="MyButton"     Width="100" Content="Current +"       Click="MyButtonClicked"/>

This used to work well until I upgraded today to the latest avalonia version (11.0.4) and now the button flickers when the mouse is hovering over it. The button is also not very responsive, I have to press it for quite a while until it calls the click event handler.

Any ideas what caused this and how to fix it?

I tried with different Themes (FluentTheme and SimpleTheme), still flickers.

Upvotes: 0

Views: 694

Answers (1)

Tarazed
Tarazed

Reputation: 2675

Don't set the template in the event based pseudoclass selectors (such as pointerover). Set the template in the main style and and change properties of the underlying template controls with another selector.

For example:

<Style Selector="Button.RoundedButton:pressed /template/ TextBlock">
  <Setter Property="Foreground" Value="Orange"/>
</Style>

Don't be afraid to use multiple styles and selectors with the same pseudoclass to target the TextBlock separately from the Image.

Upvotes: 0

Related Questions