DrawGraphCompleted event

May 25, 2010 at 11:53 AM
Edited May 25, 2010 at 11:54 AM

Hi all

I'm using nodexl WPF control. I need to display a "Loading" popup while the graph is drawing.

Strangely, the DrawingGraph and DrawGraphCompleted events are not firing 

Is there any trigger that could result in those events not being fired?


Here's my code (the graph already is already populated)


private void nodeXLControl1_DrawingGraph(object sender, EventArgs e)
            double x = this.Width / 2 - drawingCanvas.Width / 2;
            double y = this.Height / 2 - drawingCanvas.Height / 2;
            Canvas.SetLeft(drawingCanvas, x);
            Canvas.SetTop(drawingCanvas, y);
            drawingCanvas.Visibility = Visibility.Visible;

private void nodeXLControl1_DrawGraphCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)
      drawingCanvas.Visibility = Visibility.Collapsed;

public void drawGraph()
            this.nodeXLControl1.GraphDrawer.BackColor = Colors.White;
            this.nodeXLControl1.GraphDrawer.EdgeDrawer.Width = 3;
note that the graph is being drawn perfectly.




May 25, 2010 at 4:42 PM
Edited May 25, 2010 at 4:45 PM

Did you subscribe to the events you want to handle?  You have to run the following code once, somewhere in your initialization code:

        nodeXLControl1.DrawingGraph += new System.EventHandler(nodeXLControl1_DrawingGraph);

        nodeXLControl1.DrawGraphCompleted += new AsyncCompletedEventHandler(nodeXLControl1_DrawGraphCompleted);

In C#, merely defining an event-handling method is not sufficient.  You also have to subscribe to the event.

-- Tony

May 25, 2010 at 8:55 PM

Hi Tony. 10x for your quick reply

Actually, I have set the events directly in the designer (not that new to c# ;) ). If I comment the function, building fails, which means they are properly assigned.

I also tried using the DrawGraph method using the nodexl control graphdrawer, with no success.

And just to be sure, I tried assigning the events from the code behind, with no success

I also tried assigning the handler in the nodexlcontrol Loaded event.

Checking the debugger reveals that the methods are properly assigned to the events. The problem seems as if the event is not being triggered.

Any ideas would be welcome. Thanks

Charbel Abdo


May 25, 2010 at 10:17 PM
Edited May 26, 2010 at 5:05 AM


I don't see how that is possible.  The events fire in our own Excel Template application, and they also fire in a small test application I just put together.  And when I look at the control's source code, I can't see anything that would cause the events not to fire -- when the graph gets drawn, the event-firing code always gets called.

Why don't you try the same small test application, get that to work, and then work forward from there?  That will help isolate the problem.  If the test application works for you but your own application doesn't, then the problem is somewhere within your application.  If the test application doesn't work, then the problem is within NodeXL or your dev environment.

Here is how I built the test application:

1. Create a new WPF Application project.

2. Add references to Microsoft.NodeXL.Control.Wpf, Microsoft.NodeXL.Core, Microsoft.NodeXL.Layouts, and Microsoft.NodeXL.Visualization.Wpf.

3. Drag a NodeXLControl onto Window1.

4. Handle the Loaded event on Window1.

5. Replace Window1.xaml with the contents of the next post.

6. Replace Window1.xaml.cs with the contents of the post after that.

When I run this application, I get the expected debug messages in Visual Studio's Output window, indicating that the expected events are firing.

-- Tony

May 25, 2010 at 10:18 PM

<Window x:Class="WpfApplication1.Window1"
    Title="Window1" Height="300" Width="300" xmlns:my="clr-namespace:Microsoft.NodeXL.Visualization.Wpf;assembly=Microsoft.NodeXL.Control.Wpf" Loaded="Window_Loaded">
        <my:NodeXLControl Margin="2,-8,22,15" Name="nodeXLControl1" DrawingGraph="nodeXLControl1_DrawingGraph" DrawGraphCompleted="nodeXLControl1_DrawGraphCompleted" />

May 25, 2010 at 10:18 PM

           using System;
            using System.Windows;
            using System.Windows.Media;
            using Microsoft.NodeXL.Core;
            using Microsoft.NodeXL.Visualization.Wpf;
            namespace WpfApplication1
            public partial class Window1 : Window
                public Window1()
                private void Window_Loaded(object sender, RoutedEventArgs e)
                protected void PopulateAndDrawGraph()
                    // Get the graph's vertex collection.
                    IVertexCollection oVertices = nodeXLControl1.Graph.Vertices;
                    // Add three vertices.
                    IVertex oVertexA = oVertices.Add();
                    IVertex oVertexB = oVertices.Add();
                    IVertex oVertexC = oVertices.Add();
                    // Change the color, radius, and shape of vertex A.
                        Color.FromArgb(255, 255, 0, 255));
                    oVertexA.SetValue(ReservedMetadataKeys.PerVertexRadius, 20F);
                    // Draw vertex B as a Label, which is a rectangle containing text.
                    oVertexB.SetValue(ReservedMetadataKeys.PerVertexLabel, "Label");
                    // Set the label's text and fill colors.
                        Color.FromArgb(255, 220, 220, 220));
                        Color.FromArgb(255, 0, 0, 0));
                    // Annotate vertex C with text that is drawn outside the vertex.  All
                    // shapes except Label can be annotated.
                    oVertexC.SetValue(ReservedMetadataKeys.PerVertexLabel, "Annotation");
                    // Get the graph's edge collection.
                    IEdgeCollection oEdges = nodeXLControl1.Graph.Edges;
                    // Connect the vertices with directed edges.
                    IEdge oEdge1 = oEdges.Add(oVertexA, oVertexB, true);
                    IEdge oEdge2 = oEdges.Add(oVertexB, oVertexC, true);
                    IEdge oEdge3 = oEdges.Add(oVertexC, oVertexA, true);
                    // Customize their appearance.
                        Color.FromArgb(255, 55, 125, 98));
                    oEdge1.SetValue(ReservedMetadataKeys.PerEdgeWidth, 3F);
                    oEdge1.SetValue(ReservedMetadataKeys.PerEdgeLabel, "This is edge 1");
                    oEdge2.SetValue(ReservedMetadataKeys.PerEdgeWidth, 5F);
                    oEdge2.SetValue(ReservedMetadataKeys.PerEdgeLabel, "This is edge 2");
                        Color.FromArgb(255, 0, 255, 0));

                private void nodeXLControl1_DrawingGraph(object sender, EventArgs e)

                private void nodeXLControl1_DrawGraphCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)


May 26, 2010 at 6:51 AM
Edited May 26, 2010 at 6:52 AM

Hi. thank you very much for your concern :)

After trying the above code (and it worked), the one difference between my code and yours hit me:



So after changing the LayOutFirst argument to true, the events fired. Changing it back to false caused the events not to fire

Is this intended? does laying out the graph have anything to do with the drawing events firing?


May 26, 2010 at 6:01 PM


No, it's not intended.  It's a bug in the NodeXLControl.  It will be fixed in version of NodeXL, which I plan to release today.

Thank you for finding this!

-- Tony

May 27, 2010 at 7:53 AM

Hi again

Could you please notify me when the new version is released? (just post it here)

Thank you very much


May 27, 2010 at 4:35 PM
Edited May 27, 2010 at 4:58 PM


Sure, I released it yesterday. Look for "NodeXL Class Libraries, version" on the Downloads tab.

If you'd like to be automatically notified of all new releases, search for "Release Notification" on the Downloads tab.

-- Tony

Jun 8, 2010 at 5:13 AM
Edited Jun 8, 2010 at 5:49 AM


I had to revert this change.  It broke a feature in our NodeXL Excel Template (the Scale slider in the graph pane no longer worked properly), and it failed to address the problem's root cause, which is that the events were improperly named.

In version, the following changes are made to the NodeXLControl:

* The DrawingGraph event is now called LayingOutGraph.

* The DrawGraphCompleted event is now called GraphLaidOut.

* The IsDrawing property is now called IsLayingOutGraph.

* The DrawGraphAsync() method is now called DrawGraph().

The first three class members above exist to inform the application when an asynchronous operation is taking place, so it can disable controls that shouldn't be used during the operation.  The asynchronous operation is actually the laying out of the graph, which is done on a background thread.  If you call DrawGraph() with a layOutGraphFirst argument of false, then there is no asynchronous operation, and no events should fire.  So the original event behavior was correct, but the event names were wrong.

By the way, this is all a result of attempting to maintain backward compatibility with an earlier, GDI-based version of the control, in which drawing really was asynchronous.  I should have changed the event names when I rewrote the control to use WPF.  I apologize for all this confusion.

-- Tony