Keyboard shortcuts for navigation on the DSL design surface

  • Article

I was just dealing with an issue raised on our MSDN Product Feedback center and I realized it might have broader appeal.

 

Keyboard navigation in either the DSL Tools or the Visual Studio 2005 Class Designer and Distributed Systems Designers has a few wrinkles that aren't at all obvious until you go and look at the docs - not a task most of us are keen to do at the best of times.

 

The context for this was to document how to manipulate connectors on the diagram using the keyboard to produce the kind of manual layout of lines that you can do relatively easily with the mouse.

 

You couldn't accuse us of making this discoverable, but here's how to make it work:

 

1) Hit TAB repeatedly until you get to the connector you want to amend.

2) (Here's the science part) Hit ">" to drill into the sub-elements of the connector - yeah right, like I'm guessing that (sorry, Rory moment there).

3) Hit TAB repeatedly until you get to the endpoint or line segment you want to move.

4) Use cursor keys to move endpoint or line segment - phew!

 

That's the theory at least. While checking this out, I noticed that in the current builds of the DSL Tools we only allow the endpoints of lines to be moved like this, not the line segments. I've raised the bug. It works fine in the Class Designer.

 

Here's the basic list of shortcuts for the design surface - some designers may choose to do slightly different things by overriding these, but you get the general flavour.

Toggle Selection Space/Enter Toggles selection on a shape which has focus.
Cancel Selection Esc Cancels the current selection.
Select All Ctrl + A Selects all the shapes on the design surface.
Move up Up arrow Moves shape up one grid increment. If in a list, moves to the previous sibling subfield.
Move down Down arrow Moves shape down one grid increment. If in a list, moves to the next sibling subfield.
Move left Left arrow Moves shape left one grid increment. If in a list, moves to the previous sibling subfield.
Move right Right arrow Moves shape right one grid increment. If in a list, moves to the next sibling subfield.
Size shape up Shift + up arrow Increases the height of the shape by one grid increment.
Size shape down Shift + down arrow Reduces the height of the shape by one grid increment.
Size shape left Shift + left arrow Reduces the width of the shape by one grid increment.
Size shape right Shift + right arrow Increases the width of the shape by one grid increment.
First Peer Home Moves focus and selection to the first shape on the design surface at the same peer level.
Last Peer End Moves focus and selection to the last shape on the design surface at the same peer level.
First Peer (focus) Ctrl + Home Same as first peer, but moves focus instead of moving focus and selection.
Last Peer (focus) Ctrl + End Same as last peer, but moves focus instead of moving focus and selection.
Next Peer Tab Moves focus and selection to the next shape on the design surface at the same peer level.
Previous Peer Shift+Tab Moves focus and selection to the previous shape on the design surface at the same peer level.
Next Peer (focus) Alt+Ctrl+Tab Same as next peer, but moves focus instead of moving focus and selection.
Previous Peer (focus) Alt+Ctrl+Shift+Tab Same as previous peer, but moves focus instead of moving focus and selection.
Ascend < Moves to the next shape on the design surface one level higher in the hierarchy. If there are no shapes above this shape in the hierarchy (i.e. the shape is placed directly on the design surface), the diagram is selected.
Descend > Moves to the next contained shape on the design surface one level below this one in the hierarchy. If there are no contained shapes, this is a no-op.
Ascend (focus) Ctrl + < Same as ascend command, but moves focus without selection.
Descend (focus) Ctrl + > Same as descend command, but moves focus without selection.
Follow to connected Shift + End From a shape, moves to a shape which this shape is connected to.
Delete Del Delete a shape or connector from the diagram.
Scroll diagram up Pg Up Scrolls the design surface up, in increments equal to 75% of the height of the currently visible design surface.
Scroll diagram down Pg Down Scrolls the design surface down.
Scroll diagram right Shift + Pg Down Scrolls the design surface to the right.
Scroll diagram left Shift + Pg Up Scrolls the design surface to the left.
Enter edit mode F2 Standard keyboard shortcut for entering edit mode for a text control.
Display shortcut menu Shift + F10 Standard keyboard shortcut for displaying a selected item’s shortcut menu.
Zoom In Control + Shift + '+' Control + MouseWheel forward Zooms in on the center of the Diagram View.
Zoom Out Control + Shift + '-' Control + MouseWheel backward Zooms out from the center of the Diagram View. It re-centers the diagram when you zoom out too far for the current diagram center.
Zoom Area Control + Shift + Draw a rectangle with the left mouse button down Zooms in centered on the area that you've selected. When you hold down the Control + Shift keys, you'll see that the cursor changes to a magnifying glass, which allows you to define the area to zoom into.

Edited: Updated to include the three extra shortcuts that Pedro posted.