Rotation of Images About 360 Degree Angle Using Sliders in WPF

 Introduction

When we operate on a Graphical User Interface , at times we need to provide certain functionalities for convenience, like rotating the images according to our needs, the image is rotated wherever we want to rotate it using simply the sliders. So in order to provide it, certain functionality is to be created to which we can call a Rotation Slider.

Background

Here I tried using sliders with vertical allignment and valuechanged properties and provided the label for rotating about an angle through the center-point.

Solution

We will need to provide slider parameters to specify  that the image will rotate around 360 degrees through the center while moving the sliders.

Procedure

Step 1

First we will make a class Rotate1 that is public partial, in that we will declare two classes namely "TransformGroup" and "RotateTransform" 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 RotationSlider

{

public partial class Rotate1

{

        private TransformGroup trGrp;

        private RotateTransform trRot;

} 

 

Step 2

 

Now we will make a constructor of that class named "Rotate1" inside this class and initialize the variables "trRot" and "trGrp" corresponding to the classes "RotateTransform" and "TransformGroup". We will pass values to the constructor "new RotateTransform(0)" to set the default values. Also use the "Children.Add" function to add values of the variable "trRot" to the variable "trGrp" of the "TransformGroup" class,

 

public Rotate1()

{

this.InitializeComponent();

 

           trRot = new RotateTransform(0); 

            trGrp = new TransformGroup(); 

            trGrp.Children.Add(trRot);

 }

 

 Step 3

 

We will use "renderTransform", a UIElementproperty 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 an "onValueCahnged" event protected under that event, and the values of the variables "slRot" will be stored to "trRot.Angle" that is a dependency property in which "trRot" is an object of the class "RotateTransform" and Angle is the property of the class "RotateTransform". So that whatever is changed in the Angle values along the 360 degrees will be reflected in the rectangle holding the image.

 

protected void OnValueChanged(object sender,

                                 System.Windows.RoutedEventArgs e)

        {

            trRot.Angle = slRot.Value;

            

        }

Here is an example of rotation through angles along 360 degress.

 <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 VerticalAlignment="Bottom" Margin="2,0,134,69" Content="Rotate angle:"

 Height="23.2766666666667" />

<Slider VerticalAlignment="Bottom" Margin="76,0,292,67" Height="24" x:Name="slRot"

 Maximum="360" ValueChanged="OnValueChanged"/>

</Grid>

 

In the code above, we have used the rectangle along with parameters and also the Image Brush to fill or paint that rectangle. Before this we will put an an image in an Image brush using "Imagesourceproperty". And then we have assigned the Slider properties and label properties.

Output

Here is the sequence of outputs you will get after running your application. Just shift the slider from left to right and the image will rotate clockwise as shown below: