在WPF / XAML / C＃中的IsMouseOver上对按钮背景图像进行动画处理

Question

基于下面的代码，是否可以为按钮image1事件上从image2到IsMouseOver的过渡设置动画？

下面的代码可以很好地将image1显示为按钮上的最新图片，并将image2显示为按钮上的悬停图片，但它不会为过渡设置动画。

XAML样式

<Style x:Key="MainMenuButtonTemplate" TargetType="{x:Type Button}">
            <Style.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border x:Name="button" CornerRadius="0" 
                                    Background="{TemplateBinding Background}"
                                    Width="{TemplateBinding Width}"
                                    Height="{TemplateBinding Height}">

                                <TextBlock  Text="{TemplateBinding Button.Content}" 
                                            HorizontalAlignment="Center" 
                                            VerticalAlignment="Center"/>
                            </Border>

                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">

                                    <Setter TargetName="button"  Property="Background">
                                        <Setter.Value>
                                            <ImageBrush ImageSource="/App;component/Images/image2.png" Stretch="None"/>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>

                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
     </Style>

用法

        <Button x:Name="findRButton"
                Style="{StaticResource MainMenuButtonTemplate}" 
                Margin="0,0,0,0"  
                Height="53" 
                Command="{Binding FindrViewCommand}" BorderBrush="{x:Null}" Foreground="White" BorderThickness="0">
            <Button.Background>
                <ImageBrush ImageSource="Images/image1.png" Stretch="None"/>
            </Button.Background>
        </Button>

Answer 1

这里的代码向您展示了如何做您想要的事情。

为了在触发器中使用动画，必须使用该触发器的enter和exit操作。您还必须命名BeginStoryboard，以便可以在其他呼叫中将其停止。

查看代码，如果还有其他问题，请告诉我。鼠标悬停/离开时，图像将从图像1淡入图像2，反之亦然。

<Window x:Class="Question_Answer_WPF_App.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="400"
        Width="500">

    <Window.Resources>
        <Storyboard x:Key="mouseOverStoryboard"
                    Duration="00:00:00.5">
            <DoubleAnimation Storyboard.TargetName="image1"
                             Storyboard.TargetProperty="Opacity"
                             To="0"
                             Duration="00:00:00.5" />
            <DoubleAnimation Storyboard.TargetName="image2"
                             Storyboard.TargetProperty="Opacity"
                             To="1"
                             Duration="00:00:00.5" />
        </Storyboard>

        <Storyboard x:Key="mouseLeaveStoryboard"
                    Duration="00:00:00.5">
            <DoubleAnimation Storyboard.TargetName="image1"
                             Storyboard.TargetProperty="Opacity"
                             To="1"
                             Duration="00:00:00.5" />
            <DoubleAnimation Storyboard.TargetName="image2"
                             Storyboard.TargetProperty="Opacity"
                             To="0"
                             Duration="00:00:00.5" />
        </Storyboard>

        <Style x:Key="MainMenuButtonStyle"
               TargetType="{x:Type Button}">
            <Style.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Grid>
                                <Image x:Name="image1"
                                       Source="Images/image1.png" />
                                <Image x:Name="image2"
                                       Source="Images/image2.png"
                                       Opacity="0" />
                                <ContentPresenter />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver"
                                         Value="True">
                                    <Trigger.EnterActions>
                                        <StopStoryboard BeginStoryboardName="mouseLeaveStoryboard" />
                                        <BeginStoryboard Name="mouseOverStoryboard"
                                                         Storyboard="{StaticResource mouseOverStoryboard}" />
                                    </Trigger.EnterActions>
                                    <Trigger.ExitActions>
                                        <StopStoryboard BeginStoryboardName="mouseOverStoryboard" />
                                        <BeginStoryboard Name="mouseLeaveStoryboard"
                                                         Storyboard="{StaticResource mouseLeaveStoryboard}" />
                                    </Trigger.ExitActions>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>
    </Window.Resources>

    <Grid>
        <Button Style="{StaticResource MainMenuButtonStyle}"
                Width="120"
                Height="120" />
    </Grid>

</Window>