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
NetworkViewusage with walkthroughs of the two sample projects. This part and the reference section are enough if you just want to use
Part 2 goes into detail on the implementation. This will be useful if you want to make your own modifications to
NetworkViewor 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
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.
NetworkViewand 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.
NetworkViewis intended to be backed with an application-specific view-model. It is possible, though I don't recommend it, to use
NetworkViewprogrammatically or in XAML without a view-model. This is similar to other WPF controls such as
TreeViewwhere 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
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