In this article we will be seeing how to create Silverlight Translate Transform
using Visual studio 2010.
Transform classes in Silverlight are used to rotate, scale, skew and translate
objects. In this we will be seeing the Translate Transform and its properties.
Namespace: System.Windows.Media
Assembly: System.Windows
Translate Transform:
It is used todefine an axis-aligned translation along the x and y axes. It is
defined by the following properties.
- X
- Y
X Property:
It is used to specify the distance to translate (move) an object along the
x-axis.
<Canvas
Height="200"
Width="200"
Background="Gray">
<Rectangle
Canvas.Left="75"
Canvas.Top="75"
x:Name="rect"
Height="50"
Width="50"
Fill="Black"
Opacity="0.5">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="translateTransform"
X="25"
></TranslateTransform>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
Y Property:
It is used to specify the distance to translate (move) an object along the
y-axis.
<Canvas
Height="200"
Width="200"
Background="Gray">
<Rectangle
Canvas.Left="75"
Canvas.Top="75"
x:Name="rect"
Height="50"
Width="50"
Fill="Black"
Opacity="0.5">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="translateTransform"
Y="25"
></TranslateTransform>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
X=25; Y=25;
<Canvas
Height="200"
Width="200"
Background="Gray">
<Rectangle
Canvas.Left="75"
Canvas.Top="75"
x:Name="rect"
Height="50"
Width="50"
Fill="Black"
Opacity="0.5">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="translateTransform"
Y="25"
X="25"
></TranslateTransform>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
Steps Involved:
Creating a Silverlight Application:
- Open Visual Studio 2010.
- Go to File => New => Project.
- Select Silverlight from the Installed
templates and choose the Silverlight Application template.
- Enter the Name and choose the location.
- Click OK.
- In the New Silverlight Application wizard
check the "Host the Silverlight Application in a new Web site".
- Click OK.
Creating the UI:
Open MainPage.xaml file and replace the code with the below one.
<UserControl
x:Class="SilverlightTranslateTransform.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Canvas
Height="200"
Width="200"
Background="Gray">
<Rectangle
Canvas.Left="75"
Canvas.Top="75"
x:Name="rect"
Height="50"
Width="50"
Fill="Black"
Opacity="0.5">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="translateTransform"
Y="25"
X="25"
></TranslateTransform>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
Testing the solution:
- Build the solution.
- Hit ctrl+F5.