Saturday, April 16, 2011

NetworkView - A cool WPF control for diagraming network, graphs, flowcharts, etc

CodeProject - NetworkView: A WPF custom control for visualizing and editing networks, graphs and flow-charts


This article examines the use and implementation of a WPF custom controlthat is used to display and edit networks, graphs and flow-charts. NetworkView, as I have called it, was inspired by and has many similarities to standard WPF controls such as ItemsControl and TreeView. The article and the sample code show how to use the control from XAML and from C# code.

This article is arranged in two main parts.

Part 1 examines NetworkView usage with walkthroughs of the two sample projects. This part and the reference section are enough if you just want to use NetworkView.

Part 2 goes into detail on the implementation. This will be useful if you want to make your own modifications to NetworkView or if you want to understand my approach to developing a complex WPF custom control.

At the end of the article is a reference section that describes the public properties, methods and commands exposed by NetworkView.

In previous articles I have covered a number of WPF techniques: use of adorners, zooming and panning,binding to UI element positions and most recently drag-selection of multiple items. NetworkView and the sample applications make use of all these techniques. I won't be covering these techniques in detail here. Instead, where appropriate, I'll refer back to previous articles.

NetworkView is intended to be backed with an application-specific view-model. It is possible, though I don't recommend it, to use NetworkView programmatically or in XAML without a view-model. This is similar to other WPF controls such as TreeView where you can also get by without a view-model. Using a view-model is the way it is intended to be used, so this is what we will be looking at. The simple sample uses a simple view-model while the advanced sample extends the view-model and adds new features. Josh Smith has a great article that shows how a view-model can improve your experience with the WPF TreeView.


This screenshot shows a simple graph created in the advanced sample. The main window shows a viewport onto the graph and beneath it the overview window shows the entire canvas.



This is officially a cool article and project. The article is novella length (32 printed pages), well written, formatted and diagrammed. And the project is covers is cool too. This is one of those kinds of controls you don't see source available very often, let alone one polished like this.

For example, check out a shot of the "advanced sample"


Yeah, that's a help like window next to the main, that explains how to use the control.

Here's a sample of the snap of the Solution


No comments: