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.


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/ 

 

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.

 

1.gif
 


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.

 

 

2.gif

 

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.

 

3.gif
 


Figure 3 - Selection

 

Direct Selection

 

3.5.gif
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.

 

4.gif
 


Figure 4 - Direct Selection

 

Pan
5.gif

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
6.gif

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

 

7.gif
 

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.

 

8.gif
 


Figure 5 - Camera Orbit

 

Eyedropper

 

 

9.gifTo 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

 

10.gif
 

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

 

11.gif
 

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.

 

12.gif
 


Figure 6 - Brush Transform

 

Pen/Pencil 

 

13.1.gif13.gif

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.

 

 

14.gif
 


Figure 7 - Pen and Pencil

 

Rectangle/Ellipse/Line

 

15.gif
 

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.

 

16.gif
 


Figure 8 - Rectangle/Ellipse/Line

 

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

 

17.gif
 


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

 

18.gif
 

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

 

Canvas Panel

 

19.gif
 

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

 

20.gif
 

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

 

Wrap Panel

 

21.gif
 

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

 

22.gif
 

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

 

Border

 

23.gif
 

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

 

24.gif
 

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

 

25.gif
 

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

 


 26.gif

 


27.gif

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.

 

  28.gif
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.

 

29.gif
 

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.

 

30.gif
 

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.

 

31.gif
 

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.

 

32.gif
    

 

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

 

33.gif
 


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

 

Asset Library

 

34.gif
 


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.