WPF contains
built in 2D Transform classes which enables you to changes the position of the
elements. These transform classes derived from System.Windows.Media.Transform
namespace. WPF contains two types properties in Transforms which are applicable to all
FrameworkElements, those are LayoutTransform and RenderTransform.
By using
LayoutTransform we can apply the transform before the element layout finishes
whereas with RenderTransform we can apply transform after element layout finishes
and before it renders. In this article we will discuss about both these
transforms with examples.
LayoutTransform:
As we
discussed with the help of LayoutTransform we can change the position of the
element before its layout finishes. That means element position will apply immediately,
it will not wait until the element layout finishes. We will check this with
simple example.
Open
Microsoft Visual Studio 2013 => Create WPF application and below code.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Width="200" Height="50" VerticalAlignment="Top">
Top
</Button>
<Button Width="200" Height="50" VerticalAlignment="Center">
<Button.LayoutTransform>
<RotateTransform Angle="50"></RotateTransform>
</Button.LayoutTransform>
Center
</Button>
<Button Width="200" Height="50" VerticalAlignment="Bottom">
Bottom
</Button>
</Grid>
</Window>
As shown
above we apply the LayoutTransform for second button with 50 degree angle, so
it pushes the bottom button and occupies the place as shown below.
RenderTrasform:
RenderTransform
also will transform the elements, but it positions the elements after all
elements layout is finished and before the element renders. With the help of
RenderTransform we can position the element after all layout finishes, let’s
check with simple example.
Write below
code and executes in Microsoft Visual Studio 2013.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Width="200" Height="50" VerticalAlignment="Top">
Top
</Button>
<Button Width="200" Height="50" VerticalAlignment="Center">
<Button.RenderTransform>
<RotateTransform Angle="50"></RotateTransform>
</Button.RenderTransform>
Center
</Button>
<Button Width="200" Height="50" VerticalAlignment="Bottom">
Bottom
</Button>
</Grid>
</Window>
As shown
above we apply the RenderTransform for the center button, run the application
it displays the output as shown below.
As shown
above, the center button positioning after all elements layout finished that’s why
bottom button is coming on the center button.
RenderTransformOrigin: RenderTransformOrgin is used to set
the element position while applying the RenderTransform. It can be set to
System.Windows.Point where (0,0) is the default value. You can set any value
for RenderTransformOrgin, (0,0) represents top-left corner, (0,1) represents
bottom-left corner, (1,0) represents top-right corner, and (1,1) represents bottom
right corner. You can set values greater than 1 also.
Elements
with RenderTransformOrgin (0,0) displays as shown below.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Width="200" Height="50" VerticalAlignment="Top">
Top
</Button>
<Button Width="200" Height="50" RenderTransformOrigin="0,0" VerticalAlignment="Center">
<Button.RenderTransform>
<RotateTransform Angle="50"></RotateTransform>
</Button.RenderTransform>
Center
</Button>
<Button Width="200" Height="50" VerticalAlignment="Bottom">
Bottom
</Button>
</Grid>
</Window>
Output:
Elements
with RenderTransformOrgin (0,1) displays as shown below.
Elements
with RenderTransformOrgin (1,0) displays as shown below.
Elements
with RenderTransformOrgin (1,1) displays as shown below.
Elements
with RenderTransformOrgin (2,2) displays as shown below.
There are five types of built-in 2D Transforms in WPF, we will discuss about built-in Transforms in my next article.