Many years ago when Java appeared on the scene a little demo applet was delivered together with the Java SDK. It was not a huge piece of software but it sparked many ideas and a whole industry evolved around it (see TouchGraph for example), especially in the academic world. In those days things were frustrating for a Visual Basic developer, well any Microsoft developer in fact, because we only had ActiveX controls and these were far behind in many respects. It took many years for Microsoft to get over the COM and ActiveX disaster, it took us developers many years to finally have the possibility to do what Java was enabling then. Through Silverlight there’s finally the ease of .Net inside the browser and, in fact, much more; a lightweight version of WPF which includes animation and other fancy Flash-like stuff.
It took me little effort to shift my WPF experience to Silverlight and to transpose some layout algorithms. There are some difference, for sure, but hardly anything I can complain about. Alltogether I truly enjoyed the hours I spent on developing this little ‘applet’. Graphite is very similar to the Java applet but the implementation is more clean and I have taken much care of the API. The only significant part is the layout algorithm, which you can almost copy/paste from the Java applet or fetch from some Netron code. Hyperbolic layout and tree layout are easily implemented but I’m not sure I will, because I have to focus my attention back to GraphSquare.
See for yourself:
- the black version
- the green version
Usage:
- use CTRL-click on nodes or on the canvas to add random nodes
- use SHIFT-click to select nodes before creating a new edge. Note that you can select only two of them.
- use ALT-click to delete a node and its bindings
- hover over a node to see the underlying info
Features:
- things are pretty much all encapsulated into a custom Canvas object
- the API and events make it easy to manipulte the diagram in any context
- the architecture is model-view based, the model being a straightforward graph data structure
- data can be imported from flat text files or from XML
- the visualization is based on WPF/SIlverlight templating and styling features outside the control, which means one can customize colors and appearance. The flexibility of WPF’s triggers and other subtleties is missing in Silverlight but one can get quite far nevertheless.
- the layout algorithm is continous, which means you can drag nodes around like beans in jam. It all behaves very ‘organic’.
Addendum: due to a different font on your side you might see node titles a little bit bigger or smaller than on the screenshots.
Demo: go ahead and have fun with the Graphite demo.
Was there supposed to be something in this post? It appears to be blank.
Wordpress permissions issue. Sorry.
Hi! Definitely cool stuff! Is this Graphite library something one could use in their Silverlight/WPF apps? Any licensing restrictions?
Thanks!
You can use the library as-is without restrictions or license. The source code is not free though.
I downloaded the demo. Referenced the Graphite.dll in a seperate Silverlight Application. I am calling the .AddNode method, but no nodes are displayed in the canvas. I am unable to display the Nodes using the demo WhitePage.xaml as well. What am I missing here?
The node is actually being added but it’s not visible
The reason is that you need to add the necessary resource either in the ‘UserControl.Resources’ or inside the App.XAML. Just copy the resources you find in the sample to your own application and all will be well.
The framework walks up the resources tree and tries to find a template for the nodes if nothing is found, nothing is rendered (an empty visual if you wish).
Worked great Thanks for the tip.
On Initialize the “Home” node is created automatically. How to avoid creating the Home node. If a default Node needs to be created then how to override the string “Home” with a custom string?
@aksheik
Try using NewDiagram(false); I think that’s what you’re looking for.
I also have a question: I’m currently handling the NodeClick event and I’m wondering how I can set the clicked node to be the new ‘central’ node.
Thanks in advance.
Best regards,
Ruben.
Folks, I’d like to emphasize that the stuff your are using is really just a demo and has a few constraints. Full access to various features (databinding to collections, animations, datagrid integration and such) is part of the commercial version.
Very interested in this, feels a bit like springgraph (flash). I was wondering if you collapse and expand. Also is there a price list anywhere?
See the brochure for prices.
How can I define hierarchic layout or tree layout for the GraphCanvas nodes?
Hi,
I’m using the AddNode in order to build the graph dynamically.
How can I define the location of a node?
Thanks
Are you a customer? If so, send your support requests directly via mail to us.
If not then please notice that this is commercial software and the demo version (limited to ten nodes) does not include support.