Export (0) Print
Expand All

Controls overview

This page applies to WPF and Silverlight 2

Microsoft Expression Blend provides an extensive list of controls that enable you to design a versatile user interface for your Windows Presentation Foundation (WPF) and Silverlight 2 applications.

Cc294749.alert_note(en-us,Expression.10).gifNote:

For a list of controls that are available in Microsoft Silverlight 1.0 projects, see the "Controls" section of the Overview of Silverlight 1.0.

Expression Blend enables you to go above and beyond simply working with default or system WPF controls. Instead, you can actually customize and style controls to your liking to make them perform the way you want. You can also—through the use of resources in Expression Blend—give your custom controls a unique, attractive look, to differentiate your application from others as a way to create a highly branded experience or to create a consistent user interface (UI) across all of your applications. One of the greatest benefits of the control editing model that is present in Expression Blend is that designers can design the appearance of an application at the same time that developers are writing the programming logic. Because a designer can create a design directly, the design won't get lost in translation from mockup to implementation.

Controls (or UI design elements) are the visible components of an application. Controls (such as buttons or lists of selectable items) make it possible for users to interact with your application. If you understand the controls that are available to you in Expression Blend and how to customize them, you can make your application look and behave exactly the way you want.

Expression Blend makes it possible for you to work with controls visually on the artboard, and to configure their appearance and behavior in the Properties panel and Interaction panel. For example, you can add a Button control to the artboard, change its appearance by modifying values in the Properties panel, and then start an animation timeline when the button is clicked by adding an event trigger for the button in the Interaction panel.

Beyond those simple actions, you can also do the following things to a control:

Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gif Back to top

In Expression Blend, you can use many different types of controls to quickly design a visually unique application.

All of the controls are available from the Asset Library by clicking the Asset Library Cc294749.0224cabd-5da1-4e01-bddd-4a647401a098(en-us,Expression.10).png button at the bottom of the Toolbox. The Toolbox is along the left side of Expression Blend. When you select a UI element from the Asset Library, the icon for that element appears above the Asset Library button, enabling you to easily select that element again later. The most common UI elements are already displayed above the Asset Library button so that you can locate them quickly.

The following illustration shows the artboard after some of the common UI elements have been added as objects. The Pen Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(en-us,Expression.10).png tool generates a Path Cc294749.e1882d38-c773-4abe-a2b9-10abd293e119(en-us,Expression.10).png object. The Image Cc294749.0594f05b-2193-4385-86a0-2d352cacfe55(en-us,Expression.10).png icon appeared in the Toolbox after the Image control was selected from the Asset Library.

From the Toolbox to the artboard

Cc294749.abd88d9d-ab6c-444e-8037-469cdcb5586a(en-us,Expression.10).png
Cc294749.25182a96-9a69-478a-9cfe-5b360e6a9bea(en-us,Expression.10).png

A path object named Path_40, representing the shape of the orange color swatch.

Cc294749.eb6fad93-f17e-4f62-a926-8c8651862891(en-us,Expression.10).png

An unnamed button object, representing the button in the application that is labeled "Reset Image". Under Objects and Timeline, the underscore (_) is used to identify the access key for the button.

Cc294749.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(en-us,Expression.10).png

A rectangle object named Rectangle_44, representing one of the paint chips on the color swatch.

Cc294749.a5d608f2-bba2-48c5-8b15-2c115db86acc(en-us,Expression.10).png

An image object named photo_bathroom, representing the background image of the room.

Cc294749.f0c1ff71-7814-42ba-806b-7ea92d616e69(en-us,Expression.10).png

An unnamed text block identified by the text that it contains, representing the title of the application, "Color Swatch Sample Pack 1".

To help you decide which control to use, think of the controls in terms of the following categories:

Category

Use

Examples

Shapes (available in Silverlight 1.0 projects)

Used to create rich visual elements by using ellipses, lines, and rectangles, whose appearance you can make as simple or as complex and colorful as you wish. For more information, see Drawing shapes and paths.

You can customize the appearance and behavior of these elements in Expression Blend by using the Properties panel, or by using styles only (not by using templates). For more information, see Edit a style.

Rectangle Cc294749.ae750268-92e8-403a-9e07-b662da4e9e1e(en-us,Expression.10).png

Ellipse Cc294749.d7a04618-e35a-44f9-b78c-1f22e38016c1(en-us,Expression.10).png

Path (generated by the Line Cc294749.eb618397-5283-48be-8396-3449be7b6fbf(en-us,Expression.10).png, Pen Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(en-us,Expression.10).png, and Pencil Cc294749.509dc167-734f-46c9-b012-987ee63450cd(en-us,Expression.10).png drawing tools)

Layout panels

Used as a container for other UI elements, to specify their position and window resizing behavior.

Unlike most UI elements, some layout panels (such as the Grid) can contain more than one child element. This is useful for organizing and laying out your application design.

For more information, see Layout.

You can customize the appearance and behavior of these elements in Expression Blend by using the Properties panel, or by using styles (not templates). For more information, see Edit a style.

Canvas Cc294749.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(en-us,Expression.10).png (available in Silverlight 1.0 projects)

Dock Cc294749.db9f1ff5-6bca-441d-b289-c6781a478a5b(en-us,Expression.10).png

Grid Cc294749.a87ee957-7fbf-4135-a6ab-6de7e63160aa(en-us,Expression.10).png

Stack Cc294749.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(en-us,Expression.10).png

Wrap Cc294749.91486eda-6173-4ce8-9610-4f296dcb83d7(en-us,Expression.10).png

Document/Text

Used to define document presentation and text formatting. For more information, see the Text and typography overview.

You can customize the appearance and behavior of these elements in Expression Blend by using the Properties panel, or by using styles and templates. For more information, see Create or edit a control template and Edit a style.

TextBox Cc294749.343296b4-5c7d-4145-84cc-91b08ba67a1b(en-us,Expression.10).png

TextBlock Cc294749.42165963-00f7-4a33-abcd-b0849edebada(en-us,Expression.10).png (available in Silverlight 1.0 projects)

RichTextBox Cc294749.0ee48635-456b-4ebd-b8e4-ce3658417b8e(en-us,Expression.10).png

Label Cc294749.a27042f1-4067-4239-b99a-8b2e4c223de0(en-us,Expression.10).png

PasswordBox Cc294749.31e4dc7e-8cf4-4014-83e4-9b50ec6ee663(en-us,Expression.10).png

Controls

Used to provide a way for your user to interact with your application.

You can customize the appearance and behavior of these elements in Expression Blend by using the Properties panel, or by using styles and templates. For more information, see Create or edit a control template and Edit a style.

Button Cc294749.05df1779-a68f-436b-b834-a91b7995a3ec(en-us,Expression.10).png

ListBox Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(en-us,Expression.10).png

Menu Cc294749.015a263c-0b2b-4253-ac57-b86fcb8c9591(en-us,Expression.10).png

RadioButton Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(en-us,Expression.10).png

CheckBox Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(en-us,Expression.10).png

Decorators

Used to apply effects to another element. Decorators can include a single child element, usually the element whose appearance they affect.

Typically these elements are used within templates that are applied to other controls, for example, the ButtonChrome element in the template of a button. You can customize the appearance and behavior of the Decorator elements themselves by using the Properties panel, or by using styles only (not by using templates). For more information, see Edit a style.

Border Cc294749.be354518-c54c-4f86-9c57-0b4a9d384b3e(en-us,Expression.10).png

ButtonChrome

Viewbox

For more information about the characteristics of these control types, see the topic Type Families in the Windows Presentation Foundation section of MSDN.

Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gif Back to top

You can add a control to the artboard by double-clicking its icon in the Toolbox, or by selecting its icon in the Toolbox and then using your mouse to draw the element on the artboard. For more information, see the how-to topics listed in Controls. Double-clicking a control in the Asset Library inserts the control into the current active element at a default size. This is useful because in many cases the default size will be set to Auto so that the control will size correctly as content is added to it.

After you add a control to the artboard in Expression Blend, it becomes an object in your application. You can modify objects in many ways by using on-object handles to resize, move, rotate, flip, or skew the objects, or by using the Properties panel where you can enter precise values for size, position, and rotation. For more information, see Add or modify an object, or see the how-to topics that are listed in Working with objects and properties.

Expression Blend is unique in the way in which it allows you to manipulate controls. You can place any other control, panel, or shape element within a control. This is useful in combining controls together. For example, if you want to create a button with an image and text in it, you simply place a Stack panel control into the button and then add an image and text control into the Stack panel.

Controls follow certain inheritance rules. For instance, some controls act as a parent element and can have child elements (content) nested within them. Other controls do not support child elements. Expression Blend always attempts to add child elements to the root (or topmost panel) within a document. This means that the LayoutRoot element is considered the root when you first start working in Expression Blend and will, by default, be the destination for all child elements that you insert into the document. If you want to add child elements to a different control within a document, you need to activate that control by double-clicking its name under Objects and Timeline. A yellow highlight identifies the activated element so that you know where a new control will be added.

Expression Blend supports the following different types of controls, which are categorized by the type of inheritance that they support:

Category

Description

Examples

Simple controls

Simple controls consist of the controls themselves and the properties that can be set on them. Simple controls do not take content. In other words, they cannot have child elements within them.

Image Cc294749.0594f05b-2193-4385-86a0-2d352cacfe55(en-us,Expression.10).png (available in Silverlight 1.0 projects)

ScrollBar Cc294749.6513a026-499e-4296-8a67-7558b466bd33(en-us,Expression.10).png

Content controls

Content controls can take another element (or can show a string as text for simple scenarios). Content controls have a Content property. This means that they can contain singular content such as a string. Also, content controls can contain another element, such as a layout panel. For an example, see the topic Create a content control.

CheckBox Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(en-us,Expression.10).png

RadioButton Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(en-us,Expression.10).png

Items controls

Items controls include a collection of child elements. You can either manually add items to the Items collection property, or you can bind a data collection to the ItemsSource property. Items controls expose items collections and have no Content property and no Header property. For an example, see the topic Create an items control.

ComboBox Cc294749.b174a511-dd12-4a45-a986-034de7693de9(en-us,Expression.10).png

ListBox Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(en-us,Expression.10).png

Headered controls

Headered controls include a header child element that labels the control. Headered controls can either include content (headered content control) or a collection of items (headered items control). For an example, see the topic Create a headered control.

TabControl Cc294749.f13847cd-7fdf-4757-a648-d5ece98fcaea(en-us,Expression.10).png

TabItem

MenuItem Cc294749.82c89430-1209-4aa1-b534-cf1cedac74c7(en-us,Expression.10).png

For more information about the characteristics of these control types, see the topic "Content Models" in the Windows Presentation Foundation section of MSDN.

Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gif Back to top

As mentioned previously under Controls overview, you can customize controls in many ways, including by creating templates and styles for controls, resulting in a unique and consistent look for your application. Templates and styles define the pieces that make up a control and the default behavior of the control, respectively. You create templates and styles by making copies of the default system styles and templates for a control (because you can't modify system styles and templates). Modifying templates and styles is an easy way to essentially make new controls in Design view of Expression Blend, without having to use code. For more information, see the Style and template overview.

Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gif Back to top

Community Additions

ADD
Show:
© 2014 Microsoft