ScaleTransform and CenterX

Question

I have the following code

<Canvas Width="800" Height="600">
    ...
    <local:UpgradeLandDialog x:Name="upgradeDialog" Canvas.Left="250" Canvas.Top="200" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0">
        <local:UpgradeLandDialog.LayoutTransform>
            <ScaleTransform ScaleX="0" ScaleY="0" CenterX="400" CenterY="300"/>
        </local:UpgradeLandDialog.LayoutTransform>
    </local:UpgradeLandDialog>
</Canvas>

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?

I found the solution, use `RenderTransform` instead of `LayoutTransform` — Hossein Narimani Rad, Aug 05 '14 at 12:38
Using `RenderTransform` instead of `LayoutTransform` isn't "the solution", that's just a workaround. They are responsible for 2 different things, so if I'm restricted to use `LayoutTransform`, I'm not helped out. — aniski, May 26 '16 at 12:59

score 18 · Answer 1 · answered May 20 '11 at 09:42

18

You can use RenderTransformOrigin="0.5,0.5" on the control you want to animate.

answered May 20 '11 at 09:42

svick

236,525
50
385
514

4

LayoutTransform and RenderTransform do two different things. If you need LayoutTransform then this is not a solution. – denver Apr 08 '15 at 15:32

score 3 · Answer 2 · edited Oct 17 '15 at 08:07

You can change your code like this:

<Canvas Width="800" Height="600" RenderTransformOrigin="0.5,0.5">
    <local:UpgradeLandDialog x:Name="upgradeDialog" Canvas.Left="250" Canvas.Top="200" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0">
        <local:UpgradeLandDialog.LayoutTransform>
            <ScaleTransform ScaleX="0" ScaleY="0"/>
        </local:UpgradeLandDialog.LayoutTransform>
    </local:UpgradeLandDialog>
</Canvas>

Remove (CenterX="400" CenterY="300") and add (RenderTransformOrigin="0.5,0.5") to the Canvas. This way if you have a container with dynamic width and height, it can scale from the center without problem.

score 1 · Answer 3 · answered May 24 '10 at 15:21

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

answered May 24 '10 at 15:21

Eric Mickelsen

10,309
2
30
41

score 0 · Answer 4 · answered May 24 '10 at 15:22

0

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.

answered May 24 '10 at 15:22

Samuel DR

1,215
14
28

4

I think there are better ways to do this. – svick May 22 '11 at 18:49
How would you calculate the amount you need to move the user control? – FINDarkside Aug 13 '15 at 14:02

score 0 · Answer 5 · answered May 24 '10 at 15:43

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>

score 0 · Answer 6 · answered Jul 03 '21 at 18:40

Even though this is an old post, I thought I'd share my findings, since it took me way too long to figure out this fairly simple solution.

Flipping the y-axis was easy, but I couldn't get CenterX and CenterY working. I really needed to be able to set the origin at any position I wanted.

Solution: nested canvasses.

<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Canvas Canvas.Left="{Binding MyOriginLeft}" Canvas.Bottom="{Binding MyOriginBottom}">
        <Canvas.LayoutTransform>
            <ScaleTransform ScaleX="1" ScaleY="-1"/>
        </Canvas.LayoutTransform>

        <!-- This now does what you expect it to do, independent of position of origin -->
        <Line X1="10" Y1="20" X2="30" Y2="40" Stroke="Black" StrokeThickness="1"/>
    </Canvas>
</Canvas>

ScaleTransform and CenterX

6 Answers6