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?

Answer 1

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

Answer 2

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.