Thanks for the reply. As I am a beginner at C#, I should have been more clear. I'm developing a web project, not a web form. The example you provided required me to include System.Windows.Forms to my project. Not sure if that is the right solution or not. If you believe your code would work in an ASP.NET Web Application (not MVC), then I'll continue trying to make it work.

And to be even more clear, I'd like the user to have the ability to click on an object to change the object and lines colors. And if the user clicks the object again, it would turn back to the default colors. It would be nice if the diagram would allow the user to click on an object, then click on another object, and so on while each object and lines were highlighted in the new color. Then later they could click on each object one at a time to restore them back to the default colors. You have an example of this functionality in a map called "Map Drill Down". I just can figure out how to make my project work like that.

Here is my current code:

using System;
using System.Data;
using System.Drawing;
using System.Web;

using Nevron.Diagram;
using Nevron.Diagram.DataImport;
using Nevron.Diagram.Layout;
using Nevron.Diagram.Shapes;
using Nevron.Diagram.ThinWeb;
using Nevron.GraphicsCore;
using Nevron.ThinWeb;

namespace DiagramFromDatabase
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, System.EventArgs e)
        {
            // begin view init
            /*
            base.DefaultGridOrigin = new NPointF(30, 30);
            base.DefaultGridCellSize = new NSizeF(100, 50);
            base.DefaultGridSpacing = new NSizeF(50, 40);
            */

            if (!NThinDiagramControl1.Initialized)
            {
                NDrawingDocument document = NThinDiagramControl1.Document;

                // init document
                document.BeginInit();
                InitDocument(document);
                document.EndInit();
            }
        }

        private void InitDocument(NDrawingDocument document)
        {
            document.BackgroundStyle.FrameStyle.Visible = false;
            document.GraphicsSettings.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
            document.GraphicsSettings.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;
            document.GraphicsSettings.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;

            // create two stylesheets - one for the vertices and one for the edges
            NStyleSheet vertexStyleSheet = new NStyleSheet("Vertices");
            vertexStyleSheet.Style.FillStyle = new NColorFillStyle(Color.FromArgb(220, 220, 220));
            document.StyleSheets.AddChild(vertexStyleSheet);
            NStyleSheet edgeStyleSheet = new NStyleSheet("Edges");
            edgeStyleSheet.Style.StrokeStyle = new NStrokeStyle(1, Color.Black);
            edgeStyleSheet.Style.EndArrowheadStyle = new NArrowheadStyle(ArrowheadShape.Arrow, "", new NSizeL(5, 5), new NColorFillStyle(Color.Black), new NStrokeStyle(1, Color.Black));
            document.StyleSheets.AddChild(edgeStyleSheet);

            // create the tree data source importer
            NGraphDataSourceImporter graphImporter = new NGraphDataSourceImporter();

            // set the document in the active layer of which the shapes will be imported
            graphImporter.Document = document;

            // set the datasource
            string databasePath = HttpContext.Current.Server.MapPath(@"App_Data\SiteMap.xml");
            DataSet dataSet = new DataSet();
            dataSet.ReadXml(databasePath, XmlReadMode.ReadSchema);
            graphImporter.VertexDataSource = dataSet.Tables["Pages"];
            graphImporter.EdgeDataSource = dataSet.Tables["Links"];
            graphImporter.VertexIdColumnName = "Id";
            graphImporter.FromVertexIdColumnName = "FromPageId";
            graphImporter.ToVertexIdColumnName = "ToPageId";

            // create vertices as rectangles shapes, with default size (1, 1)
            NBasicShapesFactory shapesFactory = new NBasicShapesFactory();
            shapesFactory.DefaultSize = new NSizeF(1, 1);
            graphImporter.VertexShapesFactory = shapesFactory;
            graphImporter.VertexShapesName = BasicShapes.Rectangle.ToString();

            // set stylesheets to be applied to imported vertices and edges
            graphImporter.VertexStyleSheetName = "Vertices";
            graphImporter.EdgeStyleSheetName = "Edges";

            // use layered graph layout
            NLayeredGraphLayout layout = new NLayeredGraphLayout();
            layout.Direction = LayoutDirection.TopToBottom;
            layout.LayerAlignment = RelativeAlignment.Far;
            layout.EdgeRouting = LayeredLayoutEdgeRouting.Orthogonal;
            layout.Compact = true;
            graphImporter.Layout = layout;

            // subscribe for the vertex imported event,
            // which is raised when a shape was created for a data source record
            graphImporter.VertexImported += new ShapeImportedDelegate(OnVertexImported);

            // import
            graphImporter.Import();

        }

        private void OnVertexImported(NDataSourceImporter importer, NShape shape, INDataRecord dataRecord)
        {
            // display the page title in the shape
            object text = dataRecord.GetColumnValue("Title");
            if (text == null)
            {
                shape.Text = "Title not specified";
            }
            else
            {
                shape.Text = text.ToString();
            }
            shape.SizeToText(new NMarginsF(10));
        }
    }
}

Hi,

In order to achieve this you should subscribe to the NodeMouseDown event of the document’s event sink service and either change the style or the style sheet of the clicked shape and its outgoing connectors in the event handler. The following is a simple example:

// Create and add some style sheets

NStyleSheet customShapesStyleSheet = new NStyleSheet("Custom Shapes");

NStyle.SetFillStyle(customShapesStyleSheet, new NColorFillStyle(KnownArgbColorValue.Red));

document.StyleSheets.AddChild(customShapesStyleSheet);

NStyleSheet customConnectorsStyleSheet = new NStyleSheet("Custom Connectors");

NStyle.SetEndArrowheadStyle(customConnectorsStyleSheet, new NArrowheadStyle(ArrowheadShape.Arrow, null, new NSizeL(6, 6),

        new NColorFillStyle(KnownArgbColorValue.White), new NStrokeStyle(KnownArgbColorValue.Black)));

document.StyleSheets.AddChild(customConnectorsStyleSheet);

// Subscribe to the NodeMouseDown event

document.EventSinkService.NodeMouseDown += new NodeMouseEventHandler(OnNodeMouseDown);

The event handler should look like this:

private void OnNodeMouseDown(NNodeMouseEventArgs args)

{

        NShape shape = args.Node as NShape;

        if (shape == null || shape.ShapeType != ShapeType.Shape2D)

               return;

        // Change the style sheet of the clicked shape

        shape.StyleSheetName = "Custom Shapes";

        // Get all aoutgoing connectors and set their style sheet

        NNodeList outgoingShapes = shape.GetOutgoingShapes();

        for (int i = 0, count = outgoingShapes.Count; i < count; i++)

        {

               NShape connector = (NShape)outgoingShapes[i];

               connector.StyleSheetName = "Custom Connectors";

        }

}

Are there any examples showing the use of HighlightedAppearanceChangeMode?  I want the ability to click on an object in a diagram and have it change the the color of the object and the arrow connecting it to another object.

Thanks.