correct way to animate objects in wpf and c#

Question

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)

. 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.

Answer 1

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>

Answer 2

我不太清楚您的意思，我对WPF也不太了解，但是我会绘制一个矩形，然后使用Timer重新绘制并调整其大小。