Question

我正在尝试在鼠标悬停时添加动画到我的wpf应用程序中为按钮设置的控件模板

这是我的代码：

<Style x:Key="scanButtonActive" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="3,3,0,0" BorderBrush="#575757" BorderThickness="0,6,0,0" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" Cursor="{TemplateBinding Cursor}">
                    <ContentPresenter x:Name="ScanButton">

                    </ContentPresenter>
                </Border>
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation From="#6d6e6e" To="#b2b2b2" Duration="0:0:1" Storyboard.TargetName="ScanButton" Storyboard.TargetProperty="Background"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation From="#b2b2b2" To="#6d6e6e" Duration="0:0:1" Storyboard.TargetName="ScanButton" Storyboard.TargetProperty="Background"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>           
    <Setter Property="Padding" Value="7, 3, 7, 3" />
    <Setter Property="Margin" Value="0, 0, 0, 10" />
    <Setter Property="Background" Value="#6d6e6e" />
    <Setter Property="Foreground" Value="#ffffff" />
    <Setter Property="Height" Value="100"/>
    <Setter Property="Width" Value="250"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="Cursor" Value="Hand"/>               
</Style>

但是当我将鼠标悬停在按钮上时会出现以下错误：

无法解析属性路径Background中的所有属性引用。

我该如何解决这个问题？

Answer 1

有一些问题。

首先ContentPresenter没有Background属性。您可以改为设置Background控件的Border。

其次，Background的类型为Brush，但ColorAnmation为Color设置动画，因此您应将属性路径更改为Background.Color。

第三个（为了完整性），您应该明确地将SolidColorBrush分配给Background属性，该属性保证可以修改。

<Style TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="border" ...>
                    ...
                </Border>
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation
                                    To="#b2b2b2" Duration="0:0:1"
                                    Storyboard.TargetName="border" 
                                    Storyboard.TargetProperty="Background.Color"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation
                                    To="#6d6e6e" Duration="0:0:1"
                                    Storyboard.TargetName="border"
                                    Storyboard.TargetProperty="Background.Color"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    ...
    <Setter Property="Background">
        <Setter.Value>
            <SolidColorBrush Color="#6d6e6e"/>
        </Setter.Value>
    </Setter>
</Style>

另请注意，您无需明确设置动画的From值。

Answer 2

请尝试使用以下代码：

<ControlTemplate.Triggers>
    <EventTrigger RoutedEvent="MouseEnter">
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation From="#6d6e6e" To="#b2b2b2" Duration="0:0:1" 
                    Storyboard.TargetName="ScanButton" 
                    Storyboard.TargetProperty="Control.Background"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="MouseLeave">
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation From="#b2b2b2" To="#6d6e6e" Duration="0:0:1" 
                    Storyboard.TargetName="ScanButton" 
                    Storyboard.TargetProperty="Control.Background"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</ControlTemplate.Triggers>

按钮背景动画：无法解析属性路径中的所有属性引用＆＃39;背景＆＃39;

2 个答案: