TRANSFORMATIONS

Render Transformation with the help of a slider.

1. Open visual studio (above ver. 2.0 )->File->New->Project
2. Select appropiate application type (Window/Page).
3. Create a root tag <stackPanel> under Window/Page tag , remove already given <grid> tag
4. Create a grid with 3 rows and 3 columns under Border Tag like this.
<StackPanel>
<Border BorderThickness="8"  BorderBrush="SkyBlue" CornerRadius="20">
            <Grid Width="275" Margin="2.5" Height="77">
                <Grid.RowDefinitions>
                    <RowDefinition Height="28*" />
                    <RowDefinition Height="23*" />
                    <RowDefinition Height="26*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="66*" />
                    <ColumnDefinition Width="128*" />
                    <ColumnDefinition Width="81*" />
                </Grid.ColumnDefinitions>
</Grid>
 </Border>  
4. Now, place three labels,three sliders and three textBoxes in between the closing tag  </grid.ColumnDefinitions> and </grid>
where,
label1 with text "For Rotate Transform" under first row and first column i.e grid.Row=0,grid.Column=0.
label2 with text "set x axis" under fsecond row and first column i.e grid.Row=1,grid.Column=0.
label2 with text "set y axis" under third row and first column i.e grid.Row=2,grid.Column=0.
               
e.g.
 <Label Content="For rotate transform" Grid.ColumnSpan="2" Margin="0,0,74,0" />
                <Slider  TickFrequency="2" Name="slider" Maximum="360" Minimum="-360" Grid.Column="1" />
                <TextBox Text="{Binding ElementName=slider,Path=Value}"  Grid.Column="2" Grid.ColumnSpan="2" Margin="20,0,0,0" />
                <Label Content="Set X Axis" Grid.Row="1" Margin="0,0,28,0" />
                <Slider IsSnapToTickEnabled="True" TickFrequency="2" Name="xslider" Maximum="360" Minimum="-360" Grid.Row="1" Grid.Column="1" />
                <TextBox Grid.Row="1" Text="{Binding ElementName=xslider,Path=Value}"  Grid.Column="2" Grid.ColumnSpan="2" Margin="20,0,0,0" />
                <Label Content="Set Y Axis" Grid.Row="2" Margin="0,0,28,0" />
                <Slider IsSnapToTickEnabled="True" TickFrequency="2" Name="yslider" Maximum="360" Minimum="-360" Grid.Row="2" Grid.Column="1" />
                <TextBox Grid.Row="2" Text="{Binding ElementName=yslider,Path=Value}"  Grid.Column="2" Grid.ColumnSpan="2" Margin="20,0,0,0" />
            </Grid>
Grid.Row="2" Text="{Binding ElementName=yslider,Path=Value}"  Grid.Column="3" />
            </Grid>
note:
Slider's attribute :
IsSnapToTickEnabled="True" , if u make this property false then you will get decimal values for cordinate in textbox
TickFrequency="2" ,  specifies the step value(increment value ) .


5. Place the following component under closing </border> Tag and   </StackPanel>tag. Two Labels , one for showing demo of RotateTransform ( rotate acc to the value specified by sliders) and other shows TranslateTransform ( to move label acc to x cordinate and y cordinate provided by slider) and the last one is ellipse to demostrate the example of skew Transformation.

 RotateTransform:

<Label Content="RotateTransform " FontFamily="Bell MT" FontSize="20" Height="33" Width="178">
            <Label.RenderTransform>
                <RotateTransform CenterY="{Binding ElementName=xslider,Path=Value}" CenterX="{Binding ElementName=xslider,Path=Value}" Angle="{Binding ElementName=slider,Path=Value}"/>
            </Label.RenderTransform>
        </Label>

TransLateTransform:

<Label Content="TranslateTransform " FontFamily="Bell MT" FontSize="20" Height="33" Width="178">
            <Label.RenderTransform>
                <TranslateTransform X="{Binding Path=Value, ElementName=xslider}" Y="{Binding Path=Value, ElementName=yslider}"/>
                </Label.RenderTransform>
        </Label>

SkewTransform:

<Ellipse Fill="pink" Height="85" Width="241">
            <Ellipse.Effect>
                <DropShadowEffect BlurRadius="10" ShadowDepth="11" Color="CadetBlue">       </DropShadowEffect>
            </Ellipse.Effect>
            <Ellipse.RenderTransform>
                <SkewTransform
CenterX="{Binding Path=Value, ElementName=xslider}"
CenterY="{Binding Path=Value, ElementName=yslider}"
AngleX="{Binding Path=Value, ElementName=xslider}"
AngleY="{Binding Path=Value, ElementName=yslider}"
/>
            </Ellipse.RenderTransform>
        </Ellipse>
</Window>

6.Now run (F5) to see  the effects by moving the sliders.

Note :

The TranslateTransform is one of the simplest transformations you can perform.The TranslateTransform simply moves (translates)
an element along a two-dimensional X and Y axis. A positive X value moves the element to the right; a negative value moves it to the left. Similarly, a positive Y value moves the element down, and a negative value moves it up. This is really an offset from the element’s original position. TranslateTransform is really just a convenience wrapper for setting the OffsetX and OffsetY properties
of the transform Matrix structure.