Over a million developers have joined DZone.

Understand Blend Layout and get more efficient using Keyboard shortcuts

DZone 's Guide to

Understand Blend Layout and get more efficient using Keyboard shortcuts

· Mobile Zone ·
Free Resource

As mentioned in my earlier post, I would be covering my experience of working in Expression Blend. In this article we start from the basic layout of Blend and how you can use it more efficiently by using Keyboard Shortcuts.

Microsoft Expression Blend is the tool used to design WPF, Silverlight(SL) & Windows Phone 7 Applications. It is a designing application focused on providing designers the flexibility to create the better User Experience which was not possible prior to WPF. The latest version of Blend is 4.0.

.NET version

When you start Expression Blend 4 and create a new WPF project, you get an option to create .NET 3.5 or .NET 4.0 application. You can select the framework version based on the project you have been working.

Programming Language Selection

Just like .NET version you get to select the programming language in which you want to design your application. You can select from Visual C# and Visual Basic.

Below is the default layout of the application once the new project is created. Earlier version of Blend did not have dockable panels, but since Blend 3 you can adjust the workspace to suit your need by moving the panels around to your liking.

Blend Layout

The artboard is the area where you visually design your document. Using the Tools panel you can place controls on the artboard based on your requirement. Extensible Application Markup Language (XAML) code specifies the user interface of the WPF/SL application. In my next article I will cover XAML in-depth.

Following are the panels you will require most while working in Blend:

  • Projects
  • Objects and Timeline
  • Resources
  • Properties
  • Assets
  • Triggers

Just like Visual Studio you can click and drag the header of the panel to move them around and dock them as you like. In case you want to revert back to the default workspace you can do so by using keyboard shortcut “Ctrl+Shift+R”.

The active document has three views: Design, Split and XAML. You can use keyboard shortcut F11 to switch between these three views.

Design view shows you the artboard,

Split view lets you view artboard as well as the XAML code window simultaneously and

in XAML view you see only the XAML code for that particular window.

Split View OrientationIn split view you can choose how the artboard and XAML view align. By default the views are aligned vertically. From the view menu you can select the option to arrange panes Horizontally.

Following are some of the important keyboard shortcuts, which I use while working in Blend and I am sure you will find them useful too.

Task Keyboard Shortcut
Add a reference to a DLL (WPF) Ctrl + I
Build the Project Ctrl + Shift + B
Run the Project F5
Create a Design-Time annotation Ctrl + Shift + T
Duplicate an object Hold down ALT and drag the object
Make the selected objects the same width Ctrl + Shift + 1
Make the selected objects the same height Ctrl + Shift + 2
Make the selected objects the same size Ctrl + Shift + 9
Flip the selected object horizontally Ctrl + Shift + 3
Flip the selected object vertically Ctrl + Shift + 4
Fit the selection to the screen size Ctrl + 9
Zoom the screen to 100% Ctrl + 1
Hide Selection Ctrl + 3
Show Selection Ctrl + T
Show/Hide object handles F9
Show/Hide Assets Panel Ctrl + Period(.)
Show/Hide all Panels Tab, F4

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}