#770 – The Difference Between a LayoutTransform and a RenderTransform
March 6, 2013 4 Comments
When you are transforming user interface elements using a 2D transform, you can choose one of two types of transforms.
- A LayoutTransform transforms elements before they are layed out by the parent panel
- A RenderTransform transforms element after they are layed out by the parent panel (but before they are rendered)
Which one you use depends on whether you want transform and then lay out (use LayoutTransform) or to lay out and then transform (use RenderTransform). (Note: You could also use both types).
<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Vertical"> <Label Content="LayoutTransform"/> <Button Content="Push Me" Style="{StaticResource buttonStyle}"/> <Button Content="Push Me" Style="{StaticResource buttonStyle}"> <Button.LayoutTransform> <RotateTransform Angle="20"/> </Button.LayoutTransform> </Button> <Button Content="Push Me" Style="{StaticResource buttonStyle}"> <Button.LayoutTransform> <RotateTransform Angle="-20"/> </Button.LayoutTransform> </Button> </StackPanel> <StackPanel Orientation="Vertical"> <Label Content="RenderTransform"/> <Button Content="Push Me" Style="{StaticResource buttonStyle}"/> <Button Content="Push Me" Style="{StaticResource buttonStyle}"> <Button.RenderTransform> <RotateTransform Angle="20"/> </Button.RenderTransform> </Button> <Button Content="Push Me" Style="{StaticResource buttonStyle}"> <Button.RenderTransform> <RotateTransform Angle="-20"/> </Button.RenderTransform> </Button> </StackPanel> </StackPanel>
great example , thank you !
Pingback: #1,058 – Translation Makes No Sense within Layout Transforms | 2,000 Things You Should Know About WPF
Pingback: #1,060 – Clipping in Grid Happens Before Render Transforms | 2,000 Things You Should Know About WPF
thank you 🙂