Creating custom look for vertices

Jul 12, 2010 at 9:55 AM


since I'm using nodexl as a WPF component I was wondering if it is possible to use a custom ControlTemplate for the look of vertices? This way we could add whatever content we want to a vertex and also not be so limited as now in how the content is displayed. Since WPF is very powerful I assume this shouldn't be too difficult to do.

The current option to show only different kind of symbols with labels is ok for showing large graphs but if somebody wants to show a small graph it would be nice if it could be made more "beautiful".

Thanks for the info,



Jul 12, 2010 at 5:27 PM
Edited Jul 12, 2010 at 5:30 PM


Using WPF's template concept to allow arbitrary content in the NodeXLControl is a really nice idea (think 3-D or video vertices!), but I'm afraid the control doesn't currently support templates and probably won't anytime soon.  When I rewrote the control last year (the prior version was based on GDI+), I opted for simplicity over flexibility and implemented only those features that were needed by our own Excel Template application.  I learned a lesson from the prior version of the control, which, among other advanced features, had pluggable drawing interfaces that provided template-like functionality in the days before WPF.  It was a good idea in theory, but it required testing resources we didn't have (and still don't have) to ensure that it would work in a wide variety of applications, and the code was far too complicated.  While WPF's elegant template concept could presumably be implemented in today's control with simpler code, it would still complicate the codebase and require quite a bit of testing.

The only thing I could suggest is to download the source code and modify the Microsoft.NodeXL.Visualization.Wpf.VertexDrawer.TryDrawVertex() method to draw whatever you need in your own application.  Not elegant, perhaps, but it would get the job done.

-- Tony

Jul 12, 2010 at 7:43 PM

An additional approach is to use custom shapes in a graphics file (JPG, PNG, BMP, etc) and use the "Image" shape option.  The shapes can be as variable as your imagination.



Jul 13, 2010 at 12:25 PM
Edited Jul 13, 2010 at 12:25 PM

Thank you both for your answers.

The suggestion by Marc seemed for me a better choice so I implemented it. I have however a problem with the quality of displayed images.

What happens is the following: I create an ImageSource of type RenderTargetBitmap and render inside of it a TextBlock with some text. I create several vertices and set them to show this (same!!) image. When the graph is laid out, some vertices look ok and some are quite blury.

An example can be seen at the bottom picture.


Do you have any ideas what would be the problem?



Jul 14, 2010 at 12:57 AM
Edited Jul 14, 2010 at 1:13 AM


I'm guessing that the DPI embedded in your images does not match the DPI of your screen.  For example, your images may be marked as 72 DPI while your screen is 96 DPI, or your images may be 96 DPI while your screen is 120 DPI.  When there is such a mismatch, a known issue in WPF involving fractional-pixel alignment kicks in, resulting in images that are sometimes blurred, depending on their location on the pixel grid.  Please see "Pixel Snapping in WPF Applications" at for more details.

The easy, but incomplete fix is to hard-code the DPI embedded in your images to your own screen DPI, which is probably 96 DPI.  Then your images will be sharp when displayed in NodeXL, provided the screen is set to 96 DPI.  A better solution is to dynamically set the embedded DPI to whatever screen DPI is detected at runtime, which is what our Excel Template does.  See Microsoft.WpfGraphicsLib.WpfImageUtil.GetImageSynchronousIgnoreDpi() for details.  As of July 13, 2010, it can be found at

-- Tony

Jul 14, 2010 at 8:47 AM
Edited Jul 14, 2010 at 8:59 AM

Hi Tony,

thank you for your suggestion. Unfortunately, dpi doesn't seem to be the problem. I was creating images with 96 DPI, my monitor is on 96DPI and your WpfImageUtil.ScreenDpi is also telling me that I have 96DPI.

I tried also using the WpfImageUtil.GetImageSynchronousIgnoreDpi but with the same result.

WpfImageUtil oWpfImageUtil = new WpfImageUtil();
BitmapSource img = oWpfImageUtil.GetImageSynchronousIgnoreDpi("path to the image");

I also used your TestWpfNodeXLControl.exe to check how the two images are shown there. I found the same problem appearing there. Here you can see an image of that:

The last "Office Online" image is much more blury than the other two although the problem is not so evident since the images are larger.

-- Gregor

Jul 14, 2010 at 11:27 PM


I can't reproduce the problem on my computers.  Perhaps there is a difference in graphics hardware or drivers that is causing different rendering behavior for me.

When the problem does occur, as it does on your computer, it may be due to NodeXL not placing the image an integral number of pixels from the screen origin, causing fractional pixel-alignment issues.  This is a general problem in WPF applications, there is no easy solution, and NodeXL doesn't attempt to solve it.  The unhappy recommendation from Microsoft, contained within the article I linked to above, is "High frequency images should be avoided whenever possible in Windows Presentation Foundation (WPF) applications."

I know that doesn't help you much.  If you really need high-quality rendering, you might revisit the idea of customizing the NodeXL code by modifying Microsoft.NodeXL.Visualization.Wpf.VertexDrawer.TryDrawVertex(), as opposed to using images.


-- Tony