Angle Transformation of Image in WPF

Introduction

While using a Graphical User Interface, sometimes we need to provide certain functionalities for our convenience like sliding images depending on our needs, the image is shifted wherever we want to shift it by simply using the sliders. So in order to provide that facility, certain functionality is to be created to which we can call a transformation explorer.

Background

Here I tried using sliders with the height and valuechanged properties, also provided the labels Skew-x for rotating about an angle along X-axis and Skew-y for rotating about an angle along the Y-axis.

Solution

We will need to provide slider parameters to specify which Axis they will correspond to, in other words either x-axis or y-axis.

Step 1

First we will make a class Scene1 that is public partial, in that we will declare two classes, namely TransformGroup and SkewTransform with their respective objects.

using System;

using System.IO;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Navigation;

using System.Windows.Shapes;

 

namespace TranformationExplorer

{

public partial class Scene1

{

        private TransformGroup trGrp;

        private SkewTransform trSkw;

} 

 

Step 2

 

Now we will make Constructor of that class named scene1 inside this class and initialize the variables trSkew and trGrp corresponding to classes SkewTransform and TransformGroup. We will pass values to the constructor new SkewTransform(0,0) to set the default values, also use the Children. Add Function to add values of variable trSkew to the variable trGrp of the TransformGroup class.

 

public Scene1()

{

           this.InitializeComponent(); 

           trSkw = new SkewTransform(0, 0);

            trGrp = new TransformGroup();

            trGrp.Children.Add(trSkw);

 }

 

 Step 3

 

We will use "renderTransform", a UIElement property and will assign a "trGrp" variable to that. This will contribute to the transformation effect.

        private void OnSceneLoaded(object sender,

                                 System.Windows.RoutedEventArgs e)

        {

            rect.RenderTransform = trGrp;

          }

 

Step 4

 

We will make the "onValueCahnged" event protected and under that event, all the  values of variables "slTrns" and "slTrnY" will be stored to the "trSkw.AngleX" and "trSkew.AngleY" labels, so that whatever will be the changed in the angle values along the x-axis or y-axis will be reflected in the rectangle holding the image.

 

        protected void OnValueChanged(object sender,

                                 System.Windows.RoutedEventArgs e)

        {

            trSkw.AngleX = slSkwX.Value;

            trSkw.AngleY = slSkwY.Value;
         }

Here is an example of a tranformation through the angles:

 <Grid 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:d="http://schemas.microsoft.com/expression/interactivedesigner/2006"

mc:Ignorable="d"

Background="#FFFFFFFF" 

x:Name="DocumentRoot"

x:Class="TranformationExplorer.Scene1" 

Width="653" Height="517"

Loaded="OnSceneLoaded">

 

<Grid.Resources>

<Storyboard x:Key="OnLoaded"/>

</Grid.Resources>

 

<Grid.Triggers>

<EventTrigger RoutedEvent="FrameworkElement.Loaded">

<BeginStoryboard x:Name="OnLoaded_BeginStoryboard" Storyboard="{DynamicResource OnLoaded}"/>

</EventTrigger>

</Grid.Triggers>

 

<Grid.ColumnDefinitions>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition/>

</Grid.RowDefinitions>

 

<Rectangle Stroke="#FF000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 

Margin="198,80,260,230" Width="Auto" Height="Auto" x:Name="rect">

<Rectangle.Fill>

<ImageBrush ImageSource="NeWFolder1/ab.jpg" />

</Rectangle.Fill>

</Rectangle>

 

 <Label Height="21.2766666666667" HorizontalAlignment="Left" Margin="2,0,0,7" 

 VerticalAlignment="Bottom" Width="55">Skew X:</Label>

  <Slider Height="26" HorizontalAlignment="Left" LargeChange="0.1" Margin="49,0,0,0" Maximum="50" 

Minimum="-50" SmallChange="0.1" VerticalAlignment="Bottom" Width="157" Name="slSkwX" 

ValueChanged="OnValueChanged" />

  <Label Height="21.2766666666667" HorizontalAlignment="Left" Margin="203,0,0,7" 

VerticalAlignment="Bottom" Width="48">Skew Y:</Label>

  <Slider Height="26" LargeChange="0.1" Margin="248,0,235,0" Maximum="50" Minimum="-50"

 SmallChange="0.1" VerticalAlignment="Bottom" Name="slSkwY" ValueChanged="OnValueChanged" />

</Grid>

 

In the code above, we used a rectangle along with parameters and also the "ImageBrush" to fill or paint that rectangle. Before this we will put an an image in the Imagebrush using the "Imagesource" property. And then we have assigned the Slider properties and label properties.

Output

And here is the output that you will get after running the application: