1

I want to create a animation with WPF, but I dont know the right way. The animation should be async. The animation should be a rectangle that grows (height)

Image

. Is a canvas object for something like that a good choose?

Maybe someone of you can give me a helpfull link. I don't want any code snippets.

EGHM
  • 2,144
  • 23
  • 37
MyNewName
  • 1,035
  • 2
  • 18
  • 34
  • Do you mean that is scales up, or that you already have images that you want to put in? – Ian H. Nov 20 '15 at 19:47
  • @IanH. It should be a one color rectangle (nothing is inside the rectangle). And this rectangle should grow in the height. – MyNewName Nov 20 '15 at 19:50
  • There are many ways, so it's hard for anyone to tell you the right way. You would need to provide us with the specifications of your scenario, in detail, for us to make a judgement; otherwise, this is an opinion-based call. – B.K. Dec 27 '15 at 07:17

1 Answers1

0

Links :

  1. Animation Overview : MSDN

  2. Animation How-To : MSDN

In your case, problem is "Height grows downward or both up/down (50%) each". To make Rectangle grow only upwards poses few small challenges.

  1. How to animate an attached property like Canvas.Top. ( Approach 1)

  2. How to animate a Scale Transform. ( Approach 2 )

Animating Attached-Property

Animating Transforms

I am posting a working code using Canvas (Approach 1).

<Canvas Margin="482,125,206,10" Background="MediumSeaGreen">
    <Rectangle x:Name="Rect" Fill="#FF030315"  Height="100"  Stroke="Black" Width="42" Canvas.Top="222">
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
                <EventTrigger.Actions>
                    <BeginStoryboard x:Name="Sb">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" Storyboard.TargetName="Rect" By="-100" Duration="0:0:5"/>
                            <DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="Rect" By="100" Duration="0:0:5"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
                <EventTrigger.Actions>
                    <PauseStoryboard BeginStoryboardName="Sb" />
                </EventTrigger.Actions>
            </EventTrigger>

        </Rectangle.Triggers>
    </Rectangle>
</Canvas>
Community
  • 1
  • 1
AnjumSKhan
  • 9,647
  • 1
  • 26
  • 38