.NET & Funky Fresh



  • <script type="text/javascript" src="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&amp;MarketPlace=US&amp;ID=V20070822/US/bluspiconinc-20/8001/8b68bf4b-6724-40e7-99a5-a6decf6d8648"> </script>
Images in this post missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at imagehelp@codebetter.com
.NET 3.0 Crash Course - Part 7: WPF Animation and 3D

The final frontier…  This is the last set of WPF features that I want to cover before moving into a series of posts on Windows Workflow Foundation.  Both animation and 3D are large areas when examined individually.  In this post I would like to cover them both generally.   Mostly, I will point out a number of great resources that you can use to develop skills in these areas.

                When working with animations in WPF, you should begin by making sure to have a good understanding of DependencyProperties.  It is these properties that WPF supports animation for.  As mentioned before, a good resource for learning about DependencyProperties and Animation is Charles Petzold’s book.  He has thorough explanations of both of these topics. 

To begin with, WPF uses a Storyboard to represent a hierarchical organization of animations.  This sort of structure obviously lends itself well to Xaml and makes it possible to compose increasingly complex animations out of simpler pieces.  A typical animation has a BeginStoryboard element at its root and consists of one or more children:


   <Storyboard TargetProperty="Opacity">

      <DoubleAnimation From="1"


                       Duration="0:0:1" />




In the above example we are animating the opacity property of some element from 1 to 0 over the course of one second.  But what object is having its Opacity animated and what triggers the animation to begin?  Observe the Xaml in its proper context:

<Button Height="40" Width="125">


      <EventTrigger RoutedEvent="Button.Click">


            <Storyboard TargetProperty="Opacity">

               <DoubleAnimation From="1"


                                Duration="0:0:1" />






Now it should be clear that we are causing a button to fade out whenever it is clicked.  This sample demonstrates an animation being triggered by a RoutedEvent.  They can also be embedded in a Style and triggered based on the value of any DependencyProperty.


   <Style TargetType="{x:Type RadioButton}">


         <Trigger Property="IsChecked" Value="True">



                  <Storyboard TargetProperty="Opacity">

                     <DoubleAnimation From="1"


                                      Duration="0:0:1" />









<RadioButton Height="40" Width="125"/>

This causes the animation to run whenever the IsChecked property of any radio button “enters” the true state.  You can also use Trigger.ExitActions to specify an animation for a move “from” the true state.  Notice that the animation is called a DoubleAnimation.  “Double” refers to the type of the property being animated.  WPF defines animation classes for 22 different types (ColorAnimation, VectorAnimation, PointAnimation, etc).  There are many properties on the basic animation classes that allow the developer more fine grained control over how animation occurs.  These properties include: AccelerationRatio, DecelerationRatio, SpeedRatio and RepeatBehavior among several others.  In addition to these basic animations, the types Double, Matrix  and Point have coresponding  AnimationUsingPath classes that allow the developer to use a Path to control the animated values.  If either of these scenarios does not provide enough control for you, all 22 types have matching AnimationUsingKeyFrames classes which offer varying support for discrete, linear and spline based interpolation.  Together, this set of classes provides quite a bit of animation power.

If you are interested in animation, then I would recommend checking out two blogs in particular:

Charles Petzold (search through the archives)


You will also find several examples of 3D in these blogs as well.  Speaking of 3D, I would like to note that the animation classes were designed to provide a consistent animation framework regardless of whether the item being animated is 2D or 3D.

                If you are interested in working with WPF’s 3D features, there are a few resources you should know about.  Windows Presentation Foundation Unleashed has an extensive chapter on 3D written by Daniel Lehenbauer.  This is probably the best resource on WPF 3D currently in print.  If you can hold out for a while, Petzold is planning on releasing an entire book devoted to WPF 3D.  Both of the blogs mentioned above have some good 3D examples, but you’ll also want to check these sites:

 The WPF3D Team Blog

Five Great WPF 3D Nuggets

3D Tutorial

                The first thing you will want to know about 3D in WPF is that all 3D content must exist within a Viewport3D.  You’ll want to put a camera in that scene.  The WPF offers two main options: PerspectiveCamera and OrthographicCamera.  Go here for a discussion of these two choices.  Of course, if you want to see anything, you will need a light: AmbientLight and/or DirectionalLight.



      <PerspectiveCamera FarPlaneDistance="20"





                         FieldOfView="45" />





            <DirectionalLight Color="White"

                              Direction="-3,-4,-5" />




                     Positions="-1 -1 0  1 -1 0  -1 1 0  1 1 0"

                     Normals="0 0 1  0 0 1  0 0 1  0 0 1"

                     TextureCoordinates="0 1  1 1  0 0  1 0"

                     TriangleIndices="0 1 2  1 3 2" />





                         <SolidColorBrush Color="Blue"/>









Of course, you have to add your own 3D content.  The above demonstrates a very simple mesh: a plane.  There is a lot of information to be covered regarding what is happening in this simple example, but I don’t have time to go into it all here.  The main thing I want to talk about is material. If you have worked with 3D before, you know that every 3D object must be covered with some sort of material.  The above example uses a DiffuseMaterial, but WPF also offers EmmisiveMaterial and SpecularMaterial for your use.  Here’s the really cool thing about materials: As you can see above, the material architecture takes advantage of the same Brush system that the rest of WPF uses.  This means that you can pretty much put anything on the surface of a 3D object, including 2D UI components.  With this recently released solution, you can even make all of the 2D UI completely interactive!  Just don’t get carried way.

NEXT POST: WPF Conclusion

Posted 01-08-2007 9:50 AM by Rob Eisenberg
Filed under: , , , ,



Billy McCafferty wrote re: .NET 3.0 Crash Course - Part 7: WPF Animation and 3D
on 01-10-2007 11:28 AM

Thanks for continuing on with this series of posts...they've been enlightening and easy to follow.

panchi2131 wrote re: .NET 3.0 Crash Course - Part 7: WPF Animation and 3D
on 01-10-2007 4:32 PM

excellent series of articles for someone looking  oventure into .net 3.o world .keep them coming ,



wpf radiobutton databinding wrote wpf radiobutton databinding
on 06-14-2008 5:22 AM

Pingback from  wpf radiobutton databinding

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET


SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
NHibernate Profiler
Balsamiq Mockups
JetBrains - ReSharper
Web Sequence Diagrams
Ducksboard<-- NEW Friend!


Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers


Community Server (Commercial Edition)