Silverlight Transform – XAML Transformation 101

3 03 2010

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

Silverlight XAML Transformation Projection

Starting out

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

Silverlight XAML Transformation Projection

<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.

Silverlight XAML Transformation Projection

<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!?!

Silverlight XAML Transformation Projection

Oh noes!

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

Silverlight XAML Transformation ProjectionSo 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.

Advertisements

Actions

Information

One response

11 03 2010
Markus Tamm » Blog Archive » Links 11.03.2010

[…] Silverlight Transform – XAML Transformation 101 (Viktor Larsson) […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: