Export (0) Print
Expand All

Tour of the Blend Workspace

Blend has two default workspaces: the Design workspace and the Animation workspace. You can switch between them by pressing CTRL-F11.

The Design workspace lets you focus on general authoring. The Animation workspace moves the Objects and Timeline panel under the artboard so that the timeline has more room to be displayed.



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

eea17aa0-ebae-42b5-a03a-165bf4d54fda
B1_1

Menus

B1_4

Artboard

B1_2

Tools panel

B1_5

Projects panel, Properties panel, and Resources panel

B1_3

Objects and Timeline panel

B1_6

Results panel (layered in the Objects and Timeline panel when in the Animation workspace)

A workspace in Blend for Visual Studio consists of all the visual interface elements. These include the artboard, panels, workspace configurations, authoring views, and menus.

Workspaces

B1_1

Document tabs View all the project documents that are open, including windows, pages, resource dictionaries, and user controls.

B1_2

Active files Determine the current open document on the artboard and also see all the files that are open in the document tabs.

B1_3

Views Use one of three real-time authoring environments:

  • Design view Use Design view to author documents by using a visual representation on the artboard.

  • Code view Use Code view to author or edit your XAML code.

    NoteNote

    The Tools panel, Objects and Timeline panel, and Properties don’t work in Code view. In addition, most menu items are disabled in this view.

  • Split view Displays both Code and Design view. You can also change the orientation of the windows using Split View Orientation on the View menu.

The Blend 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).

The artboard is your work surface. Visually design a document by drawing objects and modifying them.

78ec5d4d-3af1-46bd-ab63-bc4fc542806f

B1_1

Visual design surface   Set artboard options, such as changing the background color, in the Options dialog box.

B1_2

XAML editor   Edit your XAML code in the XAML editor.

B1_3

Artboard controls   Use these controls to zoom the artboard, turn on the rendering of effects, set snapping options, and turn on file annotations.

B1_4

Document tabs   Use when you have more than one document open on the artboard to switch between them by clicking the corresponding tab.

B1_5

View buttons   Use these buttons to switch between Design, XAML, and Split views.

B1_6

Object handles   Use the object handles to modify the object by using your mouse.

You can use the Tools panel in Blend for Visual Studio to create and modify objects in your application. You create the objects by selecting a tool and drawing on the artboard with your mouse.

c9183de2-164f-47be-bdd2-00b74f58ee22

B1_1

Selection tools   Select objects and paths.

Use the Direct Selection tool to select nested objects and path segments.

095c13e8-6ed8-4572-9bd2-b2d6bdfdf199

Path tools

B1_2

View tools   Adjust the view of the artboard, such as for panning and zooming.

e1a62fcf-2f5c-4263-95fe-a9bf97616b85

Shape tools

B1_3

Brush tools   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.

b36987f6-e914-4b58-99f2-a76c47128837

Layout panels

B1_4

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

41999197-e26c-42b9-8039-58ce07f5b5ba

Text controls

B1_5

Asset tools   Access the Assets panel and to show the most recently used asset from the library.

db8728cc-fbcc-4372-8f0b-f7145ad3767c

Common controls 

The Tools panel shows the most popular controls, but you can find all controls in the Assets panel. In fact, you’ll find everything you can add to your artboard including controls, styles, media, behaviors, and effects.

B4_Assets_panel

B1_1

Search box   Type in the Search box to filter the list of assets.

B1_2

Grid mode and List mode   Switch between the Grid mode view and the List mode view of assets.

B1_3

Assets categories   Click a category or subcategory to view the list of assets in that category.

B1_4

All   Show all available controls.

B1_5

Simple Styles   Show only the styles that are contained in the Windows Presentation Foundation (WPF) Simple Styles resource dictionary.

B1_6

Description   View a description of the selected assets category or subcategory.

Use this panel to organize the objects on your artboard and, if you want, to animate them.

c42f7b48-05c4-4aef-84dc-1d5680dcc935

B1_1

Objects view   View a visual tree of a document. You can drill down to varying levels of detail. You can also add layers to further organize objects on the artboard. That way you can lock and hide them as a group.

To adjust the width of the objects view, drag the split bar to the left of the lock column.

B1_2

Record mode indicator   See whether you’re recording property changes in a timeline.

B1_3

Storyboard picker   View a list of storyboards that you’ve created.

B1_4

Storyboard options  Create, duplicate, reverse, delete, rename, or close a storyboard.

B1_5

Playback controls   Navigate through the timeline. You can also drag the playhead to navigate through (or scrub) the timeline.

B1_6

Return scope to   Scope the objects view back to the previous root object or previous scope. You can do this only when you’re modifying a style or template.

B1_7

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

B1_8

Show/hide, Lock/unlock   Show or hide the visibility and locking options for the objects view.

B1_9

Playhead position on the timeline   Show 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.

97fa60b9-0caf-4387-9225-b57510d32209

Timeline snapping options   Set timeline snapping and snap resolution. When you enable timeline snapping, the next and previous frame buttons respect the snap resolution set in the Snapping Options dialog box. The snap resolution also determines where on a timeline you can set a keyframe.

B1_11

Playhead   Determine what point in time the animation is at. You can drag the playhead across the timeline to preview animation.

B1_12

Keyframes set on timelines   Change a property value at a specific point in time.

B1_13

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

d839d12c-07a1-4127-a830-4a8e7069f4fe

Timeline zoom   Set 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 can't set a keyframe at the position in time that you want, verify that the snap resolution is set high enough.

B1_15

Timeline composition area   View the timeline, and move keyframes around by dragging them or using their shortcut menus.

Use this panel to view and modify the properties of an object. You can also set them directly on the artboard. If you do, the property changes will be reflected in the Properties panel.

Properties panel

Callout A

Categories   Expand and collapse categories of properties. Click Expand 6375953d-074c-421a-bbb3-6f5055b67b64 and Collapse  to show or hide category details.

B1_1

Name and Type View the icon, name and type of the selected object.

B1_2

Arrange by Arrange properties alphabetically by name, source, or category.

B1_3

Brush properties Set the visual properties for brushes such as Fill brush, Stroke brush, and Foreground brush.

B1_4

Color editor Use for solid color and gradient brushes.

B1_5

Color picker Select a color.

B1_6

Color chips View the initial color, current color, and last color

B1_7

Eyedroppers Use the color of any element on your screen. The Color eyedropper is available when theSolid color brush is selected. The Gradient eyedropper is available the Gradient brush is selected.

B1_8

Properties and Events Set properties or choose events for a selected element.

B1_9

Search box Search for properties. Filter the properties that are displayed by typing text in the Search box.

97fa60b9-0caf-4387-9225-b57510d32209

Brush editor tabs Use to select a brush editor. You can choose No brush, Solid Color Brush, Gradient Brush, Tile Brush, or to a Brush resource.

B1_11

Color resources Apply the exact same color to different properties. The Color Resources tab includes Local Resources and System Resources.

B1_12

RGB color space Modify the color by adjusting the values for the R, G, or B (red, green, blue) number editors.

d839d12c-07a1-4127-a830-4a8e7069f4fe

Alpha channel Modify the Alpha value by using the number editor next to A.

d839d12c-07a1-4127-a830-4a8e7069f4fe

Convert color to resource Convert the selected color to a color resource. Color resources are available when you click the Color resources tab.

B1_15

Hex value View the hexadecimal value of the color displayed.

Callout 16

Gradient slider Appears only if a gradient brush is selected.

d50027a1-6824-4ad8-8b4e-558b0756dcf8

Show advanced properties View categories of properties that are less commonly used.

Use the Projects panel to manage the files in your project.

604be326-7297-454f-9e70-ac79cc4dd9f1

B1_1

Search box   Type text in the Search box to filter the list of project files.

B1_2

Solution   Contains the application project and the corresponding files.

B1_3

References   Includes project references such as DLL files.

B1_4

Linked item   An arrow is superimposed onto a linked-to item icon, meaning that the item does not exist in the project folder.

B1_5

SampleData   Includes generated sample data files.

B1_6

MainWindow.xaml   The code-behind file for the main document.

B1_7

ResourceDictionary   A set of resources that can be shared throughout your project.

This panel helps you simulate various views of your app when you run it.

Device panel

B1_1

Display   Preview different display sizes and resolutions for the app.

B1_2

Orientation   Preview different orientations for the app: Landscape or Portrait.

B1_3

Edge   Preview different edge alignments for your app: Both, Left, Right, or None.

B1_4

High Contrast   Preview the app based on the selected contrast setting. This setting, when set to a value other than Default, will override the RequestedTheme property set in App.xaml.

B1_5

Override scaling   Preview the app based on an increased display scale. If the display scale is 100%, selecting Override scaling will simulate a display scale of 140%. If the display scale is 140%, the simulated scale is 180%.

B1_6

Theme   Preview the app based on the selected theme.

B1_7

Minimum width   Previews your app based on the minimum width setting. The minimum width can be changed in App.xaml.

B1_8

Show chrome   Select or clear the Show chrome check box to turn the simulated tablet frame around your app in the Design view on or off.

B1_9

Clip to display   Select or clear the Clip to display check box to either clip the entire document or show the document display.

97fa60b9-0caf-4387-9225-b57510d32209

Deploy target   Select the target device where your app will be deployed when it builds.

This panel lists all of the resources that are used in the currently open project. You can apply a resource to an object by dragging it from the Resources panel onto the artboard.

8a88ddbd-58b6-481f-8f16-fd0e83276717

B1_1

Create new resource directory   Create a new resource dictionary.

B1_2

Show resources used by selected element   Filter the list of resources to display only those used by the selected element.

B1_3

App.xaml   View application-level resources.

B1_4

Various resource containers, such as resource dictionaries and open documents.

B1_5

Linked To   Identify a linked resource.

B1_6

Resource preview   View a thumbnail view of the resources used in the project.

B1_7

Document-level resources   View the resources for the selected document.

B1_8

Object-level resources   View the resources for the selected object.

If you’ve found a video or article that’s helped you become familiar with the Blend workspace, please share that with us. After we review the content, we might add a link to it so that others can benefit from your discovery.

If you’d like to suggest a new video, we’d also like to hear from you. If we receive similar requests from others, we’ll create one as our time and priorities permit.

No one knows your business better than you. So please tell us what resources have helped you to become familiar with the Blend workspace, and what areas have not been well explained by us, or by anyone in our community, so that we can better evolve our content to help you.

Please share your suggestions here.

Show:
© 2014 Microsoft