Click here to Skip to main content
11,495,869 members (59,303 online)
Click here to Skip to main content

3D effects in Windows Store App

, 2 Feb 2014 CPOL 4.4K 5
Rate this:
Please Sign up or sign in to vote.
A description of how images and other controls can be rotated and used to give 3d Effect in Windows Store Apps

Introduction

3D effects can be applied to Windows Store apps using Transforms. Rotation of an object is possible along all the Three axis : X, Y and Z. Object appears to be Rotated by the respective angle supplied to it through the transfor.

Background 

This article helps to get acquainted to the various rotation that can be carried out on a xaml object.

Using the code

In this example, we will take a look into PlaneProjection, it’s rotation angle and Center of rotation. All three play a crucial role in 3D designs in XAML.
PlaneProjection exposes to various properties that can be used to give a 3D effect. In which the RotationAngle helps us to decide the angle by which the object is to be rotated.
CenterOfRotation property decides the point about which the object is to be rotated.
We will see the rotation by an angle and the change of CenterOfRotation, how it differs from the default Point about which it is rotated.  

 Following is the image for reference of the Entire code and a better understanding

 

The top row shows the Images with rotation and default Center of rotation ie: 0.5 which means the images are to be rotated with the specified angle and the point of rotation will be the center of the image. Where CenterOfRotation being defined on a scale of 0 to 1 – 0.5 being the center.
In the 2nd Row we have the same images to be rotated with the ssame angle of rotation but varying center of rotation. As a result they appear more tilted in some case.

How to specify the center of rotation:

From the example we see that if rotation is along X axis then Center of Rotation has been mentioned as Y and vice versa. It is because when an Image is rotated along the X axis the effected points along which rotation can occur lies on the Y axis and vice versa. Simillarly in case of rotation along Z axis the points lie on Both X & Y as a result both are mentioned. 

 

Below is the code snippet: 

<Grid>
        <Grid.Background>
            <ImageBrush ImageSource="Your BackGround" />
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
<!--Start of Rotation without specifying the center of rotation : By Default 0.5-->
        <StackPanel>
            <Image Source="Path to your own Image" Height="350" Width="350">
                <Image.Projection>
                    <PlaneProjection RotationY="-60" />
                </Image.Projection>
            </Image>
            <TextBlock FontSize="13" HorizontalAlignment="Center">Rotation along Y axis -60 Degrees and Default CenterOfRotation</TextBlock>
        </StackPanel>
        <StackPanel Grid.Row="0" Grid.Column="1">
            <Image Source="Path to your own Image" Height="350" Width="350" >
                <Image.Projection>
                    <PlaneProjection RotationX="60" />
                </Image.Projection>
            </Image>
            <TextBlock FontSize="13" HorizontalAlignment="Center">Rotation along X axis 60 Degrees and Default CenterOfRotation</TextBlock>
        </StackPanel>
        <StackPanel Grid.Row="0" Grid.Column="2">
            <Image Source="Path to your own Image" Height="300" Width="300" >
                <Image.Projection>
                    <PlaneProjection RotationZ="-50" />
                </Image.Projection>
            </Image>
            <TextBlock FontSize="13" HorizontalAlignment="Center">Rotation along Z axis -50 Degrees and Default CenterOfRotation</TextBlock>
        </StackPanel>
<!--Start of Rotation by specifying the center of rotation : Rotation about a point-->
        <StackPanel Grid.Row="1" Grid.Column="0">
            <Image Source="Path to your own Image" Height="350" Width="350" >
                <Image.Projection>
                    <PlaneProjection RotationY="-60" CenterOfRotationX="1" />
                </Image.Projection>
            </Image>
            <TextBlock FontSize="13" HorizontalAlignment="Center">Rotation along Y axis -60 Degrees and CenterOfRotation on X= 1</TextBlock>
        </StackPanel>
        <StackPanel Grid.Row="1" Grid.Column="1">
            <Image Source="Path to your own Image" Height="350" Width="350" >
                <Image.Projection>
                    <PlaneProjection RotationX="60" CenterOfRotationY="1" />
                </Image.Projection>
            </Image>
            <TextBlock FontSize="13" HorizontalAlignment="Center">Rotation along X axis 60 Degrees and CenterOfRotation on Y= 1</TextBlock>
        </StackPanel>
        <StackPanel Grid.Row="1" Grid.Column="2">
            <Image Source="Path to your own Image" Height="300" Width="300" >
                <Image.Projection>
                    <PlaneProjection RotationZ="-50" CenterOfRotationX="0.7" CenterOfRotationY="0.7" />
                </Image.Projection>
            </Image>
            <TextBlock FontSize="13" HorizontalAlignment="Center">Rotation along Z axis -50 Degrees and Default CenterOfRotation on X and Y= .7</TextBlock>
        </StackPanel>
</Grid> 

Points of Interest 

Using the plane projection with respective controls the 3D Effect can be formed for Controls available for windows store app. Main role in a 3D effect is played by the RotationX, RotationY and RotationZ properties which is used to specify the angle of rotation. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

AnobikDey
Software Developer Mindfire Solutions
India India
No Biography provided

Comments and Discussions

 
GeneralMy vote of 1 Pin
dafgfddfgv4-Feb-14 8:36
memberdafgfddfgv4-Feb-14 8:36 
GeneralRe: My vote of 1 Pin
AnobikDey4-Feb-14 17:45
professionalAnobikDey4-Feb-14 17:45 
QuestionGood Tip Pin
Pranay Rana3-Feb-14 7:42
memberPranay Rana3-Feb-14 7:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 3 Feb 2014
Article Copyright 2014 by AnobikDey
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid