C# 如何在wpf中的鼠标悬停触发器中放置动画效果_C#_Wpf_Xaml_Animation

C# 如何在wpf中的鼠标悬停触发器中放置动画效果

c# wpf xaml animation

C# 如何在wpf中的鼠标悬停触发器中放置动画效果,c#,wpf,xaml,animation,C#,Wpf,Xaml,Animation,我有一个里面有图像的按钮，它有一个鼠标输入触发器，用于我创建的动画。问题是，当单击按钮时，触发器会触发，并且在鼠标输入时动画不会再次出现。所以我想也许用鼠标移到触发器上可以解决这个问题，但我不知道如何解决。这是我的密码： <telerik:RadButton Name="setting" CornerRadius="12" Click="settings_Click" Grid.Column="2" IsBackgroundVisible="False">

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

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

编辑

以下是一些示例，不要忘记更改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>

在

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>


看得见的
看得见的
崩溃
崩溃

您可以发布按钮的完整标记吗？在您发布的XAML标记中只有一个图像…更好地设置按钮的样式。将

Triggers

添加到该样式中，并使用

IsMouseOver

属性通过

Trigget.EnterActions

@mm8立即使用按钮启动动画markup@Shakra那么我应该在哪里申报呢？谢谢。通过这段代码，我可以使用鼠标悬停在触发器上，但在点击按钮后不出现动画的主要问题仍然存在。可能是因为telerik按钮。你们的意思是，点击按钮后，若你们将鼠标移出按钮，那个么动画就不会再次启动了？尝试使用普通按钮，它在我现在使用的测试解决方案中运行良好。是的，看起来像是telerik的臭虫。