开发者

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 开发者_JAVA百科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!


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);


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜