wpf - WPF-如何获取按钮的IsFocused或GotFocus/LostFocus来触发按钮模板中元素的动画的开/关

Question

我对样式有点陌生。在我的应用程序中，我有一个Button元素，其中包含一个Image。该图像用于专辑的CoverImage(这是自动点唱机应用程序)，我尝试了许多其他操作，但似乎无济于事。我希望图像旋转，该部分起作用；但是我只希望它在父元素Button拥有焦点时执行，并且我希望旋转停止并在失去焦点时返回到其原始角度。
这是我的XAML代码

<Button x:Class="Jukebox.Shared.Views.SongView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:Jukebox.Shared.Views"
             xmlns:mvvm="http://www.galasoft.ch/mvvmlight"
             xmlns:vm="clr-namespace:Jukebox.Shared.ViewModels"
             xmlns:b="http://schemas.microsoft.com/xaml/behaviors"
             xmlns:wpfanimated="http://wpfanimatedgif.codeplex.com"
             mc:Ignorable="d"
             Focusable="True"
             Foreground="White"
             Padding="5"
             x:Name="btn"
             d:DataContext="{d:DesignInstance {x:Type vm:SongViewModel}}">

    <Button.InputBindings>
        <MouseBinding MouseAction="LeftDoubleClick" Command="{Binding AddToPlaylistCommand}"/>
    </Button.InputBindings>

     <Button.Style>
        <Style TargetType="Button">
            <Style.Triggers>
                <Trigger Property="IsFocused" Value="True"> <!--I want this type of trigger to switch on/off the storyboard of the Image below-->
                    <Trigger.Setters>
                        <Setter Property="FontWeight" Value="UltraBold"/>
                        <Setter Property="Background" Value="White"/>
                    </Trigger.Setters>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>

    <Button.Template>
        <ControlTemplate TargetType="Button">

            <Border x:Name="MainBorder"
                    Padding="5"
                    Margin="50 20"
                    Width="Auto"
                    Height="Auto"
                    Focusable="True">

                <StackPanel>

                    <Grid Width="300"
                          Height="300"
                          Background="Transparent">

                        <Viewport3D>

                            <Viewport3D.Camera>
                                <PerspectiveCamera Position="0, 0, 2.8" FieldOfView="60"/>
                            </Viewport3D.Camera>

                            <Viewport2DVisual3D x:Name="albumCover">

                                <Viewport2DVisual3D.Transform>
                                    <RotateTransform3D>
                                        <RotateTransform3D.Rotation>
                                            <AxisAngleRotation3D Angle="0" Axis="0, 1, 0" />
                                        </RotateTransform3D.Rotation>
                                    </RotateTransform3D>
                                </Viewport2DVisual3D.Transform>

                                <Viewport2DVisual3D.Geometry>
                                    <MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0"
                                                    TextureCoordinates="0,0 0,1 1,1 1,0" TriangleIndices="0 1 2 0 2 3"/>
                                </Viewport2DVisual3D.Geometry>

                                <Viewport2DVisual3D.Material>
                                    <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="Transparent"/>
                                </Viewport2DVisual3D.Material>

                                <!--This Image-->
                                <Image Source="{Binding CoverImage, FallbackValue={StaticResource MetCartoonImageKey}}"
                                       Focusable="True">

                                    <Image.Triggers>

                                        <EventTrigger RoutedEvent="MouseEnter">

                                            <BeginStoryboard>

                                                <Storyboard RepeatBehavior="Forever"><!--Turn on/off this behavior based on if the button is focused-->

                                                    <Rotation3DAnimation    Storyboard.TargetName="albumCover"
                                                                            Storyboard.TargetProperty="(Viewport2DVisual3D.Transform).(RotateTransform3D.Rotation)"
                                                                            Duration="0:0:2"
                                                                            BeginTime="0:0:0">

                                                        <Rotation3DAnimation.From>
                                                            <AxisAngleRotation3D Angle="0"
                                                                                 Axis="0, 1, 0" />
                                                        </Rotation3DAnimation.From>

                                                        <Rotation3DAnimation.To>
                                                            <AxisAngleRotation3D Angle="90"
                                                                                 Axis="0, 1, 0" />
                                                        </Rotation3DAnimation.To>

                                                    </Rotation3DAnimation>

                                                    <Rotation3DAnimation    Storyboard.TargetName="albumCover"
                                                                            Storyboard.TargetProperty="(Viewport2DVisual3D.Transform).(RotateTransform3D.Rotation)"
                                                                            Duration="0:0:2"
                                                                            BeginTime="0:0:2">

                                                        <Rotation3DAnimation.From>
                                                            <AxisAngleRotation3D Angle="-90"
                                                                                 Axis="0, 1, 0" />
                                                        </Rotation3DAnimation.From>

                                                        <Rotation3DAnimation.To>
                                                            <AxisAngleRotation3D Angle="0"
                                                                                 Axis="0, 1, 0" />
                                                        </Rotation3DAnimation.To>
                                                    </Rotation3DAnimation>
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </EventTrigger>
                                    </Image.Triggers>
                                </Image>
                            </Viewport2DVisual3D>

                            <ModelVisual3D>
                                <ModelVisual3D.Content>
                                    <DirectionalLight Color="#FFFFFFFF" Direction="0,0,-1"/>
                                </ModelVisual3D.Content>
                            </ModelVisual3D>
                        </Viewport3D>
                    </Grid>

                    <TextBlock  Margin="5"
                                Text="{Binding Title, FallbackValue='Add Title'}"
                                HorizontalAlignment="Center"
                                FontSize="22"/>

                    <TextBlock  Margin="5 0"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Left"
                                Text="{Binding Year, FallbackValue='Add Year'}"
                                FontSize="15"/>
                </StackPanel>
            </Border>

        </ControlTemplate>
    </Button.Template>
</Button>

Answer 1

从我所见，您只需要将EventTrigger移到ControlTemplate.Triggers集合。然后在UIElement.GotFocus上触发以启动动画，并在UIElement.LostFocus上触发以停止动画:

<ControlTemplate TargetType="Button">
  <Border x:Name="MainBorder"
          Padding="5"
          Margin="50 20"
          Width="Auto"
          Height="Auto"
          Focusable="True">

  ...

  <ControlTemplate.Triggers>

    <!-- Stop the rotation -->
    <EventTrigger RoutedEvent="LostFocus">
      <BeginStoryboard>
        <Storyboard>
          <Rotation3DAnimation Storyboard.TargetName="albumCover"
                               Storyboard.TargetProperty="(Viewport2DVisual3D.Transform).(RotateTransform3D.Rotation)"
                               Duration="0:0:2"
                               BeginTime="0:0:0">
            <Rotation3DAnimation.To>
              <AxisAngleRotation3D Angle="360"
                                   Axis="0, 1, 0" />
            </Rotation3DAnimation.To>
          </Rotation3DAnimation>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>

    <!-- Start the rotation -->
    <EventTrigger RoutedEvent="GotFocus">
      <BeginStoryboard>
        <Storyboard RepeatBehavior="Forever">
          <Rotation3DAnimation Storyboard.TargetName="albumCover"
                               Storyboard.TargetProperty="(Viewport2DVisual3D.Transform).(RotateTransform3D.Rotation)"
                               Duration="0:0:2"
                               BeginTime="0:0:0">
            <Rotation3DAnimation.From>
              <AxisAngleRotation3D Angle="0"
                                   Axis="0, 1, 0" />
            </Rotation3DAnimation.From>
            <Rotation3DAnimation.To>
              <AxisAngleRotation3D Angle="90"
                                   Axis="0, 1, 0" />
            </Rotation3DAnimation.To>
          </Rotation3DAnimation>

          <Rotation3DAnimation Storyboard.TargetName="albumCover"
                               Storyboard.TargetProperty="(Viewport2DVisual3D.Transform).(RotateTransform3D.Rotation)"
                               Duration="0:0:2"
                               BeginTime="0:0:2">
            <Rotation3DAnimation.From>
              <AxisAngleRotation3D Angle="-90"
                                   Axis="0, 1, 0" />
            </Rotation3DAnimation.From>
            <Rotation3DAnimation.To>
              <AxisAngleRotation3D Angle="0"
                                   Axis="0, 1, 0" />
            </Rotation3DAnimation.To>
          </Rotation3DAnimation>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </ControlTemplate.Triggers>
</ControlTemplate>