Silverlight Diagramming. Part 1.


 

Notes: The article and samples are based on Silverlight 2 Beta 1. For more details refer to Microsoft Silverlight site. Sample project requires "Microsoft Silverlight Tools Beta 1 for Visual Studio 2008". Details for installing the tools you can find here.

Introduction

When I’ve downloaded and installed the first cooked beta for Silverlight 2 I was really enraptured from what I’ve seen there. I didn’t expect such a huge jump ahead in such a small term (comparing with previous versions of Silverlight). At last my dream is started to come true.

I’ve been working for several years with the early versions of Ajax especially the Michael Schwarz xmlhttp implementation which I personally considered to be the best among the variety of existing projects. Later on with appearance of Atlas I’ve also devoted a lot of time digging and elaborating. But WPF appearance dramatically changed my attitude towards the technologies and products I want spend my working and spare time with. Being rather tired of ASP.NET and JavaScript "spaghetti coding" I didn’t touch a lot first Silverlight versions. I was clear enough for me that further versions of Silverlight have to provide the developers much more power in the future releases and we all should only wait patiently when WPF will get another Renderer rather then emulation for IE. This is when comes Silverlight 2.0. Even the first beta can impress anyone being really in love with .net 3.5/WPF. Xaml, Dependency objects/properties, C# and a great number of other candies. You should really take a loot at that!

I appreciate the work done by MS guys to deliver it to the community and realize how much work is to be performed for us to get the real power Silverlight is supposed to bring.

Diagramming sample

SilverlightDiagram1

Actually my intention was to test how much time could take me to cook anything working with Silverlight 2 beta 1. As we are facing something like WPF port I’ve decided to test how the common basic project could be ported to browser. First of all I was interested in problems rather than successful results. Anyway I was pleased much with both. As it is the first beta and serve for demonstration purposes my hands were quite tied in doing some efficient code behind. Even having nearly everything as "sealed" I must admit it is quite possible implementing a lot 🙂

It took me only one evening (approximately 3 or 4 hours of pure time) porting basics of my previous diagramming samples to Silverlight 2. Later on I’ll continue enhancing the sample to eliminate difference between my two implementations.

SilverlightDiagramming.Core

I’ve implemented a separate Silverlight Library for placing some common stuff there and also testing the Library project itself. I didn’t manage to find any helper class for walking visual and logical trees so I’ve implemented simple LogicalTreeHelper for my own needs, mainly hit testing the canvas and recursive parent search.

Shapes

As I’ve stuck a bit with styling and templating (I’ve played a bit with generics.xaml and it’s compilation as a Resource within the Library projects but guess this part is an early beta so I couldn’t get most of it I wanted) and downgraded to introducing simply separate User Controls for each of the shape. Also I managed to do the basic class for all the shapes to suite as an example later on (according to forums there’s a lot of troubles with inheritance at Beta 1 especially with dependency objects, but we can live with it up to next betas I think).

DiagramCanvas

Basic subclass of Canvas panel. Generic approach for adding children and input delegation to the underlying BasicTool for drawing straight line connections.

Drag and drop

I didn’t introduce anything here as there’s already cooked drag and drop samples that can be found in the Silverlight 2 documentation. Of course later on it can be replaced with some more efficient managers or whatever but as for now the MS sample is really good.

Connections and bindings

I’ve decided not to implement fancy bindings/multibindings for the first version as again I was interested in time more than additional facilities. I came across some issues with code behind bindings and quickly switched to INotifyPropertyChanged interface implementation. The only code behind binding sample between ToggleButton and StraightLineTool can be found in the Page.xaml.cs. Line positioning was left to owner driven layout updates on drag operations.

 

Conclusion

I must admit that it was a real pleasure preparing this sample. I’ll definitely continue enhancing the sample described alongside with preparing some more detailed overviews of issues I came across and walkarounds performed.

The source code for the article can be found at my SkyDrive

Advertisements

4 thoughts on “Silverlight Diagramming. Part 1.

  1. I can’t find the source code for this article on your SkyDrive. Is the source really there, or am I missing something? Thanks

  2. There’s some issues with embedding SkyDrive files so I’ve implemented a plain hyperlink for that.
    Thanks for the feedback.

  3. Great example.  Thanks for the thought and effort.Unfortunately, it looks like the file "SilverlightDiagramming1.zip" is missing the BasicSample.xaml file.  Do you have that file available?  I’d like to have it.

  4. There might be compilation differences depending on what Silverlight version you are using. The sample given was composed using Silverlight 2 beta 1. I’ve uploaded the same working version again in case there was any difficulties. Now I’m preparing an extended sample based on Silverlight 2 beta 2. Stay on the line if you are intrested in it too.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s