如何在 wpf 的 MouseOver 触发器中放置动画效果答案

【问题标题】：How can I put animation effect inside MouseOver trigger in wpf如何在 wpf 的 MouseOver 触发器中放置动画效果
【发布时间】：2017-06-19 10:59:47
【问题描述】：

我有一个带有图像的按钮，里面有一个鼠标输入触发器，用于我创建的动画。问题是当单击按钮时触发，并且在鼠标输入时动画不会再次出现。所以我认为也许使用鼠标悬停触发器可以解决问题，但我不知道如何。这是我的代码：

<telerik:RadButton Name="setting" CornerRadius="12"  Click="settings_Click" Grid.Column="2" IsBackgroundVisible="False">
                    <Image Source="/CRI_12;component/Images/cog-64.png" RenderTransformOrigin=".5,.5" Stretch="Uniform">
                        <Image.RenderTransform>
                            <RotateTransform x:Name="AnimatedRotate" Angle="0" />
                        </Image.RenderTransform>
                        <Image.Triggers>
                            <EventTrigger RoutedEvent="Image.MouseEnter">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="AnimatedRotate" 
                                             Storyboard.TargetProperty="Angle"
                                             By="0"        
                                             To="45" 
                                             Duration="0:0:.5" 
                                             FillBehavior="Stop" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Image.Triggers>
                    </Image>
                </telerik:RadButton>

编辑

【问题讨论】：

您能否发布您的 Button 的完整标记？您发布的 XAML 标记中只有一个图像...
更好地设计您的按钮。将Triggers 添加到该样式并使用IsMouseOver 属性通过Trigget.EnterActions 开始您的动画。
@mm8 现在带有按钮标记
@Shakra 那我应该在哪里声明<Image.RenderTransform>

标签： c# wpf xaml animation

【解决方案1】：

RadButton 的默认模板中定义的视觉状态在您的触发器之后应用，因此触发器将被覆盖。您需要编辑模板才能使其适用于RadButton。引用很多标记，但这里是：

<telerik:RadButton Name="setting" CornerRadius="12" Click="settings_Click" Grid.Column="2" IsBackgroundVisible="False">
    <telerik:RadButton.Resources>
        <SolidColorBrush x:Key="ControlInnerBorder_Normal" Color="#FFFFFFFF"/>
        <LinearGradientBrush x:Key="ControlBackground_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFFBDA" Offset="0"/>
            <GradientStop Color="#FFFEEBAE" Offset="0.50"/>
            <GradientStop Color="#FFFFD25A" Offset="0.50"/>
            <GradientStop Color="#FFFFFBA3" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ControlOuterBorder_MouseOver" Color="#FFFFC92B"/>
        <SolidColorBrush x:Key="ControlInnerBorder_MouseOver" Color="#FFFFFFFF"/>
        <LinearGradientBrush x:Key="ControlBackground_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFDCAB" Offset="0"/>
            <GradientStop Color="#FFFFD18F" Offset="0.5"/>
            <GradientStop Color="#FFFE9227" Offset="0.5"/>
            <GradientStop Color="#FFFFBA74" Offset="0"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ControlOuterBorder_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF282828"/>
            <GradientStop Color="#FF5F5F5F" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ControlInnerBorder_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFB69A78"/>
            <GradientStop Color="#FFFFE17A" Offset="0.126"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="ControlInnerBorder_Disabled" Color="Transparent"/>
        <SolidColorBrush x:Key="ControlBackground_Disabled" Color="#FFE0E0E0"/>
        <SolidColorBrush x:Key="ControlBackground_Focused" Color="Transparent"/>
        <SolidColorBrush x:Key="ControlOuterBorder_Focused" Color="#FFFFC92B"/>
        <SolidColorBrush x:Key="ControlInnerBorder_Focused" Color="Transparent"/>
    </telerik:RadButton.Resources>
    <Image Source="/CRI_12;component/Images/cog-64.png" RenderTransformOrigin=".5,.5" Stretch="Uniform">
        <Image.RenderTransform>
            <RotateTransform x:Name="AnimatedRotate" Angle="0" />
        </Image.RenderTransform>
        <Image.Style>
            <Style TargetType="Image">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard Name="sb">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                                             By="0"        
                                             To="45" 
                                             Duration="0:0:.5" 
                                             FillBehavior="Stop" />
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <RemoveStoryboard BeginStoryboardName="sb" />
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>
    <telerik:RadButton.Template>
        <ControlTemplate TargetType="telerik:RadButton">
            <Grid SnapsToDevicePixels="True">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="OuterMouseOverBorder"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterPressedBorder" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Duration="0" Storyboard.TargetName="CommonStatesWrapper" Storyboard.TargetProperty="Opacity" To="0"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Visible</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Duration="0" Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" To="0.5"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="BackgroundVisibility">
                        <VisualState x:Name="BackgroundIsHidden">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Opacity" To="0"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="BackgroundIsVisible"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStatesGroup">
                        <VisualState x:Name="Unfocused">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00.150">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>Collapsed</Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <!--<VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00.115">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>-->
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border x:Name="OuterBorder"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                Background="{TemplateBinding Background}"
                                CornerRadius="{TemplateBinding CornerRadius}">
                    <Border
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Background="{x:Null}"
                                    CornerRadius="{TemplateBinding InnerCornerRadius}"
                                    BorderBrush="{StaticResource ControlInnerBorder_Normal}"/>
                </Border>
                <Border x:Name="OuterMouseOverBorder"
                                Opacity="0"
                                CornerRadius="{TemplateBinding CornerRadius}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{StaticResource ControlBackground_MouseOver}"
                                BorderBrush="{StaticResource ControlOuterBorder_MouseOver}">
                    <Border
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Background="{x:Null}"
                                    CornerRadius="{TemplateBinding InnerCornerRadius}"
                                    BorderBrush="{StaticResource ControlInnerBorder_MouseOver}"/>
                </Border>
                <Border x:Name="OuterPressedBorder"
                                Visibility="Collapsed"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="{TemplateBinding CornerRadius}"
                                Background="{StaticResource ControlBackground_Pressed}"
                                BorderBrush="{StaticResource ControlOuterBorder_Pressed}">
                    <Border
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Background="{x:Null}"
                                    CornerRadius="{TemplateBinding InnerCornerRadius}"
                                    BorderBrush="{StaticResource ControlInnerBorder_Pressed}"/>
                </Border>
                <Border x:Name="DisabledVisual"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="{TemplateBinding CornerRadius}"
                                Visibility="Collapsed"
                                BorderBrush="{StaticResource ControlInnerBorder_Disabled}"
                                Background="{StaticResource ControlBackground_Disabled}"/>
                <ContentPresenter x:Name="Content"
                                TextBlock.Foreground="{TemplateBinding Foreground}"
                                Margin="{TemplateBinding Padding}"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                                ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                RecognizesAccessKey="True"/>
                <Border x:Name="CommonStatesWrapper">
                    <Border x:Name="FocusVisual"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    CornerRadius="{TemplateBinding CornerRadius}"
                                    Visibility="Collapsed"
                                    Background="{StaticResource ControlBackground_Focused}"
                                    BorderBrush="{StaticResource ControlOuterBorder_Focused}">
                        <Border BorderThickness="1" BorderBrush="{StaticResource ControlInnerBorder_Focused}" CornerRadius="{TemplateBinding InnerCornerRadius}"/>
                    </Border>
                </Border>
            </Grid>
        </ControlTemplate>
    </telerik:RadButton.Template>
</telerik:RadButton>

【讨论】：

【解决方案2】：

这里有一些例子，不要忘记更改 Telerik 的按钮并更改图像的来源：

<Button Height="50" Width="50">
    <Image Source="Images/ok_icon.png">
        <Image.RenderTransform>
            <RotateTransform CenterX="25" CenterY="25"/>
        </Image.RenderTransform>
        <Image.Style>
            <Style TargetType="Image">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation 
                                                 Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)"
                                                 From="0"
                                                 To="45"
                                                 Duration="0:0:0.5"
                                                 FillBehavior="Stop"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>
</Button>

【讨论】：

谢谢。通过此代码，我可以使用鼠标悬停在触发器上，但在单击按钮后未发生动画的主要问题仍然存在。也许是因为 Telerik 按钮。
你的意思是点击按钮后，如果你将鼠标移出按钮和返回动画就不会再次触发？
尝试使用通用按钮，它在我现在使用的测试解决方案中运行良好。所以是的，它看起来像 Telerik 的错误。