Silverlight Transform – XAML Transformation 101

One of the many advantages with Silverlight and WPF is how easy it is to transform Images, objects or even entire groups of controls. Here is an example on two ways to bend objects with XAML in a quick fashion

Starting out

I’ll start out with placing three images inside of a stackpanel. Nothing fancy. Looks like this at the moment

<StackPanel Orientation="Horizontal" Margin="0,100">
<Image Source="Images/V1.jpg" Margin="20" Width="240" Height="180">
</Image>
<Image Source="Images/V2.jpg" Margin="0" Width="240" Height="180">
</Image>
<Image Source="Images/V3.jpg" Margin="20" Width="240" Height="180">
</Image>
</StackPanel>

Scale Transform

The first thing I want to do is make the middle image look larger than the others. If I’m using something like coverflow, the focus should be on the middlemost item. I use Image.RenderTransform to insert a ScaleTransform. By changing ScaleX and ScaleY I’m able to enlarge the picture (here by 10%). I also set the image’s CenterX and CenterY to half of the Image’s height and width to make the image grow from the middle in a nice fashion.

<Image Source="Images/V2.jpg" Margin="10" Width="240" Height="180">
<Image.RenderTransform>
<ScaleTransform ScaleX="1.1" ScaleY="1.1" CenterX="120" CenterY="90"  />
</Image.RenderTransform>
</Image>

Projection

To create the Coverflow effect, I want to give the two other images a sense of 3d. To do this, I use Image.Projection and insert a PlaneProjection which I allow to rotate the images around their Y axis with RotationY. I give the left image a rotation of 30 and the right image a rotation of –30.

But wait!!! What is this, there is no change!?!

Oh noes!

This is because projections don’t take effect until the page renders. Try building and launching the page to see the result.

So beautiful I might start to weep

<StackPanel Orientation="Horizontal" Margin="0,100">
<Image Source="Images/V1.jpg" Margin="20" Width="240" Height="180">
<Image.Projection>
<PlaneProjection RotationY="30" />
</Image.Projection>
</Image>
<Image Source="Images/V2.jpg" Margin="10" Width="240" Height="180">
<Image.RenderTransform>
<ScaleTransform ScaleX="1.1" ScaleY="1.1" CenterX="120" CenterY="90"  />
</Image.RenderTransform>
</Image>
<Image Source="Images/V3.jpg" Margin="20" Width="240" Height="180">
<Image.Projection>
<PlaneProjection RotationY="-30" />
</Image.Projection>
</Image>
</StackPanel>

There we are

This is called a carousel and can be the start of something beautiful if we decide to animate it with Expression Blend.