silverlight 2 - expression blend - workspace

This section includes topics that describe how to customize and use the various areas and features of the Microsoft Expression Blend workspace.

In This Section

Conceptual Workspace layout

Toolbox

Asset Library

Interaction panel

Project panel

Properties panel

Resources panel

Results panel

How to Add or remove a panel

Dock or float a panel

Resize a panel

Show or hide all panels

Configure panel position for animation or design

Zoom the workspace in or out

Reset the workspace to the default view

Change the theme of your workspace

Turn on or off snapping and the snap grid

Zoom the artboard in or out

Pan the artboard

Change the background color of the artboard

Change artboard authoring views

Workspace

of 51Workspace

6/16/2009file://C:\Windows\Temp\~hh9B65.htm

Reference Toolbox shortcuts

Menu shortcuts Menu access keys Dialog box access keys

Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved.

The topics in this section describe the areas of the Microsoft Expression Blend 2 workspace.

In This Section Workspace layout

Toolbox

Asset Library

Interaction panel

Project panel

Properties panel

Resources panel

Results panel

See also Concepts

Adjusting your workspace


The workspace in Microsoft Expression Blend 2 consists of all the visual interface elements. These include the artboard, panels, Toolbox, workspace configurations, authoring views, and menus.

Areas of the workspace

Workspace layout

of 51Workspace


The Expression Blend 2 workspace is customizable and uniquely scalable. You can change panel orientation, dock or float panels, resize the panels by dragging the edges, zoom the artboard, and toggle the snapping of objects on the artboard. Additionally, you can change the workspace color scheme by using the Theme property in the Options dialog box (available through the Tools menu).

Unique to Expression Blend is the ability to zoom in or out of the whole workspace. You can scale the workspace to a desired size without losing any quality in the visual interface. For example, you can zoom out to fit more information on your screen, or zoom in for better readability. Use the Workspace zoom option in the Options dialog box (available through the Tools menu) to adjust your workspace from 50 percent to 150 percent.

Workspaces Expression Blend has two workspaces: the Design workspace and the Animation workspace. You can switch between them by pressing F6. The design workspace lets you focus on general authoring. The Animation workspace

Document windows This area shows all the XAML documents that are currently open, including windows, pages, resource dictionaries, and user controls.

Views Expression Blend 2 has three real-time authoring environments: Design view, XAML view, and Split view. You can use the design view to author documents, so that you have a visual representation on the artboard, or you can use the markup view to author in the Extensible Application Markup Language (XAML) itself. Split view displays both, and you can change the orientation of the windows using the Split View Orientation item on the View menu.

of 51Workspace


moves the Interaction panel under the artboard so that the timeline has more room to be displayed.

The Design workspace (left) and the Animation workspace (right)


The Toolbox in Microsoft Expression Blend enables you to create and modify objects in your application. You create the objects by selecting the tool and drawing on the artboard with your mouse. You can also change the objects on the artboard by using handles, or you can modify their properties in the Properties panel.

These tools are available in the Toolbox when you work on a WPF application

Note:The workspace looks slightly different depending on whether you are working on a Windows Presentation Foundation project or a Microsoft Silverlight 1.0 project.

Menus Artboard

Toolbox

Note:Some tools are not available when you work on a Silverlight 1.0 project.

Project panel, Properties panel, and Resources panel

Note:The Resources panel is not available when you work on a Silverlight 1.0 project.

Interaction panel

Results panel (layered under the Interaction panel when in the Animation workspace)

Toolbox

Note:The Toolbox looks slightly different depending on whether you are working on a Windows Presentation Foundation (WPF), Microsoft Silverlight 1.0, or Silverlight 2 project.

of 51Workspace


Selection tools Used for selection and direct selection (nested objects and path segments) of objects and paths.

Path tools Pen, Pencil.

View tools Used to adjust the view of the artboard, such as for panning, zooming, and camera orbiting for 3D.

Shape tools Rectangle, Ellipse, Line.

of 51Workspace


Note:The Camera Orbit tool is not available when you work on a Silverlight 1.0 or Silverlight 2 project.

Brush tools Used to work with the visual attributes of an object, such as transforming a brush, painting an object, or selecting the attributes of one object to apply them to another object.

Layout panels Grid, Canvas, StackPanel, WrapPanel, DockPanel, ScrollViewer, Border, UniformGrid, Viewbox.

Note:Only the Canvas panel is available when you work on a Silverlight 1.0 project. Additionally, only the Grid, Canvas, StackPanel, ScrollViewer, and Border panels are available in a Silverlight 2 project.

Object tools Used to draw the most common objects on the artboard, such as paths, shapes, layout panels, text, and controls.

Note:Some objects are not available when you work on a Silverlight 1.0 or Silverlight 2 project.

Text controls TextBox, RichTextBox, TextBlock, PasswordBox, Label, FlowDocumentScrollViewer.

Note:Only the TextBlock control is available when you work on a Silverlight 1.0 project. Additionally, only the TextBox, TextBlock, and PasswordBox are available in a Silverlight 2 project.

Asset tools Used

Common controls Button, CheckBox, ComboBox, ListBox, RadioButton,

of 51Workspace


See also Concepts

Layout Controls Working with objects and properties Drawing shapes and paths Text and typography


The Asset Library lists all the controls that you can draw on the artboard. The most commonly used controls appear in the Toolbox, but the Asset Library lists all controls that are supported in your Microsoft Expression Blend 2 project.

When working on a Windows Presentation Foundation-based application, the Asset Library lists all available WPF controls, control styles that are contained in any resource dictionaries, local styles, custom controls, and media files that you have added to your project.

When working on a Microsoft Silverlight 1.0-based application, the Asset Library lists all available system controls, and any media files that you have added to your project.

You can open the Asset Library by clicking the Asset Library button at the bottom of the Toolbox.

The Asset Library while working on a WPF-based application, with the Controls tab selected

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

Note:Some assets are not available when you work on a Silverlight 1.0 or Silverlight 2 project.

ScrollBar, Slider, TabControl, GridSplitter.

Note:These controls are not available when you work on a Silverlight 1.0 project. For information about creating a button, see Create a button that controls a storyboard in a Silverlight application. Additionally, the TabControl and GridSplitter are not available in a Silverlight 2 project unless you add a reference to the System.Windows.Controls.dll assembly. For more information, see Import a custom control by adding a reference.

Asset Library

of 51Workspace


Search to filter the list of assets

Select to show all available assets

Switch between the Gallery view and the Details view of assets

Toggle between system controls (WPF) and the control styles that are listed in any existing resource dictionaries (such as the Simple Styles resource dictionary)

Tabbed categories for assets

Set the selected item (System Controls or Simple Styles) as the default asset provider for the Asset Library. For example, if you make Simple Styles the default asset provider, then, when you select Button from the Toolbox, you will draw a SimpleButton on the artboard.

Note:

When working on a Silverlight 1.0 project, only

of 51Workspace



The Interaction panel in Microsoft Expression Blend 2 helps you do the following tasks:

View the hierarchical structure of all objects on the artboard. For more information, see the Objects and properties overview.

Select objects so that you can modify them (move them around in the structure, modify them on the artboard, set their properties in the Properties panel, and so on). For more information, see Working with objects and properties, Layout, and Appearance.

Create and modify animation timelines. For more information, see Animation overview.

Create and modify templates for objects that are controls (Windows Presentation Foundation (WPF) and Silverlight 2 projects only). For more information, see Style and template overview.

Create and modify triggers for selected objects (WPF projects only). For more information, see Triggers overview. A similar feature named States is available in Silverlight 2 projects. For more information, see Modify the appearance of a system control in different states.

The Interaction panel as it appears when you view the Animation workspace (F6) of a WPF project in Expression Blend 2—a timeline named FlyIn is selected

the System Controls, Media, and Recent tabs are available. Custom JavaScript classes are added to your project programmatically.

Interaction panel

of 51Workspace


Triggers

Objects and Timeline

Note:The Triggers panel is not available in Microsoft Silverlight 1.0 or Silverlight 2projects. In Silverlight 1.0 projects, triggers are programmed using event handlers in code-behind files. For an example, see the Create a Silverlight 1.0 site that has interactivity quick start. In Silverlight 2 projects, a similar feature called States is available. For more information, see Modify the appearance of a system control in different states.

List of triggers pertaining to the selected scope of the application (in this case, the main document scope). The Window.Loaded trigger is selected to view the related actions below.

List of actions that are related to the selected trigger. The Window.Loaded trigger has only one action.

Values of the action for the selected trigger.

Objects view Shows the visual tree of a document. The hierarchical nature of the objects view lets you drill down to varying levels of detail.

of 51Workspace


Layers can be added to the objects view to further organize the objects on the artboard, allowing them to be locked and hidden as a group. The width of the objects view can be adjusted by dragging the splitter to the left of the lock column to the desired width.

Record mode indicator Indicates when you are recording property changes in a timeline.

Storyboard picker See a list of storyboards you have created.

Storyboard options When a storyboard is selected, you can use this pop-up menu to duplicate, reverse, delete, rename, or close the storyboard. You can also create a new storyboard.

Playback controls These controls let you control storyboard playback and navigate through the timeline. You can also drag the playhead to navigate through (or scrub) the timeline.

Scope up Scopes the objects view back to the previous root element or previous scope. Scoping up is applicable only to objects with parent elements, such as when you change the style or template of a control.

Note:Styles and templates are not available when you work with a Microsoft Silverlight 1.0 project.

Record a keyframe Records a snapshot of the properties of the selected object at the current point in time.

Show/hide, Lock/unlock Visibility and locking for the objects view.

Playhead position on the timeline Shows the current time in milliseconds (HH:mm:xxx). You can also enter a time value directly in this field to jump to a particular point in time. The precision depends on the snap resolution set in the Snapping Options.

Timeline snapping options When timeline snapping is enabled, the next and previous frame buttons respect the snap resolution set in the Snap Resolution dialog box. The snap resolution also determines where on the timeline a keyframe can be set.

Playhead Indicates what point in time the animation is at. You can drag the playhead across the timeline to preview animation. This technique is called scrubbing.

Keyframes set on timelines Keyframes have

of 51Workspace



The Project panel in Microsoft Expression Blend 2 helps you do the following tasks:

View all files associated with the currently open project.

Link to data sources (when you are working in a Windows Presentation Foundation (WPF) or Silverlight 2 project).

For information about how to work with the Project panel, see the topics under Managing your projects and files.

The Project panel in a WPF project The Project panel as it appears when you view a WPF project in Expression Blend 2

different levels. The keyframes set for the Angle element are simple keyframes, the keyframes set for the RenderTransform element are compound keyframes, and the keyframes set for the Details object are object-level keyframes. For more information about keyframes, see "Keyframes" under Animation overview.

Change order of objects Sets the display order of objects. Click this button to arrange elements in the structure view by Z order (front-to-back) or by markup order (the order in which they appear in XAML view).

Timeline zoom Sets the zoom resolution of the timeline. Zooming in lets you edit an animation with more detail, and zooming out shows more of an overview of what is happening over longer periods of time. If you zoom in but cannot set a keyframe at the position in time that you want, verify that the snap resolution is set high enough.

Timeline composition area Shows the timeline, and lets you move keyframes around by dragging them or using their context menus.

Project panel

of 51Workspace


Files

Data

Project references such as DLLs

Resource dictionaries

A linked-to item, meaning that the item does not exist in the project folder

Local item—in this case a 3D object

Code-behind file

Note:The Data panel is not available in Microsoft Silverlight 1.0 projects. Data sources are configured programmatically in code-behind files. For more information, see the Silverlight learning page.

Data source options

List of data sources

of 51Workspace


Back to top

The Project panel in a Silverlight 1 project

The Project panel as it appears when viewing the Silverlight 1-based project for the ButtonGallery sample in Expression Blend 2

Files

Back to top

Note:The Project panel shows different files depending on whether you open a WPF, Silverlight 1.0, or Silverlight 2 project that was created by Expression Blend 2, a site that was generated by Microsoft Expression Encoder 2 or modified by Microsoft Expression Web 2, or a site that was created by Microsoft Visual Studio 2008.

A JavaScript class file that can be instantiated in a code-behind file.

Folders to hold assets such as sound files or images created in Microsoft Expression Design 2.

A web page with an accompanying JavaScript code-behind file to instantiate a Silverlight object and call your startup XAML page.

A XAML page with an accompanying JavaScript code-behind file. You can visually design the XAML page in Expression Blend 2 in Design view.

The JavaScript file that must be included in every Silverlight 1.0 site that incorporates Silverlight 1.0 objects. We recommend that you do not modify this helper file.

An ASP.NET configuration file.

of 51Workspace



The Properties panel in Microsoft Expression Blend 2 is where you can view and modify the properties of an object that is selected on the artboard or under Objects and Timeline. If you modify an object directly on the artboard with your mouse using the object handles, the property changes will be reflected in the Properties panel. The reverse is also true—if you scaled an object by using the value editor under Transform in the Properties panel, you would see the object scale on the artboard.

You can view the Properties panel in either of the following two modes:

Full mode, which has expandable and collapsible categories

Mini mode, which has pop-up editors

You can toggle between the two modes by pressing TAB or F4 to hide or show all the panels on the workspace.

The Properties panel in full mode, undocked, in front of the Properties panel in mini mode

Properties panel

of 51Workspace


Full mode

Expandable and collapsible categories of properties

Name and type of the selected object

Alpha channel slider, to change the transparency of this particular brush property (not the whole object)

Toggle buttons for displaying either the Properties or Events view

Color chips Initial color, current color, last color

of 51Workspace


Search box for filtering the properties that are displayed by the text that is entered

Color eyedropper

Various visual properties (brushes) such as Fill brush, Stroke brush, Foreground brush

Convert this color to a color resource, which will make it selectable from the Color resources tab

Button for opening the Advanced property options pop-up menu, to reset the property to a default value, to apply resources, or to bind the property to data

The hex value of the color

Brush editors The selected property under Brushes can be set to No brush, Solid color brush, Gradient brush, Tile brush, or to a Brush resource

Gradient slider with gradient stops, which appears only if a gradient brush is selected

Color editor Available for solid color and gradient brushes

Gradient eyedropper

Color resources Local Resources and System Resources, which allow you to apply the exact same color to different properties

Gradient types: Linear Gradient, Radial Gradient

Color picker with color slider

Gradient options Pad, Reflect, Repeat, Absolute, Bounding Box

Color spaces The RGB (red, green, blue) color space is shown in this image, but you can change to one of the other three supported color spaces by clicking one of the underlined letters (for example, R in the RGB color space) to see a pop-up menu with the alternative color spaces listed

Convert the current brush to a brush resource, which will make it available from the Brush resources tab.

of 51Workspace


Mini mode

Value editors The Properties panel presents a number editor for entering values such as degrees, pixels, percentages, and so on. For example, the RGB color space text boxes in the preceding image are number editors. You can single-click an existing numerical value and type in the exact value you want, or you can use the unique slider to change values by moving

your pointer over the property's text box, and then clicking and dragging when the numerical adjust pointer appears.

Advanced properties Most categories of properties in the Properties panel have an expandable advanced section, which you can open by clicking the Show advanced properties button at the bottom of the category. The advanced properties are less commonly used, or they involve subproperty and collection editors.

Subproperty and collection editors In the Properties panel, some properties are more complex than a single value. For example, some properties represent a collection of values, or represent an object with properties of its own. For example, if you add a single bitmap effect to an object (the BitmapEffect property is located in the advanced properties section of the Appearance category), a collapsible subproperty editor appears in which you can set the bitmap subproperties. If you add a BitmapEffect Group to an object instead of a single bitmap effect, the subproperty editor displays a Children property with an Edit items in this collection button that allows you to modify the collection of child bitmap effects that will be applied to the object.

Advanced property options for setting special values Another way that you can set a property is by using the advanced property options pop-up menu (shown in the following image). You can set a property to a custom expression, a resource, a data-binding, or reset the property to a default value by clicking the Advanced property options marker, and then selecting from the items in the pop-up menu. After you set a property by using the advanced property options pop-up menu, the name of the property is given a colored border so that you know what type of value it is set to. For example, if you set the value of a property to a System Resource, the property name will be given a green border.

Advanced property options pop-up menu

Brushes category Transform category

Appearance category Miscellaneous category

Layout category Attached Properties category

Common Properties category

Light category (3D only)

Text category Camera category (3D only)

of 51Workspace



The Resources panel in Microsoft Expression Blend lists all the resources that are used in the currently open project. You can drag resources from the Resources panel onto the artboard, to apply them to an object, or to create a new object that uses that resource. For more information about resources, see Resources overview, Create a brush or color resource, and Style and template overview.

The Resources panel, undocked

Resources panel

of 51Workspace


Create a new resource dictionary

A linked resource

Filter the list of resources Thumbnail previews of resources

Application-level resources Document-level resources

Various resource containers, such as resource dictionaries, and the open document (Window1.xaml)

Note:Resource dictionaries are not available in Silverlight 2 projects.

Object-level resources

of 51Workspace



The Results panel in Microsoft Expression Blend provides information that you can use to debug errors in your application. You can double-click an error to display the line of XAML code that is causing the error. The Results panel appears at the bottom of the Expression Blend window, and will appear behind the Interaction panel when you are working in the Animation workspace. If you do not see the Results panel, press F12. For information about how to debug XAML errors, see Handling errors.

The Results panel showing several XAML errors

See also Concepts

Debug Expression Blend applications


You have various ways to adjust your workspace in Microsoft Expression Blend to suit the needs of your project and your work habits. The topics in this section describe how to customize your workspace.

Results panel

Output tab Provides build information when you build, rebuild, clean, or test a project.

Errors tab Provides a list of build and XAML parser errors.

Provides metadata in a columnar format to help you address errors.

Double-click an individual error to go to the line of markup in the XAML code.

Adjusting your workspace

of 51Workspace


In This Section Add or remove a panel


Resize a panel








Pan the artboard



See also Concepts

Areas of the workspace


In Microsoft Expression Blend 2 you can control the display of the panels in your workspace.

To add a panel to the workspace On the Window menu, click the name of the panel that you want to add to the workspace. Panels that are

already displayed appear on the Window menu with a check mark next to them. Expression Blend includes the following panels: Interaction, Project, Properties, Resources, and Results.

To remove a panel from the workspace Do one of the following:

Add or remove a panel

Note:The Resources panel is not available in Microsoft Silverlight 1.0 projects.

of 51Workspace


On the Window menu, click the name of the panel that you want to remove from the workspace, which results in removing the check mark next to the panel name.

In the top-right corner of the panel, click the Close button .


You can set each panel in Microsoft Expression Blend either to float anywhere on the desktop or to be docked to a default location. The default location depends on whether you are in the Design workspace or the Animation workspace. For example, in the Animation workspace, the Interaction panel moves below the artboard, which provides more room to view the timeline.

To dock a panel Click Dock on the title bar of the floating panel that you want to dock. The panel instantly docks in its

default location in the selected workspace.

To float a panel Click Float on the title bar of the panel that you want to make into a floating panel, and then drag the panel

to a location where you want it.


You can change the size of the panels that appear in the Microsoft Expression Blend workspace. This is useful when you want make your work area larger by reducing the size of the panels, or when you want to view more of the information that appears in the panels by increasing their size.

You can also show or hide all panels at the same time, scale the size of the panels differently relative to the size of the artboard, or just zoom in and out on the artboard. For more information, see the topics that are listed under "See Also".

To resize a floating panel Drag the resize grip on the bottom-right corner of the floating panel, and then resize the panel to the

dimensions that you want.

Resizing the floating Resources panel


Tip:If you are using dual monitors, you can drag a floating panel to one of the monitors to provide more workspace on the other monitor.

Resize a panel

of 51Workspace


To resize a docked panel Move your pointer over the right or left edge of the panel (for vertical panels) or over the top edge of the panel

(for horizontal panels). When the horizontal or vertical resizing pointer appears, drag to resize the panel to the dimensions that you want.

Resizing the Interaction panel in the Animation Workspace (F6)

Resizing the Interaction panel in the Design Workspace (F6)

Resizing the Objects and Timeline window inside the Interaction panel in the Design Workspace

See also Concepts

Note:You can move a floating panel by dragging it by the title bar.

Note:Docked panels have a minimum size that you will not be able to scale below.

Note:The category boxes in the Properties panel are not resizable, but a scroll bar on the right side enables you to viewthe categories. Additionally, you can expand or collapse categories, and show or hide advanced properties for individual categories.

of 51Workspace


Show or hide all panels Zoom the workspace in or out Zoom the artboard in or out Dock or float a panel


You can decide to show or hide all panels at the same time in the Microsoft Expression Blend workspace. This is helpful if you need more room to work on the artboard. Alternatively, you can Add or remove a panel, or Zoom the artboard in or out.

To show or hide all workspace panels Press TAB or F4.

See also Concepts

Zoom the workspace in or out Zoom the artboard in or out Resize a panel


Microsoft Expression Blend has two workspaces: the Design workspace and the Animation workspace. The Design workspace emphasizes design. The Animation workspace moves the Interaction panel under the artboard to provide more room to display the timeline.

To switch between the Design and Animation workspace

Use one of the following methods:

Press F6.

On the Window menu, click Active Workspace, and then select the workspace option that you want, or select Switch Active Workspace.


Note:If you have an object selected on the artboard when you hide panels, the Properties panel appears in mini mode the far right, with buttons that will expand to show the corresponding category of properties. For more informatisee Properties panel.

Note:Using TAB will not work if your cursor is inside an editable text field.


of 51Workspace



In Microsoft Expression Blend, you can zoom your workspace to collectively increase or decrease the size of the workspace elements, specifically the Toolbox and panels. For example, you can shrink the size of the Toolbox and panels to create a bigger area for the artboard.

To zoom your workspace 1. On the Tools menu, click Options.

2. Select the Workspace pane in the Options dialog box.

Adjust the Workspace zoom value (from 50 to 150) to the size you want. You can enter a specific value, or scroll through values by moving your pointer over the property's text box, and then dragging when the

numerical adjust cursor appears. The size of your workspace changes as you adjust the value.

See also Concepts

Show or hide all panels Zoom the artboard in or out Resize a panel


If you've modified your Microsoft Expression Blend workspace, such as zooming the workspace or resizing panels, you can easily return to the default view of the workspace. The default view depends on which workspace configuration you have selected, either Design Workspace or Animation Workspace. For example, in the Animation workspace, the Interaction panel moves below the artboard, which provides more room to view the timeline.

To reset the workspace to the default view On the Window menu, click Reset Workspace Layout.


Microsoft Expression Blend comes with two themes for the workspace: Expression dark and Expression light. Changing your workspace theme does not affect the appearance of your project.

The themes of the Expression Blend workspace: dark (left) and light (right)




of 51Workspace


To change your workspace theme 1. On the Tools menu, click Options.

2. Select Workspace (on the left) in the Options dialog box.

3. Next to Theme, select either Expression dark or Expression light. The theme changes immediately so that you can preview it.

4. Click OK.


The snap grid gives you a set of horizontal and vertical gridlines on the artboard. If Snapping to gridlines is turned on when you drag an object on the artboard, the object will snap or pull towards the closest horizontal and vertical gridlines.

Workspace showing the snap grid turned on

If Snapping to snaplines is turned on when you drag an object on the artboard, the object will snap to the following targets:


of 51Workspace


Column and row dividers in a grid panel

Default margins

Baselines (for text objects)

Alignment boundaries, which appear on the artboard as red dashed lines

Default padding, or the padding properties that are set on the parent object

Shaded red areas showing snaplines

To show the snap grid Do one of the following:

In the lower-left corner of the artboard, click Show snap grid . To hide the snap grid, click the button again to see the off icon .

On the Tools menu, click Options. In the Options dialog box, make sure that Artboard is selected on the left, and then select the Show snap grid check box. Click OK.

To turn on snapping to gridlines Do one of the following:

In the lower-left corner of the artboard, click Turn on snapping to gridlines . To turn off snapping to gridlines, click the button again to see the off icon .

On the Tools menu, click Options. In the Options dialog box, make sure that Artboard is selected on the left, and then select the Snap to gridlines check box. Click OK.

of 51Workspace


To configure gridline spacing1. On the Tools menu, click Options.

2. In the Options dialog box, set the Gridline spacing to the value that you want. The default is 8 pixels (or device-independent units).

3. Click OK.

To turn on snapping to snaplines Do one of the following:

In the lower-left corner of the artboard, click Turn on snapping to snaplines . To turn off snapping to snaplines, click the button again to see the off icon .

On the Tools menu, click Options. In the Options dialog box, make sure that Artboard is selected on the left, and then select the Snap to snaplines check box. Click OK.

To configure snapline margins and padding 1. On the Tools menu, click Options.

2. In the Options dialog box, set the Default margin and Default padding properties to the values that you want. The defaults are 4 and 8 pixels (or device-independent units), respectively.

3. Click OK.


In Microsoft Expression Blend, you can zoom in or out on objects on the artboard or on specific areas of the artboard so that you can see them in more detail.

To zoom in Do one of the following:

Click Zoom in the Toolbox, and then drag a marquee around the object or area of the artboard that you want to zoom in on. Click or drag again to zoom in more. The zoom tool appears with a plus sign

(+) when you are zooming in.

Select a preset zoom percentage in the Zoom slider at the bottom of the artboard or type a value.

Hold the CTRL key when you move the mouse wheel.


of 51Workspace


On the View menu, click Zoom in.

Press CTRL+EQUAL SIGN.

To zoom out Do one of the following:

Click Zoom in the Toolbox, press and hold ALT, and then drag a marquee around the object or area of the artboard that you want to zoom out from. Click or drag again when holding ALT to zoom out

more. The zoom tool appears with a minus sign (-) when you are zooming out.

Select a preset zoom percentage in the Zoom slider at the bottom of the artboard or type a value.

Hold the CTRL key when you move the mouse wheel.

On the View menu, click Zoom out.

Press CTRL+MINUS SIGN.

To zoom on a specific object Select an object on the artboard or under Objects and Timeline, and then use one of the following methods:

In the Zoom slider at the bottom of the artboard, select Fit to screen.

On the View menu, click Fit to screen.

Press CTRL+0.

To zoom the document to actual size Do one of the following:

Double-click the Zoom tool in the Toolbox.

On the View menu, click Actual Size.

In the Zoom slider at the bottom of the artboard, select Actual Size.

See also Concepts

Note:

If you only want to center the artboard on the selected object without zooming, you can double-click the Pan in the Toolbox.

of 51Workspace


Show or hide all panels Zoom the workspace in or out Resize a panel


You can pan (or reposition) the artboard in Microsoft Expression Blend.

To reposition the artboard Do one of the following:

Click the Pan tool in the Toolbox, and then drag the artboard to move it to the position you want.

Hold down the SPACEBAR when the mouse pointer is over the artboard, and then drag the artboard to the desired position.

Select an object on the artboard or under Objects and Timeline, and then double-click the Pan tool in the Toolbox to center the artboard on the selected object.


You can change the background color of the artboard from the default dark gray to a color of your choice.

To change the artboard background color 1. On the Tools menu, click Options.

2. Select Artboard on the left side.

3. Under Background, select Color, and then click the color square to open the color picker.

4. Select a color from the color picker, and then click outside the color picker to close it.

5. Click OK.

To restore the default artboard background color 1. On the Tools menu, click Options.

2. Select Artboard on the left side.

Pan the artboard

Note:Double-clicking the Pan tool will not zoom the artboard on the object, but it will move the artboard so thaselected object is in the center. To zoom the artboard on the object, click Fit to screen on the View menu.


of 51Workspace


3. Under Background, select Default background.

4. Click OK.


In Microsoft Expression Blend 2, you can change the artboard to show the visual design of your document or the XAML markup that describes your visual design. Or you can display both.

The connection between Design view and XAML view

To change authoring views Use one of the following methods:

Click one of the tabs on the top-right area of the artboard: Design, XAML, or Split.


Note:Code-behind files are not viewed on the artboard. Code-behind files are written in a scripting language (Visual Basic .NET or C# in Windows Presentation Foundation projects, and JavaScript in Microsoft Silverlight 1.0 projects), and are viewed outside Expression Blend in a text editor, or in Microsoft Visual Studio 2008, if it is installed. For more information, see Code editing and Visual Studio 2008 interoperability and Edit a code-behind file.

of 51Workspace


On the View menu, click Active document view, and then select one of the views: Design view, XAML view, or Split view.

Press F11 to switch between all three views.

The views are defined as follows:

Design view Changes the artboard to the visual design view of your document. In this view, you can use the tools from the Toolbox to draw objects on the artboard or modify them, view objects and triggers in the Interaction panel, and view the Properties and Resources panels.

XAML view Changes the artboard to the XAML view. In this view, you can edit XAML code manually. You can go to a specific line or search and replace text, just as you can in any text editor. However, in this view, you cannot use the tools in the Toolbox, view the objects and triggers in the Interaction panel, or view the Properties or Resources panels. Additionally, most menu items are disabled in this view.

Split view Changes the artboard to a panel layout that shows both Design and XAML view. In this view, all the Expression Blend tools and features are available as if Design view were selected. You can further configure the panel layout in this view.

To change the Split view panel layout 1. Make sure Split view is selected.

2. On the View menu, click Split View Orientation, and then select one of the following options:

Arrange Panes Horizontally Arranges the Design and XAML panes side by side.

Arrange Panes Vertically Arranges the Design and XAML panes one on top of the other.

3. If you want to swap the panes, click Split View Orientation on the View menu again, and then click Swap Design and XAML Panes.

See also Concepts

XAML editing


Keyboard shortcuts in Microsoft Expression Blend consist of shortcut keys and access keys. Keyboard shortcuts can speed up your work, and they make it easy for you to use the keyboard instead of a mouse.

Shortcut key Allows you to select a button or menu command by pressing a key sequence or key combination. For example, to create a new project in Expression Blend, you can press CTRL+SHIFT+N. Keyboard shortcuts are easy to identify in the user interface of Expression Blend—they are displayed to the right of menu commands. For example, on the File menu, the Open Project menu command includes the shortcut key combination CTRL+SHIFT+O.

To identify the keyboard shortcut for a toolbar button, view the ScreenTip for the button.

Keyboard shortcuts

of 51Workspace


Access key Allows you to access a command by pressing a specific key on the keyboard. Access keys appear on the menu by displaying the underscore character under the shortcut letter. For example, the shortcut letter for the File menu is F.

To use access keys, first press ALT or F10 to highlight the specific menu or dialog box, press the corresponding letter of the specific menu or dialog box, and then press the TAB key to navigate through the menu or dialog box. Alternatively, you can use the arrow keys to navigate through menus, or you can press the specific access key for the menu or command that you want to access.

For more information about accessibility and features, visit Accessibility at Microsoft.

In This Section Toolbox shortcuts

Menu shortcuts

Menu access keys

Dialog box access keys

Pen and direct selection usage


To select tools in the Toolbox, you can press their respective shortcut keys. The following table lists the available shortcut keys in Microsoft Expression Blend 2.

Toolbox shortcuts

Icon Tool Press

Selection V

Direct Selection A

Pan H

Zoom Z

Camera Orbit O

Eyedropper I

Paint Bucket F

Brush Transform G

Pen P

Pencil Y

of 51Workspace


See also Concepts

Menu shortcuts Menu access keys Dialog box access keys Pen and direct selection usage


To select menu options, you can press their respective shortcut keys. The following tables list the available menu shortcuts in Microsoft Expression Blend.

File menu

Edit menu

Rectangle M

Ellipse L

Line \

Menu shortcuts

To do this action Press

Create a new item (UserControl, Window, Page, Resource Dictionary in WPF, Scene in Microsoft Silverlight 1.0, UserControl in Silverlight 2)

CTRL+N

Create a new project CTRL+SHIFT+N

Open a project or solution (not a site) CTRL+SHIFT+O

Close the active document CTRL+W

Close all open documents CTRL+SHIFT+W

Close solution CTRL+SHIFT+C

Save the active document CTRL+S

Save all documents CTRL+SHIFT+S

Save a copy of the solution or site CTRL+SHIFT+P

Exit Expression Blend CTRL+Q

of 51Workspace


View menu

Object menu


Undo the last action CTRL+Z

Redo the last action that was undone

CTRL+Y or CTRL+SHIFT+Z

Cut CTRL+X

Copy CTRL+C

Paste CTRL+V

Delete DELETE

Find text (XAML view or JavaScript editor only) CTRL+F

Find the next occurrence of text (XAML view or JavaScript editor only)

F3

Find the next occurrence of text (XAML view or JavaScript editor only)

CTRL+H

Select all objects CTRL+A

Select no objects CTRL+SHIFT+A


Switch between Design, XAML, and Split view

F11

Zoom in on the artboard CTRL+EQUAL SIGN

Zoom out on the artboard CTRL+MINUS SIGN

Fit the selection to the screen size CTRL+0

View the artboard at actual size CTRL+1

Show or hide handles F9

Show or hide object boundaries CTRL+SHIFT+H


Edit the text in a control F2

Edit a control (WPF and Silverlight CTRL+E

of 51Workspace


Project menu

2 only)

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

Autosize width CTRL+SHIFT+5

Autosize height CTRL+SHIFT+6

Group objects into a layout panel CTRL+G

Ungroup objects CTRL+SHIFT+G

Bring the selected object to the front CTRL+SHIFT+]

Bring forward CTRL+]

Send the selected object to the back CTRL+SHIFT+[

Send backward CTRL+[

Make a clipping path CTRL+7

Release a clipping path CTRL+SHIFT+7

Make a compound path CTRL+8

Release a compound path CTRL+SHIFT+8

Lock selection CTRL+L

Unlock all objects CTRL+SHIFT+L

Show selection CTRL+T

Hide selection CTRL+3


Add an existing item to the project CTRL+I

Add a reference to a DLL (WPF and Silverlight 2 only)

ALT+SHIFT+R

Build the solution (WPF and Silverlight 2 only) CTRL+SHIFT+B

Test the project or site F5

of 51Workspace


Tools menu

Window menu

Help menu

Miscellaneous



Make a user control from the selected objects (WPF and Silverlight 2 only) F8


Switch between Animation and Design workspace F6

Show or hide Results panel F12

Show or hide panels F4 or TAB

Reset the active workspace layout CTRL+SHIFT+R


View the User Guide F1


Constrain proportions of objects being drawn or transformed Hold SHIFT

Nudge selected objects arrow keys

Pan the workspace Hold SPACEBAR

Show the Asset Library (from Toolbox) CTRL+PERIOD

Switch between open documents CTRL+TAB

Select multiple objects Hold CTRL

Select multiple adjacent objects Hold SHIFT

Zoom in and out on the artboard CTRL+MOUSE WHEEL

Move the artboard left and right SHIFT+MOUSE WHEEL

Move the artboard up and down MOUSE WHEEL

of 51Workspace


An access key gives you access to a command by pressing a specific key on the keyboard. Access keys appear on the menu by displaying the underscore character under the shortcut letter. For example, the shortcut letter for the File menu is F. To use access keys, first press ALT or F10 to highlight the specific menu or dialog box, press the corresponding letter of the specific menu or dialog box, and then press the TAB key to navigate through the menu or dialog box. Alternatively, you can use the arrow keys to navigate through menus, or you can press the specific access key for the menu or command that you want to access.

Menu access keys

Note:Some options are available in Windows Presentation Foundation (WPF), as indicated.

File menu F

New Item N

New Project W

Open O

Project/Solution P

Site S

Recent Projects R

Close Document C

Close All Documents L

Close Solution or Site E

Save S

Save All A

Save Copy of Solution or Site P

Exit X

Edit menu E

Undo U

Redo R

Cut T

Copy C

Paste P

Delete D

Find F

Find Next N

Replace E

Go To G

Select All A

of 51Workspace


Select None S

View menu V

Active Document View V

Design View D

Split View S

XAML View X

Switch Active Document View V

Split View Orientation S

Arrange Panes Horizontally H

Arrange Panes Vertically V

Swap Design and XAML Panes S

Zoom In I

Zoom Out O

Fit to Screen F

Actual Size A

Show/Hide 3D Lights (WPF only) L

Show Handles H

Show Object Boundaries B

Object menu O

Edit Text T

Edit Control N

Align L

Left Edges L

Horizontal Centers H

Right Edges R

Top Edges T

Vertical Centers V

Bottom Edges B

Make Same M

Width W

Height H

Size S

Flip F

of 51Workspace


Horizontal H

Vertical V

Auto Size Z

Width W

Height H

Both B

Fill F

Group Into G

Ungroup U

Order R

Bring to Front F

Bring Forward O

Send to Back B

Send Backwards A

Combine C

Unite U

Divide D

Intersect I

Subtract S

Exclude Overlap E

Path P

Convert to Path P

Convert to Motion Path C

Make Clipping Path A

Release Clipping Path S

Make Compound Path M

Release Compound Path R

Edit Style Y

Edit Style S

Edit a Copy C

Create Empty E

Apply Resource A

Edit Other Styles O

Edit (type of style) (right ARROW

of 51Workspace


key)

Edit Style S

Edit a Copy C

Create Empty E

Apply Resource (ARROW key)

Edit Control Parts (Template) E

Edit Template T

Edit a Copy C

Create Empty E

Apply Resource A

Edit Other Templates D

Edit Generated Content (Content Template)

(right ARROW key)

Edit Template (ARROW key)

Edit a Copy (ARROW key)

Create Empty (ARROW key)

Apply Resource (ARROW key)

Lock K

Lock Selection L

Lock All A

Unlock All U

Visibility V

Show Selection S

Show All A

Hide Selection H

Hide All L

Project menu P

Add New Folder N

Add Existing Website (Silverlight 1 only) E

Add New Project (WPF and Silverlight 2 only) W

Add Existing Project (WPF and Silverlight 2 only) X

Add Existing Item A

Link to Existing Item (WPF and Silverlight 2 only) L

Add Reference (WPF and Silverlight 2 only) R

of 51Workspace


Add Project Reference (WPF and Silverlight 2 only)

P

Set As Startup S

Build Solution (WPF and Silverlight 2 only) B

Rebuild Solution (WPF and Silverlight 2 only) U

Clean Solution (WPF and Silverlight 2 only) C

Test Solution or Site T

Tools menu T

Create New Layer (WPF only) L

Make Button (WPF and Silverlight 2 only) B

Make Control (WPF and Silverlight 2 only) C

Make Image 3D (WPF only) I

Make Brush Resource (WPF and Silverlight 2 only) K

Make ImageBrush Resource (WPF and Silverlight 2 only)

I

Make VisualBrush Resource (WPF only) V

Make DrawingBrush Resource (WPF only) D

Edit Brush Resource (WPF only) E

Copy into Source DrawingBrush C

Move into Source DrawingBrush M

Font Manager (WPF and Silverlight 2 only) F

Options O

Window menu W

Active Workspace A

Design Workspace D

Animation Workspace A

Switch Active Workspace W

Interaction I

Project J

Properties T

Resources R

Results U

Hide Panels P

of 51Workspace



An access key gives you access to a command by pressing a specific key on the keyboard. Access keys appear on the menu by displaying the underscore character under the shortcut letter. For example, the shortcut letter for the File menu is F. To use access keys, first press ALT or F10 to highlight the specific menu or dialog box, press the corresponding letter of the specific menu or dialog box, and then press the TAB key to navigate through the menu or dialog box. Alternatively, you can use the arrow keys to navigate through menus, or you can press the specific access key for the menu or command that you want to access.

Reset Workspace Layout W

<window name>

(for example, Window1.xaml)

<num>

(1)

Help menu H

User Guide U

Online Community O

Welcome Screen W

Keyboard Shortcuts K

Customer Experience Improvement Program C

Enter Product Key E

About Microsoft Expression Blend A

Dialog box access keys

Note:Some access keys are available for Windows Presentation Foundation (WPF) only, as indicated.

Asset Library (CTRL+PERIOD)

Gallery G

Details D

Show All A

Controls O

Local Styles (WPF and Silverlight 2 only) L

Media M

Custom Controls (WPF and Silverlight 2 only) C

Recent R

New Item dialog box (CTRL+N)

Name N

Include code file (WPF only) I

of 51Workspace


New Project dialog box (CTRL+SHIFT+N)

Name N

Location L

Browse B

Language (WPF and Silverlight 2 only) A

Target (WPF only) T

Open Project dialog box (CTRL+SHIFT+O)

File name N

Open O

Open Site dialog box

Location L

Browse B

Save Copy of Solution or Site dialog box (CTRL+SHIFT+P)

Name N

Location L

Browse B

Options dialog box (Tools menu)

Workspace tab

Theme T

Workspace zoom W

Project tab

Save new projects to Expression Blend Projects folder (or a specified folder) S

Create a temporary project on startup T

Use a Grid panel as the default layout container for new items G

Warn about project files that are opened from outside Expression Blend by using the Open With command in Windows Explorer or Microsoft Visual Studio, or by double-clicking the files

W

Code editor tab

Show settings for E

of 51Workspace


Font F

Size S

Tab size T

Insert spaces P

Keep tabs K

Word wrap W

Reset to Default D

Event handlers tab

Visual Studio if available V

Clipboard only C

Artboard tab

Show snap grid H

Snap to gridlines S

Gridline spacing G

Snap to snaplines L

Default margin M

Default padding P

Use grid layout mode R

Default background B

Color C

Documents tab

Default document view D

Welcome Screen (Help menu)

Projects tab P

New Project N

Open Project O

Open Site E

Help tab H

User Guide U

Online Tutorials T

Online Community O

Samples tab S

Run at startup R

of 51Workspace


Close C

Customer Experience Improvement Program (Help menu)

Join the Expression Blend Customer Experience Improvement Program J

I don't want to join the program at this time N

Add XML Data Source dialog box (Data section in Projects panel)

Connection Name C

Browse (for URL) B

URL for XML data D

Optional XPath Definition X

Infer the Schema from XML Data I

Use a supplied Schema File U

Browse (for schema file) W

Create Data Binding dialog box (Advanced property options in

Properties panel)

Data Field tab

Data sources R

Fields F

Element Property tab

Scene elements E

Properties P

Explicit Data Context tab

Fields F

Show S

Use a custom path expression U

Update source when U

Binding default value D

Value converter V

Converter parameter C

Add new value converter PERIOD (.)

of 51Workspace



Path objects create very versatile shapes because they are defined by points and tangents, which you can modify when you draw the path or after you complete the path. You can also join paths and add or remove points.

Using the pen tool

The following table describes how to modify a path when you are creating the path with the Pen tool. You can also use the Pen tool to add or remove points on a path, or join two paths.

Pen and direct selection usage

Pointer What it does How to activate

Pen pointer

Adjust last tangent without the smooth constraint, allowing you to make a sharp corner

Click + hold ALT

Pen pointer

Aligns the new point horizontally, vertically, or diagonally based on the closest plane of the clicked point

Click + hold SHIFT+ALT

Pen insert pointer

Adds a new point at location of click

Click

Pen adjust pointer

Click the selected endpoint to reduce the last tangent to zero length

Hover over an endpoint and click

Pen adjust pointer

Use when you modify a tangent

Click and drag

Pen delete pointer

Removes a point at the location where a point is clicked

Hover over an existing point and then click

Click the nonactive start

With a start point or endpoint active,

of 51Workspace


Pen close pointer

or endpoint to close a path with a sharp corner

hover over the nonactive start point or endpoint and then click

Pen close pointer

Close a path with a smooth point

Click and drag

Pen extend pointer

Indicates that the pointer is over an endpoint or start point and can be extended at the next click

Hover over a start point or endpoint

Pen join pointer

Creates a sharp corner on click when two paths are joined

Select two paths, click the Pen tool, hover over an open point of one of the paths and when the Pen extend pointer appears, click the point. Hover over an open point on the other path to see the Pen join pointer, and then click the point to join the two paths sharply.

Pen join pointer

Creates a smooth corner on click and drag when two paths are joined

Select two paths, click the Pen tool, hover over an open point of one of the paths and when the Pen extend pointer appears, click the point. Hover over an open point on the other path to see the Pen join pointer, click the point, and then drag before letting go of the mouse click to join the two paths smoothly.

Pen start pointer

Create a new path

Click

Pen Creates a

of 51Workspace


Back to top

Using the Direct Selection tool

The following table describes how to use the Direct Selection tool to modify the shape of an existing path object.

start pointer

tangent to start a curve

Click and drag

Pen tangent pointer

Indicates that a tangent is being dragged

With the Pen extend pointer showing, press and hold the mouse down on an open point

Pointer What it does How to activate

Move point pointer

Makes tangent handles appear for a point on a path

Click a point on a path

Move point pointer

Moves a point on a path

Click and drag a point on a path

Move segment pointer

Makes tangent handles appear for a segment between two points on a path

Click a segment of a path

Move segment pointer

Moves a segment between two points on a path

Click and drag a segment of a path

Move tangent pointer

Changes the angle of a tangent for a point on a path

Click a point or a segment of a path to make the tangent handles appear, and then click and drag one of the tangent endpoints

Convert pointer

Moves you into tangent-editing mode

Press ALT

of 51Workspace


Back to top


Convert point pointer

Makes a point into a sharp corner or reduces the tangent to zero

Press ALT when you hover over a point and then click

Convert point pointer

Makes any sharp corner smooth (if already smooth, changes the angle of the curve as it passes through the clicked point)

Press ALT when you hover over a point and then click and drag

Convert segment pointer

Changes a curve segment into a straight line

Press ALT when you hover over a segment in a path and then click

Convert segment pointer

Takes a segment and bends it into a curve to pass through the mouse position

Press ALT when you hover over a segment in a path and then click and drag

Convert tangent pointer

Adjust the selected tangent independently of the other side

Direct select a point or a segment, press ALT, hover over a tangent point in a path, and then click and drag

of 51Workspace


silverlight 2 - expression blend - workspace

Documents

design workspace

workspace page

animation workspace

workspace configurations

panel orientation

panel dock

workspace color scheme

panel position