New Dimensions still same after applying ScaleTransfrom on RenderTransfrom property - wpf

Question

I get the same dimensions after I do a scale transfrom on the rendered transfrom property. Here is the code:
shape.Width = 100; shape.Height=100;
shape.RenderTransform = new ScaleTransform(.5, .5);
textBox.text = shape.ActualWidth + " " + shape.ActualHeight;
I've tried getting the rendered geometry bounds' width and height, and still the same. I also tried LayoutTransfrom, still didn't work. What am I doing wrong, any help would be appreciated.

Answer 1

Try setting LayoutTransform instead of RenderTransform.

Answer 2

The main difference between LayoutTransform and RenderTransform is when the transform is applied. When using Render Transform the full size of the object is used during the layout process, and only after that has finished the object is transformed. Other elements are ot influenced by this. With LayoutTransform the object is transformed during the layout phase already, which means that for all intended purposes the bounding box of the object changes. All other elements adapt to this change as well.
Neither will change ActualWidth or ActualHeight, as this would influence the inner layout of the object that's being transformed rendereing the transform operation useless.
You can see this in the following example I whipped up for you:
<StackPanel>
<Border Name="OuterBorder1" HorizontalAlignment="Left" VerticalAlignment="Top" Background="Yellow">
<Border Width="100" Height="100" Background="Green" Name="Border1" />
</Border>
<Button Content="Normal" Click="Normal_Click"/>
<Button Content="Layout Transform" Click="Layout_Click"/>
<Button Content="Render Transform" Click="Render_Click"/>
<TextBlock Text="{Binding Path=ActualWidth, ElementName=Border1}"></TextBlock>
<TextBlock Text="{Binding Path=ActualWidth, ElementName=OuterBorder1}"></TextBlock>
</StackPanel>
When you press the buttons, the following actions are attached:
private void Normal_Click(object sender, RoutedEventArgs e)
{
Border1.RenderTransform = new ScaleTransform(1, 1);
Border1.LayoutTransform = new ScaleTransform(1, 1);
}
private void Layout_Click(object sender, RoutedEventArgs e)
{
Border1.RenderTransform = new ScaleTransform(1, 1);
Border1.LayoutTransform = new ScaleTransform(0.5, 0.5);
}
private void Render_Click(object sender, RoutedEventArgs e)
{
Border1.LayoutTransform = new ScaleTransform(1, 1);
Border1.RenderTransform = new ScaleTransform(0.5, 0.5);
}
The OuterBorder1 has an override on alignment to make sure it fits tight around the item.
As you can see, with RenderTransform neither size changes. With LayoutTransform the transformed element's width remains the same, but the container surrounding it is influenced.

Answer 3

Try and wait till the tranform finishes, the way we can know it is by using a fast 1 miilisecond DoubleAnimation and its Completed event. In this event handler check for new dimesions.
<Button x:Name="MyButton" Content="A Button"
RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="AnimatedRotateTransform"
Storyboard.TargetProperty="Angle"
To="360" Duration="0:0:0.1" FillBehavior="Stop"
Completed="RenderTransform_Completed" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
Code behind ...
private void RenderTransform_Completed(object sender, EventArgs e)
{
textBox.text = AnimatedRotateTransform.Angle;
}