Farseer Physics - Now in WPF

Nov 6, 2007 at 3:42 PM
Edited May 2, 2009 at 2:33 PM

I've been playing around with WPF (Windows Presentation Foundation) for a while and I wanted to get Farseer Physics to work with WPF.
One of the problems I ran into straight away was the graphics system in WPF. In XNA we have a buffer that we write to with SpriteBatch, but in WPF we have a layout that we add graphics objects to and then control their placement by manipulating their properties.

It's easy enough to "convert" from one graphics system to another, we have the Farseer Physics for Silverlight doing just that. But the debug view was not converted because of the way it works (I guess).

So I took the liberty to rewrite the PhysicsSimulatorView to a new graphics system and make it event based instead of interval based (the updating of movement/rotation is still interval based of course).

This is a screenshot of the first version where I tested the concept of the PhysicsSimulatorView in WPF. This was interval based and VERY low performance.

This is the second version where I rewrote the PhysicsSimulatorView and made it event based:

The second version was about 100 times faster because it did not have to create new graphics objects in every update iteration.

I'm not planning on converting the Farseer demoes to WPF. But it could be a part of my plan, if Jeff want's me to :)

Edit: The links does not work anymore.
Nov 6, 2007 at 4:43 PM
Very cool. I've been meaning to play with WPF a bit.

Any chance you would want to share the code?

Could you explain a little more what you mean by interval based vs. event based?

Also, on a side note, how are you doing your render loop in WPF? With a timer??
Nov 6, 2007 at 5:33 PM
Interval based vs. event based means that in XNA you use the Draw loop to add textures to the graphics buffer. In WPF you can't have such a loop since it would add new graphics objects to the layout every time you call draw. Adding a "texture" (Called a shape in WPF) is a one-time operation only in WPF.

So instead of calling Draw in a loop, I use a few event's I inserted into the physics engine. The events are GeometryAdded, BodyAdded, JointAdded, ControllerAdded and their Removed counterparts.

So when ever a geom, body, joint or controller is added to the physicsengine, I can call a method in my own code that adds the shapes needed for visualizing the object that has been added.

I have send you the code on your mail. I don't think the code is mature enough yet to be distributed to the masses.

Oh, and yep, I used a Timer object as the update loop. I saw that the Silverlight examples used a storyboard, i acually asked the author why, because I was using a Timer. It turns out that Silverlight (as inmature as it still is) don't use the same CLR as the rest of .net, and the Timer object one out of many that is MIA :)
Nov 6, 2007 at 7:19 PM
Oh, ok. I see now.

I'll consider adding some events like you mention to engine permanently. They could be useful.
Nov 6, 2007 at 7:22 PM

crashlander wrote:
Oh, ok. I see now.

I'll consider adding some events like you mention to engine permanently. They could be useful.

That would be nice. - Do you have an idea on how I solve the problem with debugging contacts?
Nov 7, 2007 at 11:35 AM
I don't have a solution on the contacts yet. I've not had time to did into your code yet.

Can you just hook into the collision callback and get the contact litst then use a pool of contact shapes to display them...
Jan 8, 2008 at 6:42 PM
I would also like to see the source, genbox.
Jan 9, 2008 at 3:26 PM
Edited Jan 9, 2008 at 3:26 PM

CitizenBane wrote:
I would also like to see the source, genbox.

I've build a lot on the code that I made, this also means that it has become more tigthly coupled with the rest of my code.
I could create a small demo of the debugging in WPF with the new structure. I will put it on my todo list for the weekend. By monday you should be able to download an example of debugging farseer in WPF, I'm sorry that I can't do it faster, but I have ton's of school work to do.
Jan 9, 2008 at 3:29 PM
Don't sweat it, genbox. Take your time.
I've already made some mods to the Silverlight version, and have been able to view some simulations using WPF.

I'm just curious how you went about doing the event raising between the PhysicsSimulator and the View control.
Jan 9, 2008 at 9:53 PM
About the event raising:

I'm not sure that it's the best way to do it. It's a better way than the XNA way where you clear the scene and readd all the drawing objects. This can only be done in graphics systems that support drawing buffer. Silverlight and WPF does not work with a buffer (I don't know about the 3d viewpoints and the like, i've never used them). In WPF you create a drawing object that will persist on the screen, you modify it's position and rotation by manipulating it's renderingtransform (or canvas position) by using it's object reference.

The event system i've made, add's drawing objects to the screen when they are added to farseer physics engine and remove them from the screen when they are removed from the engine. This way, you don't need to clear the screen at every update and readd the drawing objects. (with the new position and rotation).

I don't know if the performance is as good as in XNA... I do not think it is, but as long as you don't have all debugging enabled and many objects, the debugger i've made should be fine.
Jan 11, 2008 at 9:15 PM
Edited Jan 11, 2008 at 9:23 PM
CitizenBane - I've uploaded a demo of farseer in WPF with debugging here:


To enable other debugging than the currently enabled, edit the PhysicsSimulatorView.cs file and enable the debugging you want. Currently the only debugging enabled is the AABB view. The only physics object is a rectangle that can be dragged.

Try it out. You are welcome to post improvements and bug fixes.

EDIT: This demo of farseer in WPF uses a patched version of farseer engine. I've added some events (details can be found in this:

The events is now included in the default farseer installation, but I'm not using them yet, as I have not had the time.
Jan 12, 2008 at 11:54 PM
Just for fun, I did something similar with actual controls(richtextbox, listbox, combobox, button). The screenshot below shows some components mid-simulation, as they're falling down on top of eachother. The controls are fully usable, even when bouncing and rotating around the screen. The boxes displaying an image are actually playing two different video files via MediaElement.


Totally useless, but quite fun nonetheless :)
Jan 13, 2008 at 1:47 PM
:D haha, using controls never even crossed my mind. Looks hilarious.
Jan 14, 2008 at 2:34 AM
Hey gang.

I am pretty new to WPF and brand new to Physics.

Thanks so much all invovled in including WPF with Farseer! Very neat.

I am getting a bit challenged by all the hook up code in getting a simple object going. I am looking at your spring example in WPF.

Could someone help me? I am looking to design stuff in VS.NET & Blend but it seems your creating all the brushes manually.

Is there a way I can create shapes and such in Blend and attach the physics to them instead of creating all the UI via code?

Any help would be greatly appreciated!

Thanks and take care!
Jan 14, 2008 at 5:43 PM
You can do it as long as you can define the points that makes up the shape you want to apply physics to.
You could use anything to represent the physics object, but the physics engine needs to know how the edge of your graphics objects is defined.

In my WPF example I have 2 kinds of objects:

A brush/shape object (graphics object)
A physics object

You could create a shape and display it on the screen, but it will not move since no physics is applyed. You could also just create a physics object, but it won't be displayed (unless you turn on debugging) since it has no graphics representation.

In your example, you need to make a shape (maby in Blend) and attach physics to the shape. But you will still need to know the edge-points that makes up the shape.
Jan 14, 2008 at 8:46 PM
So I am trying to have as little hook up code as possible.

Isn't a shape basically geometry? Could we not allow the geometry for the physics engine be pointed to a shape? That way the designer can actually design the collision shape.

Reason I say this is in Blend or VS 2k8 the designer could surround the object in a rectangle or circle or a more complex shape while making its opacity 0 so that it does not show up visually.

This would allow the designer to create this and the physics engine to integrate smoothly into the design process.

This would also allow if you just wanted a textbox's actual geometry to be used theres no need to define another geometry. Just point Farseer to the textbox itself.

I am just coming from the newbie perspective and looking for ways to integrate it smoother and simpler in the design process rather than having to do the hook up code for each and every shape.

Would this work? This would be great.

Thanks and take care.
Jan 15, 2008 at 4:31 AM
Hey gang.

I just wanted to follow up on my progress. Still quite confused but making some headway atleast.

I have drawn a Rectangle in Blend on the Canvas (from your sample) and created a method as a test to use this Rectangle called "rect" as a source for Farseer physics using the PolyGeom class. However I am seeing some odd behavior. Instead of using the existing Rectangle drawn it pops out a new one.

I am pretty confused at where in the abstraction the drawing occurs so that I can somehow hook it up to an existing shape on the Canvas rather than creating a new one.

Also it seems I can't get the RenderGeometry of a control say like a Button so any suggestions here would be great!

Any help would be greatly appreciated :)

private void Window1_Loaded(object sender, RoutedEventArgs e)
PathGeometry path = rect.RenderedGeometry.GetOutlinedPathGeometry();
PointCollection points = new PointCollection();

foreach (PathFigure figure in path.Figures)
foreach (PolyLineSegment segment in figure.Segments)
PointCollection points2 = (PointCollection)segment.GetValue(PolyLineSegment.PointsProperty);

foreach (Point point in points2)


PolyGeom poly = new PolyGeom(points, new Point(89, 103), Colors.Green, false);
poly.Load(screenManager.PhysicsSimulator, canvas.Children);
Jan 15, 2008 at 9:26 PM
The class PolyGeom also draws the object to the screen using the points that you give it.
It takes the point collection and makes the required PolyLineSegment to draw the polygon shape on the canvas.

The demo i've uploaded only serves as a concept on how to use farseer in WPF and how to create the physics engine debugging. The job you are trying to do could be done easier by creating a new application structure that utilizes already existing shapes (that you created in Blend).

I know the demo might be confusing for some people because of the inheritence structure, but if you look at the PolyBrush class, you will find CreatePathGeometry() that creates the polygon shape. This shape is the one you are seeing instead of the shape that you, yourself created.

I hope this helps you.
Jan 15, 2008 at 10:31 PM
Yeah I am finding it confusing.

I would appreciate any tips on how to hook physics up to an existing Shape / Control.

I think this is where it is most usable in WPF since you will be designing a lot of UI. Why create a character or graphic via code when you can in a designer.

I like the idea of the designer doing the UI and maybe specifying the collision shapes as 0 opacity shapes so that they do not render however we take those to build the geometry for the collision.

I believe a Body can contain multiple collision geometry correct? This way the designer could make this happen. Test it, run, tweak etc.

I'm just not sure how to go about attaching it and transforming the object.

Perhaps if somehow PathGeometry could be attached to an existing shape and transform the shape instead of creating a new graphic.

Jan 16, 2008 at 3:59 AM
I'm SO close!

The debug red rectangle is not positioned where my actual shape is in the XAML however, The XAML shape runs right off the screen.

Can anyone see what I am doing wrong? I am grabbing the vertices from the shape and I am passing the correct x,y etc.

I have pasted my code from Window1.xaml.cs as well as the ShapeGeom class I created.

It's very close the shape drops and so does the debug red outline because of gravity however the debug red outline is not ontop of the shape its off to the left and too high which is why I think the real shape when I transform runs right past the bottom of the screen.

Any help would be SO much appreciated!


Thanks and take care.
Jan 17, 2008 at 4:01 PM
Does the physics shape run on the screen, but the debug rectangle (edge debugging?) does not move? This is because the debugging shapes also needs to be updated with the position and rotation from the shape.
Somewhere in your code, you need to update the position of the debugging-elements.

If the position is a little off, that may be because of the farseer physics engine uses centerpoints and WPF uses leftcorner-points. By this I mean that farseer positions the physics shape relative to the center of the shape and WPF positions relative to the top left corner.
Jan 18, 2008 at 2:47 AM
I think I got that part correct because I took a look at your Geom classes such as PolyGeom etc. I derived my classes from yours. Although I am not entirely clear why you do some things.

The red box outline does surround the object but when I use more complicated shapes it seems to be like 10 pixels off sometimes. When the object moved quickly or rotates a large amount things get really wacky however.

What I am trying to achieve now is allowing the collision object be a child of a container so that an artist can draw a shape with various stuff in it, but only specify the one shape as being the collision.

This means the container needs to do the transforms so that when it gets hit, the object reacts. For example you may draw a plane but it may be made up of alot of vector objects, so instead you could create an outline of the plane but make its opacity = 0 so it doesn't render, just use the path for collision. But you don't want that path so much to rotate by itself, you want the container. Perhaps you put the plane inside of a Border object, or Canvas?

Do you think this will work? I am trying to make design-time drawing more physics-enabled.

I would greatly appreciate some help on this. I am willing to give all my code out there, thats no problem :)

I'm using your Window1.xaml.cs for this.

So here's an example of an object in XAML. The Border is the container but the Path is the object I want to use for collision:

<Border Width="353" Height="234.372" Canvas.Left="188" Canvas.Top="199.372" x:Name="shapeBorder" Background="#FFC7C4C4">
<Path x:Name="pencil" Width="292.714" Height="123.954" Fill="#FF0022FF" Stretch="Fill" Stroke="#FF000000" Data="M238,318 C284.87763,308.62447 333.87654,312 382,312 414.19374,312 452.35889,301.4908 483,319 493.58458,325.04833 494.1043,325.45198 497,338 505.47594,374.72906 512.73753,377.33034 467,410 438.64438,430.25401 424.66431,427.79805 385,429 354.03258,429.93841 322.02875,433.38683 291,431 262.54774,428.81136 250.88039,413.34314 228,397 211.42762,385.16259 204.54097,381.43172&#xd;&#xa;221,354 227.87117,342.54805 234.76428,331.18247 242,320" HorizontalAlignment="Center"/>

Here is how I add the object in Window1.xaml.cs:

ShapeGeom collisionGeom3 = new ShapeGeom(pencil, shapeBorder);
collisionGeom3.Load(screenManager.PhysicsSimulator, canvas.Children);

Here is my ShapeGeom class in its current state:


Please take a look. I have a feeling something is wrong with my Initialize or Update code. It seems to somewhat work but it goes wonky. The red rectangle follows kind of.

How do I update the red rectangle? It seems to be moving without me doing anything.

Also in the Initialize I am a bit confused why you get 2 different bounds and subtract them. I tried to mimick this as much as possible but I'm not sure if I am doing it correctly.

I'm not sure whats wrong :) Any help would be so much appreciated.

I also GREATLY appreciate your porting work to WPF. Thank you so much.

Thanks and take care.
Aug 10, 2008 at 11:23 PM

It doesn't look like genbox's code is available any longer and I'm interested in using the Farseer engine in WPF. Crashlander, can you please post the code or recommend other courses of action? I've tried to modify the Silverlight demos (which are working fine in Silverlight), but I'm stuck on changing the animation code since the storyboards are implemented differently in SL and WPF. Any help is appreciated. Thanks,


Aug 11, 2008 at 3:01 AM
donsmith - I can provide you the code by email or upload it somewhere. It's been a long time since I worked on farseer in WPF and I've changed a lot in my implementation of the code I posted back then.

It's the original code, I've only cleaned it up a bit. It does however work with an older version of Farseer and some of the new changes to Farseer makes it go weird with polygons. (I've got the fix for it, if you get into trouble, just tell me and I will provide it).
Feb 9, 2009 at 9:04 AM
Hello everyone, i would like to use physcis in my wpf application, do i have to change anything to the FarseerPhysics Class?

thansk in advance
Feb 9, 2009 at 5:43 PM
@espinho: You are perfectly able to use Farseer Physics with WPF. All you need to do is to download the "Class library" branch on our download page.
The replies in this thread reminds me that I should publish the WPF PhysicsSimulatorView (debugview).
Apr 30, 2009 at 1:46 PM
i am also working on using Farseer in WPF ... i am trying to work it out myself, however any resources or samples would be usefull
Apr 30, 2009 at 2:12 PM

What exactly is it that you need help with? I do have some projects here using drawing in WPF canvas, but they are quite extensive and not really suitable to learn Farseer Phyiscs in WPF.
May 2, 2009 at 1:45 PM
There isn't really anything i have had trouble with, i was just wondering if there is any public samples so i could see how others have done it.

I have it working currently, however at the moment i have it updating the position and rotation of each shape for every iteration of the gameloop. I would like to only update the position and rotation of objects when they change i.e. using events. I haven't actually investigated this myself yet, so it may be obvious.

p.s. is there any plans of actually adding support libraries to farseer for WPF (similar to what has been done for silverlight). If so i would like help contribute. I have a large amount of experience with WPF (just not alot with Farseer yet).
May 2, 2009 at 2:06 PM
That sounds great MattF. We love contributions :)

If you manage to create a drawing structure similar to Silverlight or XNA, I would be more than happy to take a look at it and eventually include it in Farseer. We also need a debug view in WPF at some point. I have already made one, but it's really low performance because of the constant updating of shapes. I can send you the code to it if you want. (just contact me using the codeplex contactform and I will reply with the source)

As for the gameloop and events part, you can use the Body.Updated event. It get's called everytime Position or Rotation changes. It also get's called on each update after it has updated the position and rotation of the body.
May 2, 2009 at 2:10 PM
i'm not sure what you mean by a drawing structure.
May 2, 2009 at 2:13 PM
Sorry. Should have explained myself a little better.

The Silverlight demos and XNA demos both have a drawing structure. This means that to draw a physics object on the screen, you just create a (in silverlights case) CircleBrush and call Draw() on that object.
CircleBrush then takes care of drawing a circle in the correct position on the screen. Take a look at it to see what I mean.
May 9, 2009 at 8:11 AM

i am just about done re-creating the SimpleSamples in WPF.

However for some reason none of my objects collide.

The actual code in each demo is the same as the silverlight ones (copy-paste).

And as far as i can tell my comon code that sets up the window is the same (there wasn't much too it).

The only different that i can tell is that one used the Silverlight version of the Farseer library, and the other uses the normal Class Library version.


Is there any bugs in the Class Library version of the framework that would stop collisions happening ... or anything else you guys think off.


I have checked all my code heaps of times and can't see anything wrong.

May 9, 2009 at 8:48 AM
Edited May 9, 2009 at 8:50 AM

i tried another wpf sample that I made a bit ago against the same version of the framework ... so it mustn't be that...

i must have stuffed up my code somewhere, not sure where...

any ideas? the code in each of the demo files is copy pasted from the silverlight one, so there isn't many places it gould be wrong.

May 9, 2009 at 11:21 AM

Check if the objects have actually been added to the physics simulator. You can use PhysicsSimulator.GeomList.Count.

Also check the CollisionGroup, CollisionCategory and CollidesWith properties. They must be set right.

May 10, 2009 at 3:37 AM

The GeomList has 2 items in it (after the first update) so that isn't the problem.

here is my code that sets it all up (which i copied from the silverlight sample #2):

i think i'll have to debug into the farseer code to see what is going wrong next time i have some spare time

NOTE: the bodys are all moving correctly due to the forces i apply, there are just no collisions in any of the demos


        protected override void Initialize()



            physicsSimulator = new PhysicsSimulator(new Vector2(0, 0));


            Body rectangleBody = BodyFactory.Instance.CreateRectangleBody(physicsSimulator, 128, 128, 1);

            rectangleBody.Position = new Vector2(256, 384);


            Geom rectangleGeom = GeomFactory.Instance.CreateRectangleGeom(physicsSimulator, rectangleBody, 128, 128);

            rectangleGeom.CollisionGroup = 15;


            Body circleBody = BodyFactory.Instance.CreateCircleBody(physicsSimulator, 64, 1);

            circleBody.Position = new Vector2(725, 384);


            Geom circleGeom = GeomFactory.Instance.CreateCircleGeom(physicsSimulator, circleBody, 64, 20);

            circleGeom.CollisionGroup = 14124;


            AddRectangleToCanvas(rectangleBody, new Vector2(128, 128));

            AddCircleToCanvas(circleBody, 64);

            controlledBody = rectangleBody;


May 10, 2009 at 1:24 PM

I worked it out ... it was just a silly typo:

in my code that updates the visuals when the bodys move i accidentally wrote:

body.Update = ...

instead of 

body.Update += ...

which was taking the event handler off that updates the position of the geom when the body moves (so the AABBs where never changing, and they would never overlap)


lol. it is amazing how much missing one character can do

May 11, 2009 at 2:54 PM
Edited May 12, 2009 at 12:21 PM

I have uploaded a patch containing the complete WPF Simple Samples project. It matches the same demos as what is found in the silverlight simple samples, and has all the same features.


I have tried to keep the interface that the demos use quite similar to the silverlight one, so that demos can basically be copy-pasted between the two projects (although there are some differences).

Although underneath there are a number of changes to allow it to better suit the platform.


The next thing i will do is create a debug view for WPF, similar to what XNA has... but i will leave that for a seperate submition.


I hope this will be helpfull for others. and i also hope that the way i have done things isn't too far different to what you guys are used to. Because i did try to make things only update when the actual bodies change, rather than at every iteration of the game loop.

Although at the moment they update every iteration, due to http://farseerphysics.codeplex.com/WorkItem/View.aspx?WorkItemId=22320