Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
101 lines (75 sloc) 3.61 KB

Loki is a collection of graph visualization and interaction tools for Blueprints.NET based graph data models hosted in Microsoft Windows Presentation Framework, Silverlight or HTML5 environments.

An example for the usage of Loki within WPF

WPF has a very nice canvas tool for drawing all kinds of visual stuff. Loki provides an extention to this class called GraphCanvas which makes it easy to draw a customized Blueprints.NET graph. The new canvas provides a build-in property graph which can be used like a normal property graph but is subscribed to all (at the moment at least to a lot of...) vertex and edge manipulation methods so you can see all programmatically changes to the graph immediately.

  1. Add the GraphCanvas.WPF project to your solution

  2. Adapt your MainWindow.xaml to something like this...

        <Loki:GraphCanvas Grid.Column         = "0"
                          HorizontalAlignment = "Stretch"
                          Name                = "GraphCanvas"
                          VerticalAlignment   = "Stretch"
                          ClipToBounds        = "True"
                          ToolTip             = "Graph canvas"
                          SnapsToDevicePixels = "True" />
  3. Adapt your MainWindow.cs to something like this...

    using System; using System.Windows;

    namespace de.ahzf.Loki.WPFDemo {

    public partial class MainWindow : Window
        public MainWindow()
            // Customize the vertices caption
            GraphCanvas.VertexCaption = v =>
                Object Name;
                if (v.TryGetProperty("Name", out Name))
                    return Name as String;
                    return v.Id.ToString();
            var Graph = GraphCanvas.Graph;
            var Alice = Graph.AddVertex(v => v.SetProperty("Name", "Alice"));
            var Bob   = Graph.AddVertex(v => v.SetProperty("Name", "Bob"  ));
            var Carol = Graph.AddVertex(v => v.SetProperty("Name", "Carol"));
            var Dave  = Graph.AddVertex(v => v.SetProperty("Name", "Dave" ));
            var e1    = Graph.AddEdge(Alice, "friends", Bob  );
            var e2    = Graph.AddEdge(Bob,   "friends", Carol);
            var e3    = Graph.AddEdge(Alice, "friends", Carol);
            var e4    = Graph.AddEdge(Carol, "friends", Dave );
            // Customize the vertices tooltip
            GraphCanvas.VertexToolTip = v => {
                Object Name;
                if (v.TryGetProperty("Name", out Name))
                    return Name as String;
                    return v.Id.ToString();
            // Customize the edges tooltip
            GraphCanvas.EdgeToolTip = e => e.Label;


  4. And finally your result will be something like this...

WPFDemo small