xaml 中的高级按钮悬停效果

Question

我是 C# 和 XAML 的新手，但对 Web 设计语言有经验。目前我正在编写我的第一个程序，但我遇到了问题..

在 xaml 中我创建了我的按钮：

<Button Margin="10 0 0 0" Click="CloseClick">
    <Button.Template>
        <ControlTemplate>
            <Border Background="{x:Null}" IsHitTestVisible="True">
                <Canvas Width="15" Height="15">
                    <Ellipse HorizontalAlignment="Left" Height="15" Grid.Row="0" Width="15">
                        <Ellipse.Fill>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF8C8E8D" Offset="0"/>
                                <GradientStop Color="#FF54545C" Offset="0.987"/>
                            </LinearGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <Path Data="F1M54.0573,47.8776L38.1771,31.9974 54.0547,16.1198C55.7604,14.4141 55.7604,11.6511 54.0573,9.94531 52.3516,8.23962 49.5859,8.23962 47.8802,9.94531L32.0026,25.8229 16.1224,9.94531C14.4167,8.23962 11.6511,8.23962 9.94794,9.94531 8.24219,11.6511 8.24219,14.4141 9.94794,16.1198L25.8255,32 9.94794,47.8776C8.24219,49.5834 8.24219,52.3477 9.94794,54.0534 11.6511,55.7572 14.4167,55.7585 16.1224,54.0534L32.0026,38.1745 47.8802,54.0534C49.5859,55.7585 52.3516,55.7572 54.0573,54.0534 55.7604,52.3477 55.763,49.5834 54.0573,47.8776z" Stretch="Uniform" Fill="#FF3D3E50" Width="8" Height="8" Canvas.Top="3.5" Canvas.Left="3.5"/>
                </Canvas>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button>

现在在悬停事件上，我想让其他按钮看起来像中心的按钮！

我试过了：

   <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter TargetName="ellipse1" Property="Fill" Value="Orange"/>
    </Trigger>
  </Style.Triggers>  

我也尝试了更多代码，但我不再拥有它，因为它不起作用..

非常感谢您的帮助！

Answer 1

您的代码缺少 x:Name="ellipse1" ：如下所示进行更正，因此 Trigger 将起作用（即在 MouseOver 事件中将 Fill 颜色更改为橙​​色）：

<Button Margin="10 0 0 0" Click="CloseClick">
    <Button.Template>
        <ControlTemplate>
            <Border Background="{x:Null}" IsHitTestVisible="True">
                <Canvas Width="15" Height="15">
                    <Ellipse x:Name="ellipse1" HorizontalAlignment="Left" Height="15" Grid.Row="0" Width="15">
                        <Ellipse.Fill>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF8C8E8D" Offset="0"/>
                                <GradientStop Color="#FF54545C" Offset="0.987"/>
                            </LinearGradientBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                    <Path Data="F1M54.0573,47.8776L38.1771,31.9974 54.0547,16.1198C55.7604,14.4141 55.7604,11.6511 54.0573,9.94531 52.3516,8.23962 49.5859,8.23962 47.8802,9.94531L32.0026,25.8229 16.1224,9.94531C14.4167,8.23962 11.6511,8.23962 9.94794,9.94531 8.24219,11.6511 8.24219,14.4141 9.94794,16.1198L25.8255,32 9.94794,47.8776C8.24219,49.5834 8.24219,52.3477 9.94794,54.0534 11.6511,55.7572 14.4167,55.7585 16.1224,54.0534L32.0026,38.1745 47.8802,54.0534C49.5859,55.7585 52.3516,55.7572 54.0573,54.0534 55.7604,52.3477 55.763,49.5834 54.0573,47.8776z" Stretch="Uniform" Fill="#FF3D3E50" Width="8" Height="8" Canvas.Top="3.5" Canvas.Left="3.5"/>
                </Canvas>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="ellipse1" Property="Fill" Value="Orange"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Button.Template>
</Button>