Introduction
While using a Graphical User Interface, sometimes we need to provide certain functionalities for convenience like sliding the images depending on our needs, the image is shifted wherever we want to shift using simply the sliders. So in order to provide that, certain functionality is to be created to which we can call the Transformation Explorer.
Background
Here I tried using sliders with height and valuechanged properties that also provided the labels "trans-x" for moving along the X-axis and "trans-y" for moving along the y-axis.
Solution
We will need to provide slider parameters to specify that the axis 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 with their respective objects as in the following:
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 TranslateTransform trTns;
}
Step 2
Now we will make a constructor of that class named "scene1" inside this class and initialize the variables "trTns" and "trGrp" corresponding to the classes "TanslateTransform" and "TransformGroup".
We will pass values to the constructor "new TranslateTransform(0,0)" to set the default values. Also use the "Children.Add" function to add values of the variable "trTns" to the variable "trGrp" of "TransformGroup"
class as in the following:
public Scene1()
{
this.InitializeComponent();
trTns = new TranslateTransform(0, 0);
trGrp = new TransformGroup();
trGrp.Children.Add(trTns);
}
Step 3
We will use the "renderTransform", a "UIElementproperty" and will assign the "trGrp" variable to that. This will contribute to the transformation effect.
On the OnSceneLoaded Event
private void OnSceneLoaded(object sender, System.Windows.RoutedEventArgs e)
{
rect.RenderTransform = trGrp;
}
Step 4
We will make an "onValueCahnged" event protected and under that event, all the values of the variables "slTrns" and "slTrnY" will be stored to "trTns.X" and "trTns.Y" labels, so that whatever will be the changed in the 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)
{
trTns.X = slTrnX.Value;
trTns.Y = slTrnY.Value;
}
Here is an example of TranformationExplorer:
<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>
</Grid>
<Rectangle Stroke="#FF000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Margin="198,80,260,230" Width="Auto" Height="Auto" x:Name="rect">
<Rectangle.Fill>
<ImageBrush ImageSource="NeWFolder1/test.jpg" />
</Rectangle.Fill>
</Rectangle>
<Label Height="21.2766666666667" HorizontalAlignment="Left" Margin="2,0,0,102.723333333333"
VerticalAlignment="Bottom" Width="55">Trans X:</Label>
<Slider Height="25" LargeChange="0.1" Margin="50,0,319,98.7233333333334" Maximum="100"
Minimum="-100" SmallChange="1" VerticalAlignment="Bottom" Name="slTrnX"
ValueChanged="OnValueChanged"/>
<Label Height="21.2766666666667" HorizontalAlignment="Right" Margin="0,0,271,105.723333333333"
VerticalAlignment="Bottom" Width="48">Trans Y:</Label>
<Slider Height="23" HorizontalAlignment="Right" LargeChange="0.1" Margin="0,0,18,104" Maximum="100"
Minimum="-100" SmallChange="1" VerticalAlignment="Bottom" Width="253" Name="slTrnY"
ValueChanged="OnValueChanged"/>
In the code above, we have 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 Imagebrush using Imagesourceproperty. And then we have assigned the Slider properties and label properties.
Output
On running the application you will get the following output window.
Now on moving the left-slider Trans X, the image will move along the X-axis, in other words left or right as shown below:
1. On moving the Trans-X slider towards the left, the image will be shifted towards the left side.
2. On moving the Trans-X slider towards right, the image will get shifted to right side.
Similarly, moving the right slider Trans-Y, the image will move along the Y-axis, in other words up or down as shown below:
3. Now, on moving the Trans-Y slider towards the left, the image will move up.
4. Similarly, on moving the Trans-Y slider towards the right the image will move down.
Thus, in this way the article is completed.