Анимированное изображение из стиля не работает

Question

Я хочу разместить одинаковую анимацию для всех моих изображений в моем приложении, когда кто-то наводит на них курсор мыши. В результате я создал следующий стиль:

<Style x:Key="test" TargetType="{x:Type Image}">

        <Style.Resources>
            <Storyboard x:Key="Storyboard1">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" 
                    Storyboard.Target="{Binding RelativeSource={RelativeSource Self}}">
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="200">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <BackEase EasingMode="EaseOut"/>
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Style.Resources>

        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
                </Trigger.EnterActions>
            </Trigger>
        </Style.Triggers>
</Style>

и на изображении, которое я планирую анимировать, я буду применять этот стиль как:

  <Image Style="{StaticResource test}" Name="image1" Source="/PDV;component/images/t.png" Stretch="Uniform" Width="100" />

при наведении курсора мыши на это изображение я получаю исключение:

System.InvalidOperationException было необработано. Message = Cannot animate '(0)' на экземпляре неизменяемого объекта.
Source = PresentationFramework StackTrace: в System.Windows.Media.Animation.Storyboard.VerifyPathIsAnimatable (PropertyPath дорожка) в System.Windows.Media.Animation.Storyboard.ClockTreeWalkRecursive (Clock currentClock, DependencyObject, содержащийObject, INameScope nameScope, DependencyObject parentObject, String parentObjectName, PropertyPath parentPropertyPath, HandoffBehavior handoffBehavior, HybridDictionary ClockMappings, слой Int64) в System.Windows.Media.Animation.Storyboard.ClockTreeWalkRecursive (Clock currentClock, DependencyObject, содержащийObject, INameScope nameScope, DependencyObject parentObject, String parentObjectName, PropertyPath parentPropertyPath, HandoffBehavior handoffBehavior, HybridDictionary

и т.д ..

Что мне нужно изменить на стиль, чтобы он работал?

Answer 1

Просто удалите раскадровку Target.Тогда все будет работать нормально.

<Style x:Key="test" TargetType="{x:Type Image}">

    <Style.Resources>
        <Storyboard x:Key="Storyboard1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" 
                **Storyboard.Target="{Binding RelativeSource={RelativeSource Self}}"**>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="200">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Style.Resources>

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
            </Trigger.EnterActions>
        </Trigger>
    </Style.Triggers>