Using Perspective Transforms inside ListBox ItemTemplate

published on: 4/28/2011 | Views: N/A | Tags: ListBox Styling UI

by WindowsPhoneGeek

In this short post I am going to talk about how to use Perspective Transforms in order to build a perspective UI in Silverlight for Windows Phone 7.

I will use a data bound ListBox and will add some 3-D like effects to the elements inside its ItemTemplate so that the final result should be:

 

To begin with lets first create a sample Windows Phone 7 application project and add a ListBox inside MainPage.xaml.

In general you can apply 3-D effects to any UIElement  using the so called "Perspective Transforms".The PlaneProjection class is used to create a perspective transform (a 3-D effect) on an object. It defines how the transform is rendered in space.  Every UIElement has a Projection property which gets or sets the perspective projection (3-D effect) to apply when rendering.

Note:Perspective transforms are not equivalent to a 3-D engine; however, they can be used to make 2-D Silverlight content appear as if it is drawn on a 3-D plane. (You can also take a look at our previous article for reference: Animating ListBox SelectedItem with flipping effect in WP7)

In our case we will use a simple rectangle(alternatively you can use an Image or another UIElement) as a base and will transform it using PlaneProjection  with RotationY="-125" and RotationY="125".  Here are the steps:

1. Transformation with RotationY="-125"

 <Rectangle Fill="YellowGreen" Height="100" Width="100" Margin="0,0,-20,0">
    <Rectangle.Projection>
            <PlaneProjection RotationY="-125"  ></PlaneProjection>
    </Rectangle.Projection>
</Rectangle>

2.Transformation with RotationY="-125"

<Rectangle Fill="YellowGreen" Height="100" Width="100" Margin="-20,0,0,0">
    <Rectangle.Projection>
        <PlaneProjection RotationY="125" ></PlaneProjection>
    </Rectangle.Projection>
</Rectangle>

3. Using Perspective Transforms inside ListBox ItemTemplate

Finally just populate the ListBox with a sample data and add the following code inside its ItemTemplate:

<ListBox x:Name="list">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <StackPanel Orientation="Horizontal" Margin="10">
                    <Rectangle Fill="YellowGreen" Height="100" Width="100" Margin="0,0,-20,0">
                    <Rectangle.Projection>
                            <PlaneProjection RotationY="-125"  ></PlaneProjection>
                    </Rectangle.Projection>
                </Rectangle>
                <Rectangle Fill="YellowGreen" Height="100" Width="100" Margin="-20,0,0,0">
                    <Rectangle.Projection>
                        <PlaneProjection RotationY="125" ></PlaneProjection>
                    </Rectangle.Projection>
                </Rectangle>
                    <Rectangle Fill="YellowGreen" Height="96" Width="300" Margin="-21,0,0,0" />
                    </StackPanel>
                <TextBlock Text="{Binding}" FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

 this.list.ItemsSource = new List<string>() { "item1", "item2", "item3", "item4" };

That was all about how to use Perspective Transforms inside a ListBox ItemTemplate in Silverlight for WP7. Here is the full source code:

I hope that the article was helpful.

You can also take a look at our previous article: Animating ListBox SelectedItem with flipping effect in WP7

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Using Perspective Transforms inside ListBox ItemTemplate'

Title Your Name

Comment