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 UserControl, I am animating ScaleTranform for 1. I want the UserControl to "grow" from its center, but it will "grow" from the upper left corner. The values in CenterX and CenterY do nothing. How can I make it scale as I want?
You can use RenderTransformOrigin="0.5,0.5" for the control you want to animate.
You can change your code as follows:
<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> Delete (CenterX="400" CenterY="300") and add (RenderTransformOrigin="0.5,0.5") to the canvas. Thus, if you have a container with dynamic width and height, it can scale without problems from the center.
To make it grow from its center, you will also have to animate its fields (at half the speed with which you change the width and height).
I ran into this problem not so long ago. I ended up overriding the user control every time I updated the layout to simulate the growth based on user points.
This works 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>