Controls overview
- What are controls?
- Categories of controls
- Creating and modifying controls
- Styles and templates
- Themes and simple styles
Microsoft® Expression Blend™ enables you to go above and beyond simply working with default or system 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.
What are controls?
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 and Interaction panels. 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:
- Convert a property (such as a brush color) into a resource that you can apply to other controls to create a unique and consistent look for your application. For an example, see Create a resource in this User Guide.
- Create a new template and style for a control that defines its appearance and behavior, also resulting in a unique and consistent look for your application. Templates and styles can include triggers and can use resources to set properties. For more information, see Styles and templates below. For examples, see Create a style resource and Edit a control template in this User Guide.
- Add animations and interactivity to your control. For an example, see Create a simple animation.
- Program more complicated behavior for your control in event handler methods in a code-behind file. For an example, see Create a new event handler method in this User Guide.
- Design your own custom controls and use them in Expression Blend. For an example, see Create a custom control and Create a user control in this User Guide.
Categories of controls
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
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 tool
generates a Path object
.
The Image icon
appeared in the Toolbox after the Image control was selected from
the Asset Library.
From the Toolbox to the artboard.
To help you decide which control to use, think of the controls in terms of the following categories:
| Category | Use | Examples |
|---|---|---|
| Shapes | 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
Essentials of drawing in
this User Guide. 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 in this User Guide. |
|
| 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 The layout system in this User Guide. 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 in this User Guide. |
|
| Document/Text | Used to define document presentation and text formatting. For more
information, see Text
overview in this User Guide.
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 Edit a control template and Edit a Style in this User Guide. |
|
| 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 Edit a control template and Edit a Style in this User Guide. |
|
| 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 in this User Guide. |
|
, Pen
drawing tools)
For more information about the characteristics of these control types, see the topic Type Families in the Windows Presentation Foundation section of MSDN.
Creating and modifying controls
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 objects, or see the how-to topics that are listed in Working with objects.
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. |
|
| 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 in this User Guide. |
|
| 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 in this User Guide. |
|
| 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 in this User Guide. |
|
For more information about the characteristics of these control types, see the topic Content Models in the Windows Presentation Foundation section of MSDN.
Styles and templates
As mentioned previously under What are controls?, 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.
The following table provides a detailed comparison of styles and templates to help you to decide if you want to modify the style or template of a control, or both.
| Characteristic | Styles | Templates | ||||||
|---|---|---|---|---|---|---|---|---|
| Purpose |
Using styles, you can modify the default values of properties that are set on the control to which the style is applied. For example, you can specify default colors for the background, border, and foreground of a control such as a button. These style properties can be over-ridden by the values that are set on the control itself when it is drawn on the artboard. For example, if you set the background color to blue in the style of a button, the button will appear blue when it is drawn on the artboard, but you can change the color. You can only set pre-existing properties in the style. For example, you can not set a default value for a property that belongs to a new part that you added to the template. Finally, you can use styles to specify the default behavior of a control. For example, in a style for a button, you can specify a trigger such that when the user moves their mouse pointer over the button, the background color will change. These property changes are instantaneous (they can not be animated gradually). |
Using templates, you can modify the structure of the control to which the template is applied. You can modify a control template in order to rearrange, add, or delete the elements (or parts) within the control. For example, you can add a background image or design to a control such as a button. You can also modify the values of properties (such as background color) that are set on the control to which the template is applied. These template values can not be over-ridden by the values that are set on the control itself when it is drawn on the artboard. However, you can use template-binding to set the properties of a template according to the values of properties of the control when it is drawn on the artboard. When modifying a template, you have access to more parts of a control than when you modify a style. For example, you can change the way the pop-up list appears in a combo box, or you change the look of the button that triggers the pop-up list in the combo box by modifying the items template. Some templates are made up of the following parts:
Finally, you can specify the behavior of any new and existing parts in a template by using triggers. For example, you can specify a trigger such that when the user moves their mouse pointer over a button, the color of one of the parts will change. These property changes can be instantaneous or animated to produce a smooth transition.
|
||||||
| How to edit | You can enter the editing mode for a style in the following ways:
Using the menu
Using the Resources panel (to modify an existing style)
|
You can enter the editing mode for a control template in the following ways:
Using the menu
Using the Resources panel (to modify an existing template)
|
||||||
| How to apply | You can apply an existing style to a control on the artboard in the following ways:
Using the menu
Using the Asset Library to draw a styled control on the artboard
|
You can apply an existing template to a control on the artboard in the following ways:
Using the menu
Using the Resources panel (to modify an existing template)
|
button twice because the first click will bring you
back to the editing mode of the style.Expression Blend comes with a set of simple styles and templates that are packaged in a resource dictionary. Resource dictionaries can be used to design a theme for your application. For more information, see Themes and simple styles below.
 |
When you modify styles and templates, there are a few things to remember in order to not break the functionality of the system control to which the style or template is applied:
|
Themes and simple styles
A theme is a set of styles and templates that produce a consistent look for user interface controls. For example, Windows Presentation Foundation (WPF) uses one theme for WPF applications that are running on Windows XP®, and a different theme for WPF applications that are running on Windows Vista™. This is why the same button will look different between the two operating systems.
To determine the look of a control (such as a button), an application will search in the following places:
- Properties that are set on a control—for example, if you were to create a button in Expression Blend and then change the background color directly on the button. Setting a property directly on a control overrides any values for that property set anywhere else.
- Properties that are set in the custom style or template that is used by a control—for example, if you were to create a button in Expression Blend and then edit a copy of the template to set the background color in the template. This is the background color that will be used for the button if the background property is not set directly on the button. You can define resources within the document that contains the control, or you can define resources at the application level (therefore making the resources available to all documents in the application). Document-level resources override application-level resources.
- Properties that are set on the system template that is used by a control—WPF determines the system template based on the theme (in other words, based on the operating system).
You can effectively create a theme by creating property, style, and template resources in an individual file called a resource dictionary. Using a resource dictionary enables you to reuse a theme across multiple applications. You can also create swappable themes, by defining multiple resource dictionaries that provide the same types of resources but with different values. For example, the Expression Blend application itself uses different resource dictionaries for a Dark theme and a Light theme, which you can switch between by clicking Options on the Tools menu, and then changing the Theme for the Workspace.
For your own applications, Expression Blend provides a ready-to-use resource dictionary named SimpleStyles.xaml that contains a set of styles for common controls such as buttons, list boxes, and others. You can access these styles under Simple Styles on the Controls tab of the Asset Library. When you use one of the simple styles to draw a control on the artboard, the system version of the control is simultaneously created and the simple style is applied. For example, if you create a system Button on the artboard, the resulting Extensible Application Markup Language (XAML) is as follows:
<Button Content="Button" ... />If you create a SimpleButton on the artboard, the resulting XAML includes a reference to the SimpleButton style:
<Button Content="Button" Style="{DynamicResource SimpleButton}"... />
After you add a simple style control to the artboard, the SimpleStyles.xaml resource dictionary file is added to your project, and is linked to the app.xaml file so that the styles are defined in the scope of the application. You can view all of the styles in the Resources panel. For examples of using simple styles, see the topics under Simple styles in this User Guide. For more information about managing resources, see Essentials of resources in this User Guide.