自定义按钮对 IsMouseOver 没有反应答案

【问题标题】：Custom Button does not react on IsMouseOver自定义按钮对 IsMouseOver 没有反应
【发布时间】：2016-10-22 19:09:10
【问题描述】：

我创建了控件 IconButton（派生自 Button）以在我的按钮中心显示大图标。一切似乎都很好，但会触发。当鼠标悬停在我的控件上时，背景应该会改变。

后面的代码：

public class IconButton : System.Windows.Controls.Button
{
    public static readonly DependencyProperty ImageProperty = DependencyProperty.Register("Image", typeof(System.Windows.Media.ImageSource), typeof(IconButton));

    public System.Windows.Media.ImageSource Image
    {
        get
        {
            return (System.Windows.Media.ImageSource)GetValue(ImageProperty);
        }
        set
        {
            SetValue(ImageProperty, value);
        }
    }

    public IconButton()
    {
        SetResourceReference(StyleProperty, "IconsStyle");
    }
}

xaml:

<Style x:Key="IconsStyle" TargetType="local:IconButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:IconButton">
                <Border BorderBrush="{TemplateBinding BorderBrush}" 
                        CornerRadius="10" 
                        BorderThickness="{TemplateBinding BorderThickness}"  
                        MaxHeight="{TemplateBinding MaxHeight}"
                        MaxWidth="{TemplateBinding MaxWidth}" 
                        MinHeight="{TemplateBinding MinHeight}" 
                        MinWidth="{TemplateBinding MinWidth}" 
                        Height="{TemplateBinding Height}" 
                        Width="{TemplateBinding Width}" 
                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}" 
                        VerticalAlignment="{TemplateBinding VerticalAlignment}">
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,2">
                            <GradientStop Offset="0" Color="Green"/>
                            <GradientStop Offset="2" Color="White"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <Grid VerticalAlignment="Stretch" 
                          HorizontalAlignment="Stretch"
                          Background="Transparent">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="2*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Image 
                            VerticalAlignment="Center" 
                            HorizontalAlignment="Center" 
                            Source="{TemplateBinding Image}"/>
                        <ContentControl 
                            VerticalAlignment="Bottom"
                            Grid.Row="1" 
                            Padding="0" 
                            FontSize="12" 
                            HorizontalAlignment="Center" 
                            HorizontalContentAlignment="Center" 
                            VerticalContentAlignment="Center" 
                            Content="{TemplateBinding Content}" 
                            Background="Transparent"/>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Offset="-1" Color="Green"/>
                                    <GradientStop Offset="0.5" Color="White"/>
                                    <GradientStop Offset="2" Color="Green"/>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

该代码有什么问题？为什么当我将鼠标移到背景上时背景没有变化？

【问题讨论】：

标签： wpf image templates button

【解决方案1】：

为 ContentControl 命名并尝试像这样设置属性和元素名称。这应该可以解决您的问题。

<ContentControl x:Name="ContentControl1"
    VerticalAlignment="Bottom"
    Grid.Row="1" 
    Padding="0" 
    FontSize="12" 
    HorizontalAlignment="Center" 
    HorizontalContentAlignment="Center" 
    VerticalContentAlignment="Center" 
    Content="{TemplateBinding Content}" 
    Background="Transparent"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ContentControl1" Property="Background" >
    <Setter.Value>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="-1" Color="Green"/>
            <GradientStop Offset="0.5" Color="White"/>
            <GradientStop Offset="2" Color="Green"/>
        </LinearGradientBrush>
    </Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>

【讨论】：

【解决方案2】：

永远不会使用您在IsMouseOver 触发器中设置的Background 属性。

您应该修改样式，如下所示。它添加了一个

Background="{TemplateBinding Background}"

分配给边框控件并通过样式设置器定义默认背景。

<Style x:Key="IconsStyle" TargetType="local:IconButton">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,2">
                <GradientStop Offset="0" Color="Green"/>
                <GradientStop Offset="2" Color="White"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:IconButton">
                <Border Background="{TemplateBinding Background}" ... >
                    ...
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Offset="-1" Color="Green"/>
                                    <GradientStop Offset="0.5" Color="White"/>
                                    <GradientStop Offset="2" Color="Green"/>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【讨论】：