WPF Shape Editor works with MVVM

October 19, 2010


Haven’t heard about the famous WPF and Silverlight MVVM design pattern yet?

Well, I have one think to say about it:

“MVVM is like women, complicated but necessary. You can’t live with it and you can’t live without it”…

This time I want to  concentrate on how to create a WPF shape editor custom control which works perfectly with the lovely MVVM design pattern.

Lets say that you want be able to draw shapes on top of Video, Image or whatever, but this time you have a view-model behind which contains and manages shapes-data.

Now the problem is: you don’t want your view-model dealing with UI elements or mouse/keyboard and other related UI events.

So one option is to create Attached Behavior, attach it to your custom control (which raises routed events), and translate the events into relevant commands.

Another option is to design your custom control to work with commands instead of events, or maybe both to be on the safe side.

Example of usage:

<controls:ShapeEditorControl x:Name=”shapeEditorControl1″
GeometriesSource=”{Binding Geometries
IsDrawingEnabled=”{Binding IsDrawing
EndDrawing=”{Binding EndDrawingCommand

Ok, so what we have here is ShapeEditorControl contained in the visual tree of our view, which has a bindable GeometriesSource property bound with the geometry collection of the view-model. Another IsDrawingEnabled bool property which indicates whether we are in editing mode or not and instead of having RoutedEvent notifying that a shape was created by the control itself we have the EndDrawing property of type ICommand which currently bound with our view-model EndDrawingCommand property of type ICommand.


Each time you create a shape, draw it and finally close it, the corresponding command is executed by the control itself with the relevant Geometry. At the end, the view-model adds the new geometry to an ObservableCollection and the ShapeEditorControl is populated with the new geometry. There is an option to select the DataTemplate which finally renders the Geometry.

Have to say that this is only an example of designing custom control which perfectly works with the MVVM pattern and data binding.

Now that you have an idea, feel free to download this demo from here, and keep going…

Update: If you running vs 2008, download this.


Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



  1. akjoshiOctober 21, 2010 ב 11:43

    Hi Tomer. Nice thinking but I am not able to run the demo application code. I think its done in VS 2010, can you upload a VS2008 version of this sample.


  2. Tomer ShamamOctober 21, 2010 ב 23:31

    Hi Akjoshi,

    I’ve translated it back to vs2008 for you.
    Please feel free to download the vs2008 solution, it’s at the bottom of this post.