CODEWITHSUNDEEP
wpfanimation
yossharel
yossharel

Reputation: 1929

How to resize from the center of element?

I want to show new window with animation that enlarge the size from 0 to 300. In the Loaded event, I put this code:

DoubleAnimation heightAnim = new DoubleAnimation(0,300,TimeSpan.FromSeconds(1));
BeginAnimation(HeightProperty,heightAnim);

DoubleAnimation WidthAnim = new DoubleAnimation(0,300,TimeSpan.FromSeconds(1));
BeginAnimation(WidthProperty,WidthAnim);

This code work fine. But the construction starts on top - left corner of window and it expanded to right and down until it got 300 * 300 size. I want it to start from the center and expand from there to all 4 sides. How can I do it?

p.s. after trying Jogy answer, I realized that maybe better approach to get this effect is to apply animation on ScaleX and ScaleY instead of applying animation on the window size. Because when animation on window size , user will see only part of the content until it got to full size. What do you think of ? What's better approach?

Thanks in advance!

Upvotes: 1

Views: 1820

Answers (2)

yossharel
yossharel

Reputation: 1929

In order to get this effect, I realized It's better use ScaleTransform. On Loaded event the code should be like this: 

ScaleTransform scaleTransform = new ScaleTransform();

the 'grid' is element under Window and it's HorizontalElignment and VerticalElignment set to 'Center'

grid.LayoutTransform = scaleTransform;

DoubleAnimation heightAnim = new DoubleAnimation(0,1,TimeSpan.FromSeconds(1));
scaleTransform.BeginAnimation(ScaleTransform.ScaleYProperty,heightAnim);

DoubleAnimation WidthAnim = new DoubleAnimation(0,1,TimeSpan.FromSeconds(1));
scaleTransform.BeginAnimation((ScaleTransform.ScaleXProperty,WidthAnim);

Upvotes: 2

Jogy
Jogy

Reputation: 2475

Add two more animations, for the Top and Left properties, like this:

  DoubleAnimation topAnim = new DoubleAnimation(this.Top, this.Top - 150, TimeSpan.FromSeconds(1));
  BeginAnimation(TopProperty, topAnim);

  DoubleAnimation leftAnim = new DoubleAnimation(this.Left, this.Left - 150, TimeSpan.FromSeconds(1));
  BeginAnimation(LeftProperty, leftAnim);

You may also want to synchronize the animations, by putting them in a Storyboard.

Upvotes: 1

Related Questions