WPF 3D From Scratch

Hi! in this tutorial, I'm going to show you on how to make a 3D look in WPF with flip effect.

in order to use this 3D function you'll need WPF 3D View that you can get it from Codeplex.com

This is working well in Visual Studio 2008.

First of all you need to download the WPF 3D View form Codeplex.com

After you got this tool.

Let's go through the following step:

 Step1. run your Visual Studio 2008 > files > New > New Project

Step2. in the Project Type > Choose your Prefer Language,( in this tutorial I use C# ), and in the Template Section > Choose  WPF Application. Give your project a name in the Name box > Click OK

Step3. Now you get a new fresh clean codes preject.

Now Extract your WPF 3D View.zip to anywhere ( e.g Desktop)

in Visual Studio, go to your Project Solution Explorer and Right Click on Reference Folder > Add Reference...

and It'll display the Add Reference Windows and shown in the image below:

Go to Browse Tab and looking for the  WPF 3D View folder that you just extracted moment ago, and Select all files in that folder

(3DTools.dll ; 3DView.dll; Infragistics.ToyBox.dll)(in this case, you'll use only 3DView.dll) and Click OK.

Step4. Now go to your Window1.xaml

 And you'll see your existing markup code like this below:

<Window x:Class="Leafiti3D.Window1"

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

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

Title="Window1" Height="300" Width="300">

<Grid>

</Window>

What you need to do now is to add some lines of codes in order to use the reference that you just added.
Now you need to add a Loaded Framework Element to tell what show the program do when it first started. to do this just write

xmlns:local="clr-namespace:_3DView;assembly=3DView"

after the Loaded="Leafiti_loaded"

 Tag

<local:_3DViewControl x:Name="My3DView" Height="600" Width="400" TimeSpanMiliseconds="450">

<local:_3DViewControl.Children>

<local:_3DViewElement>

<local:_3DViewElement.FrontElement>

<Button>Button1</Button>

</local:_3DViewElement.FrontElement>

<local:_3DViewElement.BackElement>

<Button>Button2</Button>

</local:_3DViewElement.BackElement>

</local:_3DViewElement>

<local:_3DViewElement>

<local:_3DViewElement.FrontElement>

<Button>Button3</Button>

</local:_3DViewElement.FrontElement>

<local:_3DViewElement.BackElement>

<Button>Button4</Button>

</local:_3DViewElement.BackElement>

</local:_3DViewElement>

<local:_3DViewElement>

<local:_3DViewElement.FrontElement>

<Button>Button5</Button>

</local:_3DViewElement.FrontElement>

<local:_3DViewElement.BackElement>

<Button>Button6</Button>

</local:_3DViewElement.BackElement>

</local:_3DViewElement>

<local:_3DViewElement>

<local:_3DViewElement.FrontElement>

<Button>Button7</Button>

</local:_3DViewElement.FrontElement>

<local:_3DViewElement.BackElement>

<Button>Button8</Button>

</local:_3DViewElement.BackElement>

</local:_3DViewElement>

</local:_3DViewControl.Children>

</local:_3DViewControl>

I'll give you more details about the code above at the end of this tutorial.

this.My3DView.Init();

See image below :

Step 7
Now Save it and Run your Pruject now , ( Just Press Ctrl + F5 )

Congratulation!!!!! That's look so nice.

Here is the Explaination of the markup code above:

<local:_3DViewControl>
is the main Layout of your 3D Project, This is the layout of your 3D Work Space, not the Windows Layout.
You can set its properties like Width or Height or anything else you want.
for the TimeSpanMiliseconds is the speed of your item's moving, if you set it to a big value, It'll moving more slow and smooth,

but it you set it smaller, it'll be moving faster  and look not really so nice.

<local:_3DViewElement>Tag must be nest in the <local:_3DViewControl.Children>
It's a package is an Item.
Because in this Project We have A Button that can be flip to see its back and front. So we need to put it in  <local:_3DViewControl.Children> Tag.
<local:_3DViewElement.FrontElement>in this tag, you can ad any control of WPF you want, like Button, Image, Media...
This is for the front side if the Item you want to show.
<local:_3DViewElement.FrontElement> and this is the same as above, it's for the Back Side.

Okay! Have a try now you'll get more experience with this.

 Get the Sample Project Here