views:

170

answers:

1

I have the following xaml to show a rotating ellipse:

<Ellipse x:Name="ellipse"
    Stroke="{StaticResource _SpinnerGradientBrush}"
    StrokeThickness="20"     
    RenderTransformOrigin="0.5,0.5"
    >
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="0" />
                </TransformGroup>
            </Ellipse.RenderTransform>
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Ellipse.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames 
                            Storyboard.TargetName="ellipse"
                            Storyboard.TargetProperty="(Ellipse.RenderTransform).(RotateTransform.Angle)"
                            Duration="0:0:4" 
                            RepeatBehavior="Forever">
                                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
                                <LinearDoubleKeyFrame Value="359" KeyTime="0:0:4" />
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>

The window will display as expected but the animation never starts. I've had this working in Blend but for some reason it does not work when I actually use the xaml in my application. If anyone has any ideas I'd appreciate it.

A: 

Remove <TransformGroup> tags, you only need:

<Ellipse.RenderTransform>
    <RotateTransform Angle="0" />
</Ellipse.RenderTransform>

Alternatively assign a name to the RotateTransform you want to animate and target it in the animation (changed to DoubleAnimation as it is shorter):

<Ellipse.RenderTransform>
    <TransformGroup>
        <RotateTransform Angle="0" x:Name="ellipseRotateTransform" />
    </TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Triggers>
    <EventTrigger RoutedEvent="Ellipse.Loaded">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation
                    Storyboard.TargetName="ellipseRotateTransform"
                    Storyboard.TargetProperty="Angle"
                    From="0" To="359"
                    Duration="0:0:4" 
                    RepeatBehavior="Forever">
                </DoubleAnimation>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Ellipse.Triggers>
Stanislav Kniazev