SnagL™ ships with some “out of the box” icons that can be referenced in the GraphML to change the node icons that are displayed on an individual node basis. In addition to this, SnagL also supports the ability to load external image resources. This tutorial provides you with a brief sample of two methods you can use to create your own external image resources that can referenced by the GraphML you generate.


The simplest approach to loading external images is simply to reference them in the GraphML for your graph. A brief look at the SnaglML documentation shows an image can be referenced by using the ImageSource attribute. Simply reference an image via HTTP URI and SnagL™ will automatically display this image on the graph surface:

<data key="node-prop-ImageSource"></data>

External Silverlight Resource

Start by creating a new Silverlight 4 class library in Visual Studio 2010

The name of the project doesn’t matter, but we’ll be using SampleResource for this project.

Right-click the project and select Add -> New Folder, naming the folder Resources.

Right-click the Resources folder and select Add -> Existing Item.

From the Add Existing Items dialog, select the image for the icon you would like to use.

Check the properties of the image and ensure the Build Action is set to Resource and Copy to Output Directory is set to Do not copy.

At this point, your assembly needs to be deployed to the server hosting SnagL and you need to configure SnagL to load your external resource. This particular tutorial uses the configuration utility to update SnagL, but please see the configuration post for additional details.

Open the configuration utility and open the XAP file for SnagL.

Locate the <resources> section and add a resource that references your sample resource XAP:
<resource name="Tutorial" path="SampleResource.xap" />

Last edited Jan 14, 2013 at 3:33 PM by senfo, version 3


No comments yet.