Rotation In 3-D Projection Using Windows Store App

Introduction

Today I will explain how to use 3-D Projection in Windows 8 apps. Also teach how to use the slider control in it. In this article I perform rotation in the X, Y and Z axes using the slider control. To see how it works you just use the following steps.

Step 1

Open Visual Studio 2012 RC and select File -> New -> Project. The "New Project" window is shown; in this select "Windows Store" from within the "Visual C#" node in the left pane and select "Blank App (XAML)" from the center pane, as shown in the following image. Give the project whatever name you want to give (I used "Rotation") and then click ok.

Step 2

Add any image that you want to rotate in this application by copying that image from where it resides and right-click on the project and then click paste. In this example the image "richa.jpg" will be copied to the application.

Step 3

Now to work with the 3-D Projection, we add the projection property of the image and define the PlaneProjection that is used to perform the rotation in the X, Y and Z axes; see:

<Image Source="richa.jpg" Grid.Row="4" Grid.Column="1" Width="300">

    <Image.Projection>

          <PlaneProjection x:Name="Rotation"/>

    </Image.Projection>

</Image>

Step 4

Add the slider control, so that when we change the value of the Slider X the image is rotated on the X axis according to that value. The same for the Slider Y and Slider Z. The Sliders have various properties like the minimum that defines the minimum value of the slider, maximum that defines the maximum value of the slider, value property is used to take the projected image name and define the path whether it is rotated in the X, Y or Z axis, also defines the mode; whether the transformation is one way or two way. All the projected image names, paths and the mode are bound in the value property of the slider. For example:

<Slider x:Name="rotateX" Grid.Column="1" Grid.Row="1" Width="150" Minimum="0" Maximum="260" Margin="0,0,10,0" Value="{Binding ElementName=Rotation,Path=RotationX,Mode=TwoWay}" />

Step 5

The complete code for MainPage.xaml file is as in the following:

<Page

    x:Class="Rotation.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Rotation"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="350"/>

            <ColumnDefinition Width="450"/>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="200"/>

        </Grid.RowDefinitions>

        <TextBlock Text="3-D Projection (Rotation through Slider)" FontSize="20" Grid.Row="0" Grid.Column="1" Width="650" Margin="24,0,-224,0"/>

        <TextBlock Grid.Row="1" Grid.Column="0" Text="RotationX" Style="{StaticResource BasicTextStyle}" FontSize="20"/>

        <Slider x:Name="rotateX" Grid.Column="1" Grid.Row="1" Width="150" Minimum="0" Maximum="260" Margin="0,0,10,0" Value="{Binding ElementName=Rotation,Path=RotationX,Mode=TwoWay}" />

        <TextBlock Grid.Row="2" Grid.Column="0" Text="RotationY" Style="{StaticResource BasicTextStyle}" FontSize="20"/>

        <Slider x:Name="rotateY" Grid.Column="1" Grid.Row="2" Width="150" Minimum="0" Maximum="260" Margin="0,0,10,0" Value="{Binding ElementName=Rotation, Path=RotationY, Mode=TwoWay}"/>

        <TextBlock Grid.Row="3" Grid.Column="0" Text="RotationZ" Style="{StaticResource BasicTextStyle}" FontSize="20"/>

        <Slider x:Name="rotateZ" Grid.Column="1" Grid.Row="3" Width="150" Minimum="0" Maximum="260" Margin="0,0,10,0" Value="{Binding ElementName=Rotation, Path=RotationZ, Mode=TwoWay}"/>

        <Image Source="richa.jpg" Opacity="0.2" Grid.Row="4" Grid.Column="1" Width="300"/>

        <Image Source="richa.jpg" Grid.Row="4" Grid.Column="1" Width="300">

            <Image.Projection>

                <PlaneProjection x:Name="Rotation"/>

            </Image.Projection>

        </Image>

    </Grid>

</Page>

Step 6

Run the application by pressing F5. The output screen looks like:



When we move Slider X to rotate the image in the X axis, it will look like:



When we move Slider Y to rotate the image in the Y axis, it will look like:



When we move Slider Z to rotate the image in the Z axis, it will look like:



When we change all the values in all the sliders, in other words perform all the rotations in the X, Y and Z axes together for any value it will look like:

Summary

In this article I explained how to perform rotation in various axes in Windows 8 apps, also the slider control and the projection properties.