WPF:鼠标在控件上移动时的径向渐变

Question

当鼠标在按钮上移动时，我想对按钮应用径向渐变效果，如下所述。所以我有一个单独的资源文件，在这里我定义了我的按钮样式。

MyButtonStyle.xaml：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MyTestButtons">
<Style TargetType="Button" x:Key="MyButtonStyle">
<!--<Setter Property="Background" Value="Transparent" />-->
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">                   
<Border  Name="Border" CornerRadius="0"  
BorderBrush="#000" BorderThickness="1,1,1,1" 
Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter" 
ContentTemplate="{TemplateBinding ContentTemplate}" 
Content="{TemplateBinding Content}" 
HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
Margin="{TemplateBinding Padding}" 
VerticalAlignment="{TemplateBinding VerticalAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

我按如下方式应用于我的按钮。

窗口：

<Window x:Class="MyTestButtons"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary  Source="/MyButtonStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Button Name="btnYes" Content="Yes"  
Margin="3,5" MinWidth="70" Height="35" 
Click="Button_Click" Foreground="Black" FontSize="14" 
Style="{StaticResource MyButtonStyle}"  
VerticalAlignment="Center" 
HorizontalAlignment="Stretch"  
VerticalContentAlignment="Center" 
HorizontalContentAlignment="Center" 
MouseMove="btnYes_MouseMove" 
MouseLeave="btnYes_MouseLeave">
<Button.Background>
<RadialGradientBrush x:Name="gradRadial" RadiusX="0.25">
<GradientStop Color="AliceBlue" Offset="0.0"/>
<GradientStop Color="LightSteelBlue" Offset="1.0"/>
</RadialGradientBrush>
</Button.Background>
</Button>
</Window>

后面的窗口代码：

private void btnYes_MouseMove(object sender, MouseEventArgs e)
{
Point pt = Mouse.GetPosition(btnYes);
gradRadial.GradientOrigin = new Point(pt.X / btnYes.Width, pt.Y / btnYes.Height);
gradRadial.Center = gradRadial.GradientOrigin;
}
private void btnYes_MouseLeave(object sender, MouseEventArgs e)
{
gradRadial.GradientOrigin = new Point(0.5, 0.5);   // Default
gradRadial.Center = gradRadial.GradientOrigin;
}

我的问题和目标是：

1. 未正确应用径向梯度。我的意思是，径向梯度显示在我的按钮的中心，而不将鼠标放在上面，当鼠标在按钮上移动时，径向梯度始终保持在中心，径向梯度不是从我的鼠标在上面的原点生成的，就像提供的链接中显示的三只鼠标的屏幕截图中一样
2. 使用代码隐藏迫使我两个为每个按钮创建两个事件，MouseMove和MouseLeave。我想在没有代码隐藏的情况下完成它，只使用xaml，并将所有代码放在一个文件中，只放在我的样式文件MyButtonStyle.xaml中

Answer 1

Fisrt问题就是因为这个原因发生的：

gradRadial.GradientOrigin = new Point(pt.X / btnYes.Width, pt.Y / btnYes.Height);

您使用btnYes.Width，但没有为按钮设置此属性，并且默认情况下它没有定义值(double.NaN)，因此您最终得到的是一个组件未定义的点(无论这意味着什么)。而是使用

gradRadial.GradientOrigin = new Point(pt.X / btnYes.ActualWidth, pt.Y / btnYes.ActualHeight);

至于第二个问题。首先，样式可以通过EventSetter设置事件处理程序。其次，资源字典可能有代码隐藏。所以你可以这么做。首先为资源字典分配类：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication1.Resources">
</ResourceDictionary>

然后定义后面的代码：

// this is in namespace WpfApplication1
partial class Resources : ResourceDictionary {
public Resources() {
InitializeComponent();
}
private void OnMyButtonMouseLeave(object sender, MouseEventArgs e) {
var btn = (Button) sender;
var gradient = btn.Background as RadialGradientBrush;
if (gradient == null)
return;
gradient.GradientOrigin = new Point(0.5, 0.5); // Default
gradient.Center = gradient.GradientOrigin;
}
private void OnMyButtonMouseMove(object sender, MouseEventArgs e) {
var btn = (Button) sender;
var gradient = btn.Background as RadialGradientBrush;
if (gradient == null)
return;
Point pt = Mouse.GetPosition(btn);
gradient.GradientOrigin = new Point(pt.X / btn.ActualWidth, pt.Y / btn.ActualHeight);
gradient.Center = gradient.GradientOrigin;
}
}

然后按样式分配处理程序：

<Style TargetType="Button"
x:Key="MyButtonStyle">
<!-- skipped -->
<EventSetter Event="MouseLeave" Handler="OnMyButtonMouseLeave"/>
<EventSetter Event="MouseMove" Handler="OnMyButtonMouseMove"/>
</Style>