Silverlight Organization Chart - Part 3 - The Node

Now after we talked about retrieving the data from the XML file, and calculating the nodes positions, we need to talk about drawing and the first thing that we need to draw is the node itself.

In this post, please note that I’m using the “Silverlight Hebrew & Arabic Language Support” library.

My XAML file will look like that:

<UserControl xmlns:my="clr-namespace:System.Windows.BidiControls;assembly=BidiControls" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input" x:Class="OrgChart.NodeBox"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="140" Height="80">

<Canvas x:Name="canvMain" MouseEnter="canvMain_MouseEnter" MouseLeave="canvMain_MouseLeave">

<Rectangle x:Name="recBorder" RadiusX="5" RadiusY="5" Stroke="CornflowerBlue" StrokeThickness="2">

<Rectangle.Fill>

<SolidColorBrush Color='#f2f3fd' />

</Rectangle.Fill>

</Rectangle>

<my:TextBlock TextAlignment="left" x:Name="tbEmployeeName" Width="130" Height="20" Foreground="Black" Canvas.Left="5" FontWeight="Bold"></my:TextBlock>

<my:TextBlock TextAlignment="left" x:Name="tbTitle" Width="130" Height="20" Foreground="Black" Canvas.Left="5"></my:TextBlock>

<my:TextBlock TextAlignment="left" x:Name="tbDepartment" Width="130" Height="20" Foreground="Black" Canvas.Left="5"></my:TextBlock>

<my:TextBlock TextAlignment="left" x:Name="tbExtension" Width="130" Height="20" Foreground="Black" Canvas.Left="5"></my:TextBlock>

<Canvas.Resources>

<Storyboard x:Name="mouseEnter">

<ColorAnimation

Duration='00:00:01'

To='#ffffcc'

Storyboard.TargetName='recBorder'

Storyboard.TargetProperty='(Shape.Fill).(SolidColorBrush.Color)' />

</Storyboard>

<Storyboard x:Name='mouseLeave'>

<ColorAnimation

Duration='00:00:00'

To='#f2f3fd'

Storyboard.TargetName='recBorder'

Storyboard.TargetProperty='(Shape.Fill).(SolidColorBrush.Color)' />

</Storyboard>

</Canvas.Resources>

</Canvas>

Where you will find a reference to the BidiControls for the Arabic support, a canvas with a border and four TextBlock to display the Name, Title, Department and the Extension and the values are assigned from the properties in the code behind.
Also there are two storyboards to change the background color on mouse hover.

The code behind will look like that:

namespace OrgChart

{

public partial class NodeBox : UserControl

{

private double _fontSize = 10;

public NodeBox(double scale)

{

_Scale = scale;

InitializeComponent();

tbEmployeeName.FontSize = _fontSize * Scale;

tbEmployeeName.SetValue(Canvas.TopProperty, 5 * scale);

tbEmployeeName.SetValue(Canvas.LeftProperty, 5 * scale);

tbEmployeeName.Height = 20 * scale;

tbEmployeeName.Width = 130 * scale;

tbEmployeeName.TextWrapping = TextWrapping.NoWrap;

tbEmployeeName.Clip = new RectangleGeometry() { Rect = new Rect(0, 0, 130 * scale, 20 * scale) };

// the same for all the controls on the canvas

}

// Control Properties to set the TextBlock Values

}

}

Where font size, width, height, the location and the clip area of each TextBlock must be adjusted based on the scale. Also the node border must be adjusted, the rounded corner radius and the thikness and the dimentions:

recBorder.StrokeThickness = 2 * scale;

recBorder.RadiusX = 5 * scale;

recBorder.RadiusY = 5 * scale;

recBorder.Width = this.Width * scale;

recBorder.Height = this.Height * scale;

Our next step will talk about drawing the nodes and the lines on the main control.