I am somewhat new to styling. In my application, I have a Button element with an Image inside of it. The image is for the CoverImage of an album (this is a jukebox app), I have tried many other things but nothing seems to work. I want the image to rotate, which that part works; but I only want it to do it when the parent element, the Button, has focus and I want the rotation to stop and return to its original angle when it has lost focus.
This is my xaml code
<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>