是否可以在多个按钮中使用相同的资源样式，并在 XAML 中的 IsMouseOver 事件上单独更改背景图像

Question

下面的代码有效地将图像显示为按钮的背景，并在isMouseOver事件上更改图像。我希望能够做的是对多个按钮使用相同的样式，但能够为每个按钮单独更改背景图像(ImageBrush(，因为每个按钮将使用不同的图像。

是否可以在多个按钮中使用相同的资源样式并在IsMouseOver上单独更改背景图像，还是每个按钮都需要单独的样式？

风格

<Window.Resources>
<Style x:Key="MainMenuButtonTemplate" TargetType="{x:Type Button}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="button" CornerRadius="12" 
Background="{TemplateBinding Background}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<TextBlock  Text="{TemplateBinding Button.Content}" 
HorizontalAlignment="Center" 
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="button"  Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/MyProject;component/Design/Images/my-image.png" Stretch="None"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="button"  Property="Background">
<Setter.Value>
<SolidColorBrush Color="{StaticResource MyCustomColor}"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsFocused" Value="True">
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="button" Property="Opacity" Value="0.7" />
<Setter Property="Foreground" Value="Gray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</Window.Resources>

用

<Button x:Name="MyButton"
Style="{StaticResource MainMenuButtonTemplate}" 
Margin="0,50,0,0" 
Width="auto" 
Height="60" 
Command="{Binding FindrViewCommand}" 
BorderBrush="{x:Null}" 
Foreground="White" >
<Button.Background>
<ImageBrush ImageSource="Design/Images/my-hover-image.png" Stretch="None"/>
</Button.Background>
</Button>

Answer 1

Button 类只包含一个用于背景的依赖属性 (DP(，没有用于 IsMouseOver 背景的 DP。

您有多种选择，这里有一些：

1( 创建一个名为 IsMouseOverBackground 的 Brush 类型的附加属性，并在样式中绑定到它。

C#

namespace WpfApp1
{
public class ButtonHelper
{
public static readonly DependencyProperty IsMouseOverBackgroundProperty =
DependencyProperty.RegisterAttached("IsMouseOverBackground", typeof(Brush), typeof(ButtonHelper), new PropertyMetadata(null));
public static Brush GetIsMouseOverBackground(DependencyObject obj)
{
return (Brush)obj.GetValue(IsMouseOverBackgroundProperty);
}
public static void SetIsMouseOverBackground(DependencyObject obj, Brush value)
{
obj.SetValue(IsMouseOverBackgroundProperty, value);
}
}
}

XAML

<!-- ... -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="button" Property="Background" Value="{Binding (local:ButtonHelper.IsMouseOverBackground), RelativeSource={RelativeSource TemplatedParent}}" />
</Trigger>
<!-- ... -->

请注意绑定中使用括号，这是绑定到附加属性时需要的。

2( 创建一个继承自 Button 的 IsMouseOverButton 类，添加一个名为 IsMouseOverBackground 的 Brush 类型的 DP，并在 Style 中绑定到它。

C#

namespace WpfApp1
{
public class IsMouseOverButton : Button
{
public static readonly DependencyProperty IsMouseOverBackgroundProperty =
DependencyProperty.Register("IsMouseOverBackground", typeof(Brush), typeof(IsMouseOverButton), new PropertyMetadata(null));
public Brush IsMouseOverBackground
{
get { return (Brush)GetValue(IsMouseOverBackgroundProperty); }
set { SetValue(IsMouseOverBackgroundProperty, value); }
}
}
}

XAML

<Style x:Key="MainMenuButtonTemplate" TargetType="{x:Type local:IsMouseOverButton}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:IsMouseOverButton}">
<Border x:Name="button" CornerRadius="12" 
Background="{TemplateBinding Background}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<TextBlock  Text="{TemplateBinding Button.Content}" 
HorizontalAlignment="Center" 
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="button" Property="Background" Value="{Binding IsMouseOverBackground, RelativeSource={RelativeSource TemplatedParent}}" />
</Trigger>
<!-- ... -->
<local:IsMouseOverButton x:Name="MyButton"
Style="{StaticResource MainMenuButtonTemplate}" 
Margin="0,50,0,0" 
Width="auto" 
Height="60" 
Command="{Binding FindrViewCommand}"
BorderBrush="{x:Null}" 
Foreground="White">
<local:IsMouseOverButton.Background>
<ImageBrush ImageSource="https://dummyimage.com/600x400/000/fff" Stretch="None"/>
</local:IsMouseOverButton.Background>
<local:IsMouseOverButton.IsMouseOverBackground>
<ImageBrush ImageSource="https://dummyimage.com/600x401/000/fff" Stretch="None"/>
</local:IsMouseOverButton.IsMouseOverBackground>
</local:IsMouseOverButton>

3( 使用按钮的 Tag 属性存储 IsMouseOver 背景，并在样式中绑定到它。我不喜欢使用 Tag 属性，因为不清楚为什么当其他开发人员读取您的代码时使用 Tag 属性。