CODEWITHSUNDEEP
wpfwpf-controls
Sonhja
Sonhja

Reputation: 8458

Can't make an animation work WPF

I can't make this animation work:

        <Ellipse Opacity="0.7" Width="150" Height="50" StrokeThickness="5">
        <Ellipse.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard RepeatBehavior="Forever" AutoReverse="True">
                                <DoubleAnimation From="0" To="100" Duration="0:0:2" Storyboard.TargetProperty="LayoutTransform.Y" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
        </Ellipse.Triggers>
    </Ellipse>

Basically it's an Ellipse that translates from a starting point at Y to an ending point of Y. But basically, it doesn't move, and launches a mistake... Any ideas?

Upvotes: 1

Views: 516

Answers (2)

HichemSeeSharp
HichemSeeSharp

Reputation: 3318

To keep it simple you can put ellipsis in a canvas : 

 <Canvas>
            <Ellipse Width="30" Height="30" Fill="Purple" Canvas.Top="0" >
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="FrameworkElement.Loaded" >
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:5"  AutoReverse="True" Storyboard.TargetProperty="(Canvas.Top)" To="100" RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
        </Canvas>

Upvotes: 1

Clemens
Clemens

Reputation: 128146

Animating the LayoutTransform will not move the object. What you are looking for is an animation of the RenderTransform property:

You have to put a TranslateTransform into Ellipse.RenderTransform and change Storyboard.TargetProperty:

<Ellipse Opacity="0.7" Width="150" Height="50" StrokeThickness="5" Stroke="Black">
    <Ellipse.RenderTransform>
        <TranslateTransform />
    </Ellipse.RenderTransform>
    <Ellipse.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard RepeatBehavior="Forever" AutoReverse="True">
                        <DoubleAnimation From="0" To="100" Duration="0:0:2"
                            Storyboard.TargetProperty="RenderTransform.Y" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Ellipse.Triggers>
</Ellipse>

Upvotes: 2

Related Questions