升级至Avalonia 11.0.4后Button:pointerover闪烁及响应迟缓问题

升级至Avalonia 11.0.4版本后，此前正常运行的自定义RoundedButton按钮出现以下问题：

• 鼠标悬停时按钮持续闪烁
• 点击响应迟缓，需长按才能触发Click事件
  更换FluentTheme或SimpleTheme后问题仍存在。

自定义样式代码（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>

按钮使用代码（MainWindow.axaml） #

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

成因分析 #

1. 命中测试异常：自定义模板的根Panel未设置Background="Transparent"，Avalonia 11.x对控件命中测试逻辑做了调整，无背景的元素无法正确捕获鼠标事件，导致状态切换混乱（引发闪烁），同时点击事件无法及时触发。
2. 模板重复渲染：每个状态（normal/pointerover/pressed）都重新定义了完整的ControlTemplate，状态切换时会销毁并重建整个模板，导致频繁渲染引发闪烁，同时延迟了事件响应。

修复方案 #

步骤1：修复基础模板的命中测试 #

给基础模板的根Panel添加Background="Transparent"，并给内部元素命名以便后续样式定位：

<Style Selector="Button.RoundedButton" >
  <Setter Property="Margin" Value="5,5,5,5"/>
  <Setter Property="Height" Value="50"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <!-- 设置透明背景确保命中测试正常 -->
        <Panel Background="Transparent">
          <Image x:Name="PART_ButtonImage" Source="\Resources\Bitmaps\Buttons\BtnRoundedNormal.png" Classes="SetupButtonImage"/>
          <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{TemplateBinding Content}"/>
        </Panel>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

步骤2：优化状态样式，避免重复定义模板 #

使用Avalonia的模板选择器（/template/）直接修改模板内元素的属性，无需重新渲染整个模板：

<!-- 悬停状态：仅修改图片源 -->
<Style Selector="Button.RoundedButton:pointerover /template/ #PART_ButtonImage">
  <Setter Property="Source" Value="\Resources\Bitmaps\Buttons\BtnRoundedHover.png"/>
</Style>

<!-- 按下状态：修改图片源和文本颜色 -->
<Style Selector="Button.RoundedButton:pressed /template/ #PART_ButtonImage">
  <Setter Property="Source" Value="\Resources\Bitmaps\Buttons\BtnRoundedPushed.png"/>
</Style>

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

内容的提问来源于stack exchange，提问作者Reto Truninger