ScaleTransform and CenterX

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. T开发者_如何转开发he values in CenterX and CenterY do nothing. How can I make it Scale as I want?

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

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.

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

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.

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>

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>