Tuesday, June 22, 2010

Silverlight Organization Chart - Part 4 - Drawing

I have received too many messages to post the code for drawing the lines and the boxes for the Organization Chart, which actually the easy part after calculating the positions, but here it is:

Drawing Lines:

here in this method it is simply drawing a line

public void DrawLine(Canvas canvas, double x1, double y1, double x2, double y2)
{
Line line = new Line();
line.X1 = x1;
line.Y1 = y1;
line.X2 = x2;
line.Y2 = y2;
line.Stroke = Util.GetColorFromHex("#FF6495ed");
line.StrokeThickness = LinesStrokeThickness;
canvas.Children.Add(line);
}

Where LinesStrokeThickness = 1 And GetColorFromHex is a method that convert the RGB color to brush color:

public static SolidColorBrush GetColorFromHex(string myColor)
{
return new SolidColorBrush(
Color.FromArgb(
Convert.ToByte(myColor.Substring(1, 2), 16),
Convert.ToByte(myColor.Substring(3, 2), 16),
Convert.ToByte(myColor.Substring(5, 2), 16),
Convert.ToByte(myColor.Substring(7, 2), 16)
)
);
}

Drawing the box with the lines:

In this method it is drawing the NodeBox and set its values, also it put it in the right place based on the calculations.

public void AddBox(Canvas canvas, double x, double y, double? parentX, string ID, string name, string title, string department, string extension, bool root, bool subNodes)
{
NodeBox nb = new NodeBox(drawingScale);
nb.Name = ID;
nb.EmployeeName = name;
nb.Title = title;
nb.Department = department;
nb.Extension = extension;
nb.Width = buttonWidth;
nb.Height = buttonHeight;
nb.SetValue(Canvas.LeftProperty, x - nb.Width / 2);
nb.SetValue(Canvas.TopProperty, y);

canvas.Children.Add(nb);

// The line above the box
if (root)
DrawLine(canvas, x, y - minVerticalSpace, x, y);


// Draw the horizontal line to the parent
if (parentX != null)
DrawLine(canvas, x, y - minVerticalSpace, Convert.ToDouble(parentX), y - minVerticalSpace);


// Draw the line under the box
if (subNodes)
DrawLine(canvas, x, y + buttonHeight, x, y + buttonHeight + minVerticalSpace);

}

in-shaa Allah, this post help you to complete your organization chart based on Silverlight.

3 comments:

Bishnu said...

thanks for this
but can u please suggest how to zoom this orgchart as follows
http://visunetdemos.demos.ibm.com/SilverlightOrgChart/default.html
i'm using webservice instead of xml
please reply here bishnu.tewary@gmail.com if you don't mind
thanks again

Bishnu said...

thanks for this
but can u please suggest how to zoom this orgchart as follows
http://visunetdemos.demos.ibm.com/SilverlightOrgChart/default.html
i'm using webservice instead of xml
please reply here bishnu.tewary@gmail.com if you don't mind
thanks again

sandeep wuthoo said...

Can you help, how to add image and change color to the nodes.??

Thanks In Advance..