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

Codeplex Download Page

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

New Project Dialog Box

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...
Solution Explorer
and It'll display the Add Reference Windows and shown in the image below:

Add Reference

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"



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





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

Loaded="Leafiti_loaded" (Leafiti_loaded is just use for example, you can replace it by using any names you want)
Next is to add Namespace and Assembly. to Do so, just place this code


after the Loaded="Leafiti_loaded"

After Add Some Codes

Okay now you are ready to start the Step 5.
Put this code above between <Grid> and </Grid>


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




































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

Now scroll to the Top and go to the Loaded="Leafiti_loaded" and Right Click and Select "Navigate to Event Handler", This will bring you to the code behind page.
Now Type this


See image below :

Code Behind

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

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


The Workdone

Here is the Explaination of the markup code above:


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


Comments have been disabled for this content.