Question

我创建了控件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>

该代码有什么问题？当我将鼠标移到它上面时，为什么背景不会改变？

Answer 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>

Answer 2

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

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

Background="{TemplateBinding Background}"

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

<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>

自定义按钮不会对IsMouseOver做出反应

2 个答案: