bubdm / loki Goto Github PK

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...

   <Grid>
       <Loki:GraphCanvas Grid.Column         = "0"
                         HorizontalAlignment = "Stretch"
                         Name                = "GraphCanvas"
                         VerticalAlignment   = "Stretch"
                         ClipToBounds        = "True"
                         ToolTip             = "Graph canvas"
                         SnapsToDevicePixels = "True" />
   </Grid>
   

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()
       {
   
           InitializeComponent();
   
           // Customize the vertices caption
           GraphCanvas.VertexCaption = v =>
           {
               Object Name;
               if (v.TryGetProperty("Name", out Name))
                   return Name as String;
               else
                   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;
               else
                   return v.Id.ToString();
           };
   
           // Customize the edges tooltip
           GraphCanvas.EdgeToolTip = e => e.Label;
   
       }
   
   }
   

   }

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