Live Geometry with Silverlight 2

I'm happy to announce a project I started on CodePlex:

Live preview at:

Dynamic geometry

In a nutshell, it's an interactive designer for ruler-and-compass constructions - it lets you plot points, connect them with lines, construct circles, intersection points, parallel lines - everything that you usually do with "plain" geometry. But then the magic part comes in - you can drag the points and the entire construction is recalculated immediately - this is why they call it dynamic geometry. The way it works is the program doesn't store the coordinates of figures - instead, it stores the algorithm of their construction. Every time you move any of the points, the entire construction is being reconstructed on-the-fly given the new coordinates of the point using the algorithm stored in memory - that's why I like calling it "CAD with lazy evaluation".

The actual program available online

The application is deployed live at - you'll need Silverlight 2 Beta 2 to view this site. At first, the UI might seem not very intuitive for you - it takes a while to figure out how to use the toolbar and construct tools - but I hope an interested reader can tackle this challenge. The trick is to know the rules how the toolbox buttons work. Plotting points is easy - just select the point tool and click anywhere. Dragging points is easy too - select the arrow (cursor) tool and drag the points. Now, to construct a segment between two points, you select the segment tool, click (and release) the first point, and then click (and release) the second point. See, you specify that this segment depends on two points - every time you drag one of the points using the Drag tool, the segment will update itself accordingly.

The source code is available online too!

I used Visual Studio 2008, C# 3.0 and Silverlight 2 Beta 2. I have to say, those are awesome technologies and a pleasure to use (at least for me).

I split the code into several projects. DynamicGeometry is a class library that provides a framework for defining figures and their interaction. My goal was to allow for extensibility - so that you can just plug in a new kind of a figure, and automatically consume all the centralized goodies - serialization, painting, dependency tracking, transaction system, interaction, etc. Now, the code for almost every figure fits in one screen of text - so I rarely have to scroll when editing these files. SilverlightDG is the Silverlight 2 front-end - UI. DG is the WPF front-end. I try to maintain two projects - WPF and Silverlight - to build from the same sources. So far so good 🙂

Implementation details

The project is still in its early Mickey Mouse stages and only some very basic functionality is there - however, there is already something that is worth noting:

  • an extensible type hierarchy to model geometric figures - all starts with IFigure and FigureBase
  • a State and Strategy pattern implementations to enable interactive mouse input from the user - different toolbox buttons provide different strategies to handle mouse input
  • a pretty decent transaction system, which enables nested transactions, Rollback, delayed execution, record/playback and, of course, unlimited Undo/Redo
  • a dependency tracking mechanism that allows to express dependencies between figures (i.e. a midpoint depends on two existing points) - I employ Topological Sorting to sort the figure DAG by the dependencies - we first want to recalculate the basic figures, and then their dependents
  • a toolbar that took me many painful hours to design - I highly respect UI designers and think that getting the UI right is more difficult than to implement the rest of the actual functionality. I hope I didn't do too bad, although I'm definitely not a great UI designer.

Silverlight 2 Beta 2

Most probably by this time you already know what Silverlight is all about - if not, is a great place to start. I personally believe that Silverlight is our liberation from the old web story and am very optimistic about this technology. While Silverlight 1.0 only allowed JavaScript programmability, Silverlight 2 gives you full experience of .NET and managed languages - C#, VB, IronPython, IronRuby and others (did I forget something?). I think that Silverlight's advantage over Adobe technologies is this rich programming model - the fact that you can use .NET and C# 3.0 for the web client just makes me so excited about this.

Targeting both Silverlight and WPF from same source

If you look closer at my source code, you will notice that I have two projects - the WPF one and the Silverlight one - including the same .cs files. Because WPF and Silverlight use different CLR and runtimes, the project format is incompatible - i.e. I can't include a Silverlight class library in a WPF application. Workaround is relatively easy - just create two separate .csproj files in the same folder, that reference the same sources - and you're fine.


By the way, CodePlex is a quite awesome site for open-source projects - it provides version control (I love TFS and think it's excellent), item tracking, forums, wiki, downloads, stats - all for free and without annoying ads. Codeplex is one of the products that still make me proud to be working at Microsoft.

DG 1.0 - the inspiration

The project that I'm describing in this post is actually based on an earlier one that I've implemented 7-8 years earlier - here's a blog post about my original dynamic geometry project:

I'd like to reach parity with the first version - however this is going to be tricky, because it has a lot of different goodies - from analytical expressions to ability to create hyperlinks and compose complex documents. Interestingly enough, I implemented DG 1.0 using VB6 - and though I think VB6 was an awesome environment at that time (I think it's Edit-and-Continue is still better than the one we have in Visual Studio 2008), I feel so much better and more comfortable using C# 3.0 - it just lets me express stuff about my program that I want to express in the way that I want.

I hope some of you have found this interesting. I'd be happy to hear any feedback or advice on this.


Comments (24)
  1. ArtVolk says:


    Good work with new technologies!

    Keep on writing a good code! 🙂

  2. Sarbjit says:

    Hoping to replace visio on the web.

  3. Ignacio Corderi says:

    Very good job! I would have killed to have this for geometry in the school (not to mention playing with 3d geometries in highschool).

    I dont know if you are planning on adding more funcionalities but beeing able to fix angles/segments and to messure angles/segments would be great.

    Thinking on the OCPL this could be a really good app for the kids, specially for those who like geometry :D.

    Ohh, beeing able to changes the lines colors would help with complex drawings.

    I might do some modifications myself.

    Best regards,


  4. Thanks 🙂

    I just started, so a lot of features are coming, and measuring distances/angles is a high-priority. Also, changing colors and styles is planned too 🙂

  5. Jonathan Dickinson says:

    Just read in your original post "250 interactive drawings." This is crying for a XmlReader/Writer transform (i.e. writer.WriteNode(reader)), just like one of the MSDN mag authors did with geneology data a while back. Great work!!!

  6. Jonathan – that sounds interesting – can you give some more details? I don’t quite follow yet… Geneology data?

  7. reaper1129 says:

    nice..but need draw polygon..


  8. Greg Farquhar says:


    This is just marvellous. I look forward very much to updates. Have you seen swordfish charts. Another nice Silverlight development. I am in the process of using Silverlight to develop learning objects.

    BTW, it would be nice to be able to label points in order to describe the geometry. Also it would be nice to be able to superimpose a coordinate system with axes and gridlines so that coordinates become more meaningful to the user.

    Greg Farquhar

  9. reaper1129 says:

    very nice ><

    just want ask do u have any idea "How to zoom in or out polyone"


  10. honu says:

    Great blog, good thinking well put.

    Way cool Kirill.

    Not just what dg is but HOW you did it, SL2B2 XAML…

    F# love that you did not forget something; looking for more there.

    Once I have a geometry, how can I map a picture/static image to it, or a video/moving image to it?

    Better yet how can I map images to a dynamic geometry?

    (Hey with 2,4,8,42, …1024 CPU’s and GPGPU’s  why not?)

    Peace, Love and Hapiness

  11. Hey all,

    thanks for your comments and feature requests. They’re all in my queue – coordinate axes and grid are coming soon (pending my home PC returning from the repair shop with a new motherboard), then zoom and pan, then probably editing figure appearance (colors, line widths, etc). Later I’ll think about fixing angles/segments given numeric values and/or custom formulas. Linear algebra is not far away too 😉 Then probably more transformations (rotation, reflection, translation, etc) and defining your own custom figures. Finally I have some plans about plotting graphs.

    About images and videos – great idea, I’ll need to think more about it. Basically, given three points, you could frame an image/video/drawing into a parallelogramm. Just add the visual to the Canvas, and apply a carefully calculated transform to it. I hope I have some time in August to play with it.



  12. Hi,

    The CLR of Silverlight (AGCLR) and .NET framework have different names but they are not different.

    The CLR of Silverlight and .NET framework (and thus WPF) are SAME.

    The reason why we cannot reuse the libraries between both is not for CLRs being different, but because the SL framework assemblies have a different public key than the .NET framework assemblies.

  13. Thanks Rahul, I didn’t know that.

  14. It is more often than you would suspect that people have to deal with some sort of dependencies in an

  15. David Rogers says:

    Very nice talk you gave to the .Net Developers Association ( tonight. I look forward to playing with this to reinforce some design pattern concepts.

    Say, am I missing something or is the Codeplex project missing the WPF solution?



  16. Thanks David!

    This is unfortunate naming on my side…

    Just open Main/Silverlight/WPF.sln – it references the same .cs files.

    Let me know if you have any questions.

  17. DavidWRogers says:

    Arghh! Not so much unfortunate naming – more like CNS (CodePlex Newbie Syndrome) – I was downloading the CTP from the home page, which only has the silverlight solution. I finally noticed the source code tab… 🙂

  18. johnneyzhnag says:

    Pretty work, it will be better if geometries can be edit on line.

  19. roadman730 says:

    is it possible to save the drawing?

  20. Not through the Silverlight UI (didn’t implement support yet).

    From code, just call Drawing.SaveAsText()

    Also, the WPF version supports saving and loading.

    I’ll add support soon. Where would you like to save? Local file? Isolated storage? Cloud?

  21. Eric Roger says:

    Thanks for sharing this. Live Geometry is a great tool.

    I find that in a way, its simple UI hides its power. For example I tried to create a point at the intersection of the perpendiculars of the sides of a triangle, but this wasn’t working and the only way to tell was to move the triangle vertices around. The solution was to use 2 perpendiculars, not 3 for the intersection to be valid.

    What about making a point flash in red/bold when constraints apply to it? (Merged with another point, line intersection, etc). This would help users both understand and check that something has just happened, something more powerful than ‘plot a point here’.

    Thanks again,


  22. Hi Eric,

    thanks for the feedback! Definitely, this is one of my priority items to give users visual feedback when they drag over a figure or an intersection. Also, if a mouse is over 2+ figures, I want to display a disambiguation menu with an option to bring any of the figures to front! Stay tuned!



  23. dimitrsi says:

    that is great code. at the beginning i thought it was a very simple library

Comments are closed.

Skip to main content