Is it possible to add a DiagramNode to Surface without setting Bounds?

I want to let the content of my custom DiagramNode auto resize itself, so I don't know what the size is at adding time. Is this possible?

Hello,

We do provide one experimental way that this can be done. First, add the following code to an element within your custom node style that is expected to affect the size of the node.

ms:DiagramNodeElement.RaisesBoundsChangeRequested="True"

Next, in code behind, attach an event handler to the DiagramNodeElement.BoundsChangeRequestedEvent like this (where ds is a DiagramSurface instance)

ds.AddHandler(DiagramNodeElement.BoundsChangeRequestedEvent, new EventHandler<BoundsChangeRequestedEventArgs>(OnBoundsChangeRequested));

Then your handler can look something like this:

private void OnBoundsChangeRequested(object sender, BoundsChangeRequestedEventArgs e)
{
  IDiagramNode node = e.DiagramNodeElement.Node;
  node.Bounds = new Rect(node.Bounds.X, node.Bounds.Y, e.Width + 100, e.Height + 20);
}

This takes the size of the UI element that changed size and applies it back to the model. The simple logic above is dependant on the template - seen in the way it adds 100 to the width and 20 to the height.

If you make the root element of your node a panel that sizes to children (such as a StackPanel) then put a single element inside that to hold all the other elements (such as a grid), then you could put the attached property on the Grid which will cause an event to be raised any time any of the internal elements changes size. Then in the handler, you can just use the Width and Height values of the event args as they are. Note that StackPanel only sizes to children in a single orientation. Looking at the image in your other post, you'd want the orientation to be horizontal. If you need the size to be affected in both dimensions, you'd need to use a different root panel that sizes to children in both dimensions.

Here's an example of the ui structure described above:

<StackPanel Orientation="Horizontal">
  <Grid ms:DiagramNodeElement.RaisesBoundsChangeRequested="True">
  </Grid>
</StackPanel>

And here's what the event handler could look like:

private void OnBoundsChangeRequested(object sender, BoundsChangeRequestedEventArgs e)
{
  IDiagramNode node = e.DiagramNodeElement.Node;
  node.Bounds = new Rect(node.Bounds.X, node.Bounds.Y, e.Width, e.Height);
}

Let me know if you have any questions about this.

-Jason Fauchelle

Hi Jason,

Thank you for the code example, it works :)

But I now have a problem with Surface.ApplyLayoutAlgorithm(new TreeLayoutAlgorithm());

I usually call that after I have added all the nodes + connections to the surface, however it seems the layout algorithm is executed before the new bounds are applied, so this causes the layout to not use the new bounds :(

Is there a way to delay the layout algorithm till all the bounds have been adjusted ?

Cheers John

Hi John,

Great to hear my code example worked for you.

The easiest way to delay the algorithm could be to run the algorithm through a dispatcher with a priority that will run after render operations. For example:

Dispatcher.BeginInvoke(new Action(() => Surface.ApplyLayoutAlgorithm(new TreeLayoutAlgorithm())), DispatcherPriority.Loaded);

The downside to this is you'll most likely see the diagram before the algorithm is applied for a split second just before it gets laid out. This is somewhat unavoidable, but could be covered up with a loading spinner or the like until the layout algorithm has been applied.

Hope that helps. Let me know if you have further questions about this.

-Jason Fauchelle