ScaleTransform and CenterX

Question

I have the following code

    <Canvas Width="800" Height="600">

...

In the UserControl I animate the ScaleTranform to 1. I want UserControl to "grow" from its center, but it "grows" from the upper left corner of it. The values in CenterX and CenterY do nothing. How can I make it Scale as I want?

Thanks in advance.

Answer 1

To make it grow from its center, you'll have to animate its margins as well (at half the rate at which you animate the width and height).

Answer 2

I ran into this problem not too long ago as well. I ended up repositioning the user control at every layout update to simulate a custom point based growth.

Answer 3

This does work for me. Did I miss something?

<Rectangle StrokeThickness="1" Stroke="Black" Width="200" Height="200">    
  <Rectangle.RenderTransform>
    <ScaleTransform 
       ScaleX="{Binding ElementName=slider, Path=Value}" 
       ScaleY="{Binding ElementName=slider, Path=Value}"
       CenterX ="100" CenterY="100"/>
  </Rectangle.RenderTransform>
</Rectangle>