Introduction
Sometimes it is necessary to perform 2-D transformation operations on an object. The possible 2-D Transformation operations include Scaling, Rotation, Skewing and Transformation. Transformation means that the object is to be transformed from one place to another in other words the location is changed. Rotation means that an object is rotated by an angle, or an axis (x, y or z). Scaling changes the shape of an object in any axis (X, Y and Z). Skewing changes the size of any object in any axis. Since in this article I am only explaining 2-D transformations, the operations are performed only to the X and Y axes.
In this article I will explain one of the four operations of 2-D Transformations, that is "Scaling" that applies to any object (in this the object is an image) to change the shape of the image. For this I use the Render transform property of the image and the composite transform property as:
<Image Source="Red_Rose.jpg" Grid.Row="3" Grid.Column="1" Margin="70,91,-197,-236" >
<Image.RenderTransform>
<CompositeTransform x:Name="Scaling"/>
</Image.RenderTransform>
</Image>
In this the Scaling in the composite transform is the name of the operation that I perform; this will be passed at the time of binding of the control that performs scaling in an image. The control that I take for binding is the Slider control, so that when I change the value of the slider control the shape of the image will be changed, as:
<Slider Name="ScaleX" Grid.Row="1" Grid.Column="1" Margin="10,0,0,0" Width="200" StepFrequency="0.1" Minimum="0" SmallChange="0.01" LargeChange="0.05" Maximum="2" Value="{Binding ElementName=Scaling, Path=ScaleX, Mode=TwoWay}"/>
The complete code that will be written in your MainPage.xaml file inside your Windows Store apps is:
<Page
x:Class="Scaling.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Scaling"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
Join the conversation! Your thoughts help the community grow.