CODEWITHSUNDEEP
c#.netwpfxamlanimation
masterchris_99
masterchris_99

Reputation: 2733

Image pop out "right-to-left" with storyboard animation

I found a good example for a pop out image: http://tozon.info/blog/post/2007/10/14/three-ways-to-make-your-wpf-images-pop-out-on-mouseover.aspx

the problem is I need to grow it in the opposite direction. The image in the example grows from left to right. I want it to grow to the left side.

<!-- This storyboard will make the image grow to double its size in 0.2 seconds -->
<Storyboard x:Key="expandStoryboard">
  <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
                   To="2"
                   Duration="0:0:0.2" />
  <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
                   To="2"
                   Duration="0:0:0.2" />
</Storyboard>
<!-- This storyboard will make the image revert to its original size -->
<Storyboard x:Key="shrinkStoryboard">
  <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
                   To="1"
                   Duration="0:0:0.2" />
  <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
                   To="1"
                   Duration="0:0:0.2" />
</Storyboard>

Upvotes: 1

Views: 1067

Answers (1)

torrential coding
torrential coding

Reputation: 1765

Use RenderTransformOrigin to make the image pop out from right-to-left by defining the origin as new Point(1,0.5) in code behind, or <Image ... RenderTransformOrigin="1,0.5" /> in XAML. You may want to use 1 instead of 0.5 for the yOrigin if you want the image to scale out from the bottom right corner.

Upvotes: 3

Related Questions