I recently started a new job where I am employed as a WPF developer. When I arrived the guys there gave me a brief that was to make a cool app, and they really liked the look and feel of the FamilyShow exemplar by Vertigo. Which I also love, that and Tangerine by Infragistics are my favourite WPF demos.
What I liked in both where the fluid movements and the diagraming approach used in the FamilyShow exemplar particularly. The guys where I just started working asked me how hard it would be to create something like the diagramming component seen in the FamilyShow exemplar. So without further ado I contacted my favourite partner in weird WPF breifs, Mr Fredrik Bornander, who I love working with on these stranger ideas. We seem to manage to do a reasonable job together, at least I think anyway.
This article will describe a tree like diagram component that we have nicknamed the "SpiderControl".
Here is a screenshot just to wet your appetite:
The rest of this article will describe how we went about building this little
control
The following is a list of what the control actually does
ScrollViewer which allows the user to use
the mouse to create a friction enabled drag operation (this is pretty cool
actually)
So now onto the nitty gritty, which is the part you are probably wanting to read anyhow.
So first lets just have a quick look at the basic structure
Ill split this into 2 diagrams for no other reason than I couldnt figure out how to get words SmartArt to add more levels to its standard SmartArt diagrams, curse technology.
It can be seen from the above diagram that the HostWindow holds an instance
of a DragViewer. So the windows code is simply the following:
<Window x:Class="SpiderTreeControl.HostWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:diagram="clr-namespace:SpiderTreeControl.Diagram"
WindowStartupLocation="CenterScreen"
Title="HostWindow" Height="400" Width="400">
<Grid>
<diagram:DragViewer x:Name="dragViewer"
Width="auto" Height="auto"
Margin="0"/>
</Grid>
</Window>
And then if we focus our attention to the actual DragViewer, where
we wrap a DiagramViewer within a FrictionScrollViewer.
The FrictionScrollViewer is a specialized ScrollViewer that acts
using friction to create nice fluid drag operations. I talk more about this
on an older blog entry of mine, which you can read about using my blog entry
http://sachabarber.net/?p=225
<UserControl x:Class="SpiderTreeControl.Diagram.DragViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:diagram="clr-namespace:SpiderTreeControl.Diagram;assembly="
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="auto" Width="auto">
<diagram:FrictionScrollViewer x:Name="sv" Style="{StaticResource ScrollViewerStyle}">
<diagram:DiagramViewer x:Name="diagramViewer" Margin="0" Width="2000" Height="2000"/>
</diagram:FrictionScrollViewer>
</UserControl>
The Style you see for the scrollbar is achieved using some Styles
which are located within the AppStyles.xaml ResourceDictionary. This is what gives the ScrollViewer its appearance as shown below:
But all of that is simple eye candy, we need to get to nuts and bolts.
So going back to the DragViewer, which holds an instance of the
DiagramViewer. In code behind the DragViewer is responsible
for setting up the nodes collection that is used for its embedded DiagramViewer.
This is done is code as follows:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;
namespace SpiderTreeControl.Diagram
{
/// <summary>
/// Interaction logic for DragViewer.xaml
/// </summary>
public partial class DragViewer : UserControl
{
public DragViewer()
{
InitializeComponent();
this.Loaded+=delegate
{
LoadDiagramNodes();
};
}
public void LoadDiagramNodes()
{
DiagramNode root = new DiagramNode("Root", null, "../Images/DiagramRootNode.png", "Dummy1View","this is the root node");
DiagramNode a = new DiagramNode("A", root, "../Images/DiagramNode.png", "Dummy1View", "this is node A");
DiagramNode b = new DiagramNode("B", root, "../Images/DiagramNode.png", "Dummy1View", "this is node B");
DiagramNode c = new DiagramNode("C", root, "../Images/DiagramNode.png", "Dummy1View", "this is node C");
DiagramNode d = new DiagramNode("D", root, "../Images/DiagramNode.png", "Dummy1View", "this is node D");
DiagramNode e = new DiagramNode("E", root, "../Images/DiagramNode.png", "Dummy1View", "this is node E");
DiagramNode f = new DiagramNode("F", root, "../Images/DiagramNode.png", "Dummy1View", "this is node F");
diagramViewer.RootNode = root;
diagramViewer.FrictionScrollViewer = this.sv;
}
}
}
Were individual DiagramNode objects are created and the relationship
between them are establish by passing the relavant DiagramNode
in as a constructor parameter to another DiagramNode. Obviously
in the case of the root DiagramNode, this value is null. The last
thing that is done is that the embedded DiagramViewer has its RootNode
property set to the root DiagramNode. There is also a requirement
to set the embedded DiagramViewers FrictionScrollViewer
property, such that the DiagramViewers layout algorithm can react
to new ScrollViewer positions should the user move the ScrollViewer
or drag the diagram.
Is where all the layout of contained DiagramNodes occurs. This
is a simple user control that contains a single TreeCanvas that
holds the actual collection of DiagramNodes, and draws the lines
between them, which is discussed below. The DiagramViewer also
listens to events from the DiagramNodes such as Selected/Collapsed/Expanded,
where it will perform the layout based on the node selection.
The DiagramViewer uses a radial algorithm to lay out the collection of child
nodes around a parent node. This is done using standard trigonometry maths.
The basic idea is that each DiagramNode is given a bounding circle
to ensure that all nodes have a uniform size, and then an angle between nodes
is calculated.
This process is done on the NodeExpanded(), as shown below:
private void NodeExpanded(DiagramNode sender, RoutedEventArgs eventArguments)
{
rootNode.Location = new Point(
(double)GetValue(Canvas.ActualWidthProperty) / 2.0,
(double)GetValue(Canvas.ActualHeightProperty) / 2.0);
MakeChildrenVisible(sender);
if (sender.DiagramParent != null)
{
sender.DiagramParent.Visibility = Visibility.Visible;
foreach (DiagramNode sibling in sender.DiagramParent.DiagramChildren)
{
if (sibling != sender)
sibling.Visibility = Visibility.Collapsed;
}
if (sender.DiagramParent.DiagramParent != null)
sender.DiagramParent.DiagramParent.Visibility = Visibility.Collapsed;
}
if (sender.DiagramChildren.Count > 0)
{
double startAngle = CalculateStartAngle(sender);
double angleBetweenChildren = (sender == rootNode ? Math.PI * 2.0 : Math.PI) /
((double)sender.DiagramChildren.Count - 0);
double legDistance = CalculateLegDistance(sender, angleBetweenChildren);
for (int i = 0; i < sender.DiagramChildren.Count; ++i)
{
DiagramNode child = sender.DiagramChildren[i];
child.Selected += new NodeStateChangedHandler(NodeSelected);
child.Expanded += new NodeStateChangedHandler(NodeExpanded);
child.Collapsed += new NodeStateChangedHandler(NodeCollapsed);
Point parentLocation = sender.Location;
child.Location = new Point(
parentLocation.X + Math.Cos(startAngle + angleBetweenChildren * (double)i) * legDistance,
parentLocation.Y + Math.Sin(startAngle + angleBetweenChildren * (double)i) * legDistance);
foreach (DiagramNode childsChild in child.DiagramChildren)
{
childsChild.Visibility = Visibility.Collapsed;
}
}
}
BaseCanvas.InvalidateArrange();
BaseCanvas.UpdateLayout();
BaseCanvas.InvalidateVisual();
}
The above process also relies on another process, which is the process which works out the leg distances (the length of the line to draw from one node to its child) between nodes.
This is as shown below:
private static double CalculateLegDistance(DiagramNode sender, double angleBetweenChildren)
{
double legDistance = 1.0;
double childToChildMinDistance = 1.0;
foreach (DiagramNode child in sender.DiagramChildren)
{
legDistance = Math.Max(legDistance,
sender.BoundingCircle + child.BoundingCircle);
foreach (DiagramNode otherChild in sender.DiagramChildren)
{
if (otherChild != child)
{
childToChildMinDistance =
Math.Max(childToChildMinDistance,
child.BoundingCircle + otherChild.BoundingCircle);
}
}
}
legDistance = Math.Max(
legDistance,
(childToChildMinDistance / 2.0) / Math.Sin(angleBetweenChildren / 2.0));
return legDistance;
}
This is a specialized Canvas control that simply draws the lines
between all the DiagramNodes, currently shown within the DiagramViewer.
This is done by overriding the OnRender() method of the Canvas
control. This is shown below:
protected override void OnRender(System.Windows.Media.DrawingContext dc)
{
base.OnRender(dc);
foreach (UIElement uiElement in Children)
{
if (uiElement is DiagramNode)
{
DiagramNode node = (DiagramNode)uiElement;
if (node.Visibility == Visibility.Visible)
{
if (node.DiagramParent != null &&
node.DiagramParent.Visibility == Visibility.Visible)
{
dc.DrawLine(new Pen(Brushes.Black, 2.0),
node.Location, node.DiagramParent.Location);
}
}
}
}
}
This is a pretty standard WPF UserControl that represents a single DiagramNode
within the DiagramViewer. Its pretty standard stuff really a few
buttons for the expanded/collapsed and selected states. Lets see the XAML for
it shall we.
<UserControl x:Class="SpiderTreeControl.Diagram."
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:diagram="clr-namespace:SpiderTreeControl.Diagram"
Height="80" Width="90"
Background="Transparent"
BorderBrush="Transparent">
<UserControl.CommandBindings>
<CommandBinding Command="{x:Static diagram:DiagramNode.expandCommand}"
CanExecute="ExpandCommand_CanExecute"
Executed="ExpandCommand_Executed"/>
<CommandBinding Command="{x:Static diagram:DiagramNode.collapseCommand}"
CanExecute="CollapseCommand_CanExecute"
Executed="CollapseCommand_Executed"/>
</UserControl.CommandBindings>
<UserControl.Resources>
<ControlTemplate x:Key="expandCollapseButton" TargetType="{x:Type Button}">
<Grid Width="20" Height="20" Background="Transparent">
<Ellipse Width="20" Height="20" Fill="DarkGray"/>
<Ellipse Width="16" Height="16" Fill="WhiteSmoke"/>
<Label x:Name="lbl" Content="{TemplateBinding Content}"
HorizontalAlignment="Center" VerticalAlignment="Center"
Background="Transparent"
FontFamily="Arial Black" FontSize="10"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="lbl" Property="Foreground" Value="DarkGray"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BitmapEffect">
<Setter.Value>
<DropShadowBitmapEffect />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</UserControl.Resources>
<Canvas Background="Transparent" Width="90" Height="80" >
<Label x:Name="NodeName" Content="Name" FontFamily="Arial Black"
FontSize="14" Canvas.ZIndex="1"/>
<Button x:Name="btnNavigate"
Template="{StaticResource simpleImageButtonTemplate}"
Click="btnNavigate_Click" Width="60" Height="60"
Canvas.Left="20" Canvas.Top="20"
Canvas.ZIndex="0"/>
<Button x:Name="ExpandButton" Content="+"
Canvas.Top="30" Canvas.Left="0"
Template="{StaticResource expandCollapseButton}"
Command="{x:Static diagram:DiagramNode.expandCommand}" />
<Button x:Name="CollapseButton" Content="-"
Canvas.Top="55" Canvas.Left="0"
Template="{StaticResource expandCollapseButton}"
Command="{x:Static diagram:DiagramNode.collapseCommand}" />
</Canvas>
</UserControl>
Each DiagramNode looks like the following:
There is only 1 known issue, but this is actually the case with pretty much
every diagramming solution I have seen within WPF, including the FamilyShow
exemplar by Vertigo, and lots of others which I had to evaluate in my last job.
Basically in order to dynamically position diagram nodes, you have to use a
container panel that supports X/Y positioning, which means using a Canvas.
Which is fine, but this means you must must ensure that the Canvas is big enough to accomodate the largest layout positions that you algorithm demands. Not a huge problem, but it is one that you need to be aware of.
To this end you will find that within the embedded DiagramViewer
within the DragViewer control within the demo application, that
the DiagramViewer has a fixed size of 2000 by 2000, which is declared
as follows:
<UserControl x:Class="SpiderTreeControl.Diagram.DragViewer"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:diagram="clr-namespace:SpiderTreeControl.Diagram;assembly="
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="auto" Width="auto">
<diagram:FrictionScrollViewer x:Name="sv" Style="{StaticResource ScrollViewerStyle}">
<diagram:DiagramViewer x:Name="diagramViewer" Margin="0" Width="2000" Height="2000"/>
</diagram:FrictionScrollViewer>
</UserControl>
Other than this single issue, which as I say you will probably see in practically all diagrmming components for WPF, there are no known issues.
, as its forming the bases for my new app.
