Re positioning (centering) parent Node in Tree.

I've been struggling for a few days now with resetting my diagrams back to the state it was after it first loaded. All I want to do it position the top node in my Tree Layout to be centered on the X axis, and be about 50 pixels down from the top of my window. SizeToFit is not what I'm looking for as far as I can tell. I want to reset the zoom level and move this top node back to it's original position when the user clicks a "Re center diagram" button. When they scroll and zoom their diagrams so this top node is completely off the screen, I need an easy way for users to find their way back to the top node.

Attached is a screenshot with the parent node highlighted in red that I am referring to. I have read every post containing Viewport, Translate, DiagramBounds, but I'm just lost at how all of these different coordinate systems relate to the actual screen size of my monitors. Which brings up another scenario... dual monitors. The coordinate system is even more confusing when dealing with dual monitors, which happens in about 98% of my cases.

Hi Chris,

To reset the zoom, the easiest thing to do is set the Zoom property of the DiagramSurface to 1. This will set the width and height of the viewport for you based on the aspect ratio in a way that 1 logical unit in the diagram model equates to 1 pixel.

To position the viewport in a way the centers a particular node horizontally, and 50 pixels from the top, try this:

Rect viewport = ds.GetViewport();
viewport.X = node.Bounds.X - (ds.ActualWidth / 2.0) + (node.Bounds.Width / 2.0);
viewport.Y = node.Bounds.Y - 50;
ds.SetViewport(viewport);

Where node is the IDiagramNode that you want centered, and ds is the DiagramSurface.

Try this out and let me know if you have any questions.

-Jason Fauchelle

Thanks Jason, this now works for 95% of the time. When it does not work, is when my diagram is small enough to not be wider than the screen, thus not forcing the scrollbars to show up.

For these smaller diagrams, the diagram is just left aligned on the window and your centering code has no affect. I've attached two screenshots. One shows that when I make my window smaller and the scrollbars show up, your centering code works, and moves the diagram correctly.

When I stretch my window wider (on larger monitors) the diagram does not move at all, and stay left and top aligned in the top left corner. Your code has no affect on it.

Any ideas?

Hi Chris,

Thanks for pointing this out. This is because the SetViewport method is constrained by the current extent (scrollbar reach) of the DiagramSurface. (Keep in mind that the viewport management is one of the least polished parts of the product and could do with some improvement).

Fortunately, we do have one way that allows you to set the viewport to anything, and will add "extra-space" to the scroll bars. This only requires a simple change to my previous code example which now becomes this:

Rect viewport = ds.GetViewport();
viewport.X = node.Bounds.X - (ds.ActualWidth / 2.0) + (node.Bounds.Width / 2.0);
viewport.Y = node.Bounds.Y - 50;
Rect original = ds.GetViewport();
ds.ScrollViewer.TranslateViewport(viewport.X - original.X, viewport.Y - original.Y);

I also recommend a null check on ds.ScrollViewer as this will be null if you try running this code when the control isn't loaded yet.

Hope that resolves it. Let me know if you have any questions.

Regards -Jason Fauchelle

Works Great! Thank you

Note to anyone that stumbles across this... DiagramSurface.AllowInfiniteScrolling must be set to true for the TranslateViewport to work. I just toggle it on, Translate, then toggle it off.