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">
Join the conversation! Your thoughts help the community grow.