CODEWITHSUNDEEP
c#wpfxamlanimationstoryboard
Bastiaan
Bastiaan

Reputation: 736

StoryBoard inside Style Trigger of Image

I am trying to rotate my Image inside its style when the Image is Enabled. It throws however an error:

Cannot resolve all property references in the property path 'Angle'. Verify that applicable objects support the properties.

Anybody has any clue what the issue is here?

<Image x:Name="Logo" Source="Resources/Logo.png" RenderTransformOrigin=".5,.5">
    <Image.Style>
        <Style TargetType="{x:Type Image}">
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Angle" By="10" To="360" RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

I tried Storyboard.TargetProperty="Image.Angle" but same results.

Upvotes: 0

Views: 1141

Answers (1)

Clemens
Clemens

Reputation: 128136

An Image element has no Angle property.

Set the Image's RenderTransform property to a RotateTransform, then animate the Angle property of the transform object by using RenderTransform.Angle as property path:

<Image x:Name="Logo" Source="Resources/Logo.png" RenderTransformOrigin=".5,.5">
    <Image.RenderTransform>
        <RotateTransform/>
    </Image.RenderTransform>
    <Image.Style>
        <Style TargetType="Image">
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="RenderTransform.Angle"
                                    To="360" RepeatBehavior="Forever"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

Note also that setting the By property of a DoubleAnimation has no effect when you also set To.

Upvotes: 1

Related Questions