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.
Here I tried using sliders with vertical allignment and valuechanged properties and provided the label for rotating about an angle through the center-point.
We will need to provide slider parameters to specify that the image will rotate around 360 degrees through the center while moving the sliders.
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: