WPF: Rotation and Scale Transform Example

This is a simple example which explains how we can apply render and scale transform.

In this example we have an image and we will apply scale and render transform to this image.

Render transform will help us to rotate the image at specific angle. Similarly, Scale Transform will reduce or increase the size of image in X or Y axis direction.

In the example we have used: 
1)      Image 
2)      3 Scrollbars which are bounded with angle of rotation, scale x and scale y property.

Here is the XAML source code for the same:

<StackPanel Orientation="Vertical">

                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Margin="5,0">

                    <StackPanel Orientation="Vertical">

                        <Label x:Name="lblAngle" Content="Angle"/>

                        <ScrollBar Name='angle' Orientation='Horizontal' Grid.Row="0" BorderBrush="Gray" Value='0' Minimum='0' Maximum='360' Width="100"/>

                    </StackPanel>

                    <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" Margin="5,0">

                        <Label x:Name="lblScaleX" Content="Scale X" />

                        <ScrollBar Name='scaleX' Orientation='Horizontal' Grid.Row="0" BorderBrush="Gray" Value='1' Minimum='0.1' Maximum='10' Width="100" />

                    </StackPanel>

                    <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" Margin="5,0">

                        <Label x:Name="lblScaleY" Content="Scale Y" />

                        <ScrollBar Name='scaleY' Orientation='Horizontal' Grid.Row="0" Value='1' BorderBrush="Gray" Minimum='0.1' Maximum='10' Width="100"/>

                    </StackPanel>               

                </StackPanel>

                <Image x:Name='myImage' Source="Resources\home.png" Height="80" Width="80" HorizontalAlignment="Left" Margin="60,10,10,0" Grid.Row="1" Visibility='Visible' >

                    <Image.LayoutTransform>

                        <ScaleTransform  CenterX="0" CenterY="0"

                                         ScaleX="{Binding ElementName=scaleX,Path=Value,Mode=TwoWay}"

                                         ScaleY="{Binding ElementName=scaleY,Path=Value,Mode=TwoWay}"/>

                    </Image.LayoutTransform>

                    <Image.RenderTransform>

                        <RotateTransform Angle='{Binding ElementName=angle,Path=Value,Mode=TwoWay}' />

                    </Image.RenderTransform>

                </Image>

            </StackPanel>

Screenshots:

Initial Screen without any transformation

Rotate Transform

                                                                  

Scale Transform