Using Tools and Windows in Expression Blend 2.0

This article is a basic introduction of Expression Blend 2 and how to use various tools in Expression Blend. I am using Expression Blend version 2.0.

What is Expression Blend?

Microsoft Expression Blend 2 is a design tool developed by Microsoft to create compelling user experiences and applications for Windows using .NET Framework 3.0 and 3.5, which includes XAML, Windows Presentation Foundation (WPF), and Silverlight.

Unlike other tools such as Photoshop, Expression Blend creates user interfaces in the front end while writes the XAML code for front end in the back end. The good part for programmers and designers is that, they can use this XAML in their WPF and Silverlight applications by simply copying the code and XAML. Expression Blend also supports direct integration with Visual Studio to edit and write code behind.

Getting Started

To get started, download the latest version of Expression Blend here: http://www.microsoft.com/expression/

Getting Started

To get started, download the latest version of Expression Blend here: http://www.microsoft.com/expression/

Read this article for more details: Getting Started with Microsoft Expression

Expression Blend Tools and Windows

Now let's look at the tools and windows available in Expression Blend 2.

Artboard

Artboard is the first windows you see when you create a new Project in Expression Blend. This is the container where you place all drawings and objects. Once your project is created, you will see something like Figure 1. In Figure 1, the white area titled Window1 is the Artboard.

Figure 1 - Artboard

Toolbox

The Toolbox in Blend sits in the left side of the application and looks like Figure 2. The Toolbox contains all the objects and shapes available you to use. To add drawing objects to the Artboard, you simply select an object, for example, a rectangle, and drop that on the Artboard to add that object to your Artboard. You can also change the objects on the Artboard by using handles, or you can modify their properties in the Properties panel.

Figure 2 - Toolbox

The default Toolbox has following objects.

Selection
Direct Selection
Pan
Zoom
Camera Orbit
Eye Dropper
Paint Bucket
Brush Transform
Pen/Pencil
Rectangle/Ellipse/Line
Grid/Canvas/StackPanel/WrapPanel/DockPanel/ScrollViewer/Border/UniformGrid/ViewBox
TextBox/RichTextBox/TextBlock/PasswordBox/Label/FlowDocumentScrollViewer
Button/CheckBox/ComboBox/ListBox/RadioButton/ScrollBar/Slider/Tabcontrol/GridSplitter
Asset Library

Selection

To select an object on the artboard, first click on the selection tool on the toolbar and click on the object. Selected object will be highlighted as shown in the figure 3 below.

Selection tool is used to select, move, resize, rotate, and skew object and paths.

Figure 3 - Selection

Direct Selection

Direct Selection is used to edit nodes of curves, line, pen and pencil. Holding Alt key add more versatitly to the shapes editing. See in the figure below.

Figure 4 - Direct Selection

Pan

Pan tool is used to scroll on the artboard. You can use this tool instead of vertical and horizontal scroll bar to view your design in the artboard.

Zoom

Zoom tool is used to magnify the objects, images, text in the artbord. You can zoom upto 6400 percent. Alt key is used to zoom out the image while holding the zoom.

Camera Orbit

Camera Orbit is used to move the camera applied on the 3D object. You can change the behavior of the Camera Orbit tool in the following ways:

Hold the ALT key when dragging to move the camera closer to the look-at point (ALT + move mouse up) or further away from the look-at point (ALT + move mouse down). CTRL also constrains the movement of the camera to the X and Y plane.

Hold the SHIFT key when dragging to snap the movement every 15 degrees in each of the three directions (X, Y, and Z).

Advance camera options can be used with the Camera Properties.

To change a 2D image into 3D, you must first add the image as an item to the project folder.

Under Files in the Project panel, right-click the names of the image files, and then click Insert. The image file is added as an Image object that you can resize and modify on the artboard.

In the Toolbox, click Selection, and then select the image that you just inserted.

On the Tools menu, click Make Image 3D.The Image object is converted to a Viewport3D object. Within the Viewport3D object are containers for the cameras and lights. A perspective camera, an ambient light, and a directional light are created by default.

Figure 5 - Camera Orbit

Eyedropper

To copy attributes from a selected object and apply those attributes to another object select the object or objects to which you want to apply attributes. On the Toolbox, click the Eyedropper tool.

Click the object from which you want to copy attributes. The attributes will automatically be applied to the object or objects that you selected.

Paint Bucket

Select the object or objects to which you want to apply attributes. On the Toolbox, click the Paint Bucket tool. Notice that the cursor changes to a paint bucket.

Click an object from which you want to copy attributes, and then click any number of additional objects to apply the attributes. Notice that the attributes stay saved in the Paint Bucket tool until you set different properties in the Properties panel.

Brush Transform

Transform tool to modify the brush.

To transform the fill, stroke, opacity mask, or other brush that is applied to an object, select the brush property in the Properties panel, and then select the Brush Transform tool on the Toolbox.

A brush transform arrow appears on the artboard that you can modify with your mouse pointer. If you are using a gradient brush, the endpoints of the transform arrow correspond to the gradient stops at either end of the color bar.

The Shift key can be used to change the behavior of the transform. See the figure 6 below to see the transform effect after using gradient.

Figure 6 - Brush Transform

Pen/Pencil

Pen / Pencil tools are used to draw paths and curves. Paths flexible vector objects. Paths are a series of connected lines and curves. After drawing paths onto the artboard, you can reshape, combine, and otherwise modify them to create any vector shape. You can draw polygons, which are closed shapes made up of straight, connected lines, as well as polylines, which are unclosed paths made up of straight, connected lines. See the example in the figure 7 below.

Figure 7 - Pen and Pencil

Rectangle/Ellipse/Line

In the Toolbox, click Rectangle, Ellipse, or Line to draw.

On the artboard, draw the rectangle, ellipse, or line by dragging from any point on the artboard to define the width and height of the rectangle or ellipse or the start and end points of the line. Notice that as you draw the shape, the width and height dimensions appear.

Shift key can be used for more precision while drawing objects. See the example in the figure below.

Figure 8 - Rectangle/Ellipse/Line

Grid/Canvas/StackPanel/WrapPanel/DockPanel/ScrollViewer/Border/UniformGrid/ViewBox

Expression Blend has five primary layout panels, each one designed to manage a different type of layout. The following table describes these layout panels.

Grid Panel

Arranges child elements in a very flexible layout of rows and columns that form a grid.

Canvas Panel

A canvas panel is the simplest layout panel in blend. It supports absolute positioning and does not apply any layout policy to its child elementsâ€”it is literally a blank canvas. Use a canvas panel when fixed positioning is paramount. Elements that you place in a canvas panel will not automatically resize when you resize your application as they can with a grid panel.

Add a canvas panel to a document by using the Asset Library or the layout container button on the Toolbox.

Stack Panel

Arranges child elements into a single line that can be oriented, or stacked, horizontally or vertically.

Wrap Panel

Arranges child elements in sequential position from left to right, and then, when it runs out of room at the far-right edge of the panel, wraps the content to the next line, and so on from left-to-right, top-to-bottom. A wrap panel's orientation can also be vertical so that the child elements flow from top-to-bottom, left-to-right.

Dock Panel

Arranges child elements so that they stay, or dock, to one edge of the panel.

Border

A simple element that draws a border, background, or both around an element. Border takes only one child element. You likely will want to position a grid or canvas panel within the border so that you can work with multiple child elements.

UniformGrid

Arranges child elements within equal, or uniform, grid regions. UniformGrid is not a variation of the grid panel; it can be more accurately described as a tiling layout element, because it creates equal spacing between each element that it contains, based on the number of rows and columns you specify. As you add child elements to a UniformGrid, each element is positioned in a region starting from top-left to bottom-right until the grid is filled. This is useful for a control such as an image list.

Viewbox

Scales all its child elements much like a zoom control. Because a view box accepts only a single child element, you will typically position a canvas panel or grid panel in it so that you can take advantage of the zoom effect on more than one child element.

Layout Panels and Other Layout Containers will be discussed in my next article in detail.

TextBox/RichTextBox/TextBlock/PasswordBox/Label/FlowDocumentScrollViewer

TextBox provides an editable region that accepts text input. Use this control when you want users to be able to enter new text or edit existing text in your application. You can specify the font of the text at design time.

TextBox doesn't supports rich text, shapes, and images. It is editable at runtime.

RichTextBox provides the same functionality as a TextBox object, but supports more text formatting properties and can contain any other type of object, such as an image or shape. Use this control when you want users to be able to enter rich text in multiple fonts with images and other objects.

RichTextBox supports rich text, shapes, and images. It is editable at runtime.

TextBlock provides a block of static text that the users of your application cannot edit. A TextBlock can contain any other type of object, such as an image or shape. Use this control when you must give instructions to your users, or to communicate information that doesn't require editing. Note that although text in this type of control cannot be edited by users of your application, you can change the text through the code-behind file.

TextBox supports rich text, shapes, and images. It is not editable at runtime.

PasswordBox provides basic password functionality. Use this control to promote privacy in your application, so that the text that a user enters in the text control will be masked by using bullet point characters () or another character that you specify in the PasswordChar property, instead of as the characters that the user types.

PasswordBox doesn't supports rich text, shapes, and images. It is editable at runtime.

Label provides a block of static content that you can use for basic labeling of other controls or user interface elements. A Label can contain text or content (such as an image or shape) but not both text and content at the same time. Additionally, this control provides mnemonic support, which offers functionality for keyboard accessibility and navigation through labeled controls that the user can access by pressing the ALT key in Windows-based applications.

Label doesn't supports rich text, shapes, and images. It is not editable at runtime.

FlowDocumentScrollViewer provides a block of static text with a scrollbar that the user can use to navigate through the text, and can contain any other type of object, such as an image or shape. You can set properties for this control under Miscellaneous in the Properties panel to hide or show the vertical and horizontal scrollbars.

FlowDocumentScrollViewer supports rich text, shapes, and images. It is not editable at runtime.

Button/CheckBox/ComboBox/ListBox/RadioButton/ScrollBar/Slider/Tabcontrol/GridSplitter

Common controls like Button, CheckBox, ComboBox, ListBox, RadioButton, ScrollBar, Slider, TabControl, GridSplitter will be discussed in my next article in detail.

Asset Library

Used to access the Asset Library and to show the most recently used asset from the library.

Asset Library will be discussed in my next article in detail.