Silverlight 2 - Expression Blend - Styles and Templates

Styles and templates Page 1 of 65
Styles and templates
The topics in this section describe how you can customize Windows Presentation Foundation and Silverlight 2 controls
by creating a set of templates and styles, 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.
Note:
Styles and templates are not supported in Microsoft Silverlight 1.0 projects, but you can create JavaScript classes to
define reusable controls. For an example, see the Button class in the ButtonGallery sample that is available from the
Samples tab in the Welcome Screen (on the Help menu). For more information, see the Silverlight learning center.
In This Section
Conceptual
Style and template overview
Working with simple styles
SimpleButton
SimpleCheckBox
SimpleComboBox and SimpleComboBoxItem
SimpleExpander
SimpleListBox and SimpleListBoxItem
SimpleMenu and SimpleMenuItem
SimpleProgressBar
SimpleScrollBar
SimpleScrollViewer
SimpleSlider
SimpleTabControl and SimpleTabItem
How to
Create a style resource
Edit a style
file://C:\Windows\Temp\~hhD0B.htm 6/16/2009
Apply a style resource
Restore the default style
Create or edit a control template
Navigate the style hierarchy using the breadcrumb bar
Try it
Try it: Create a button by using bitmap effects
Try it: Add animation to a button
Try it: Create a rollover button
Try it: Customize the appearance of the check mark in a SimpleCheckBox
Try it: Customize the appearance of the expander button in a SimpleComboBox
Try it: Changing the look of the selected item in a SimpleListBox
Try it: Customize the progress indicator of a SimpleProgressBar
Try it: Customize the look of a SimpleScrollBar
Try it: Customize the Thumb element of a SimpleSlider
Try it: Customize the SimpleTabItem using a bitmap effect
See also
Concepts
Simple styles
Resources
Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved.
You can customize Windows Presentation Foundation (WPF) and Silverlight 2 controls in many ways, including by
creating a set of templates and styles for controls, This results in a unique and consistent look for your application.
Note:
Styles and templates are not supported in Microsoft Silverlight 1.0 projects, but you can create JavaScript classes to
define reusable controls. For an example, see the Button class in the ButtonGallery sample that is available from the
Samples tab in the Welcome Screen (on the Help menu). For more information, see the Silverlight learning center.
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 Microsoft Expression Blend, without having to use code.
The difference between styles and templates

The following table provides a detailed comparison of styles and templates to help you decide whether you want to
modify the style or template of a control, or both.
Characteristic Styles Templates
Using templates, you can modify

the structure of the control to
which the template is applied. You
can modify a control template to
rearrange, add, or delete the
elements (or parts) in 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 cannot be
overridden 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 you modify a template, you

have access to more parts of a
By using styles, you can control than when you modify a
modify the default values style. For example, you can
of properties that are set on change the way the pop-up list
the control to which the appears in a combo box, or you
style is applied. For change the look of the button that
example, you can specify triggers the pop-up list in the
default colors for the combo box by modifying the items
background, border, and template. Some templates consist
foreground of a control of the following parts:
such as a button.
 Content Presenter A
These style properties can content presenter is a
be overridden by the values placeholder in the control
that are set on the control template to display the
itself when it is drawn on content of the control to
the artboard. For example, which the template is
if you set the background applied. This might be the
color to blue in the style of value of a content property
a button, the button will (in a button for example), or
appear blue when it is a text property (in a text

drawn on the artboard, but box).
you can change the color.
 Header Some controls have
You can set only pre- multiple properties that hold
existing properties in the content. In this case, an
style. For example, you additional content presenter
cannot set a default value is used in the template as a
for a property that belongs placeholder for the type of
to a new part that you content that is used as a
added to the template. header. An example of a
headered control is a tab
Finally, you can use styles item control where the
to specify the default header is the label on the tab
behavior of a control. For and the content is displayed
example, in a style for a underneath the header.
button, you can specify a
trigger so that when users  Items Host An items host
move their mouse pointer is used as a placeholder for
over the button, the the child elements of a
background color will control. The items host part
change. These property of a template is identified by
changes are instantaneous Is_Items_Host = True in the
(they cannot be animated Properties panel.
gradually).
 ItemContainerTemplate An
Purpose
item container template is
applied to a control that
contains items, such as a
Menu or List control. This
template is used when items
are added to the list.
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 so that when
users move 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.
Note:
You cannot animate from the
value of a template-bound
property or a color resource to
another value. When using
animations in triggers, use specific
property values.
You can enter the editing mode for

a control template in the following
ways:
Using the menu
1. Under Objects and

Timeline, select the control.
2. Do one of the following:

You can enter the editing
mode for a style in the  On the Object menu,
following ways: point to Edit Control
Parts (Template).
Using the menu
 Right-click the
1. Under Objects and control, point to Edit
Timeline, select the Control Parts
control. (Template).
2. On the Object menu, 3. Click Edit Template (if you

point to Edit Style. want to modify the template
that is currently applied to
3. Do one of the the control) or click Edit a
following: Copy (to simultaneously
create a new copy of the
 Click Edit template that is currently
Style (if you applied to the control and
want to change apply the new template to
the style that is the control). The Edit
currently Template option is not
applied to the available if the system
How to edit control) template is applied to the
control.For an example, see
 Click Edit a Create or edit a control
Copy (to template.
simultaneously
create a new Using the Resources panel (to
copy of the modify an existing template)
style that is
currently 1. In the Resources panel,
applied to the locate the style that contains
control and the template, and then click
apply the new the Edit resource button
style to the next to the style.
control).
The Edit Style option will Timeline, right-click the
not be available if the Style elements, point to Edit
system style is applied to Control Parts (Template),
the control.For an example, and then click Edit
see Create a style resource. Template.
Using the Resources panel Tip:

(to modify an existing Control templates are wrapped
style) inside styles so that the style that
is applied to a control includes
Note: both the appearance (parts) and the
Styles and templates are behavior for the control. That is
resources that you can why you click Edit Template
apply to controls in instead of Edit a Copy, because
different ways and store in the copy of the style includes the
different locations in your template.
application. For an
example of creating a style, To return to the editing scope of
see Create a style resource. your main document, you must
click the Scope Up button two
times because the first click brings
you back to the editing mode of
the style.
Note:
Styles and templates are resources
that you can apply to controls in
different ways and store in
different locations in your
application. For an example of
creating a template, see Create or
edit a control template.
You can apply an existing

template to a control on the
You can apply an existing artboard in the following ways:
style to a control on the
artboard in the following Using the menu
ways:
Using the menu Timeline, select the control.
1. Under Objects and 2. Do one of the following:

Timeline, select the
control.  On the Object menu,
point to Edit Control
2. On the Object menu, Parts (Template).
point to Edit Style,
point to Apply  Right-click the
Resource, and then control and then point
select the style from to Edit Control Parts
the drop-down list (Template).
How to apply that appears. The
drop-down list will 3. Click Edit Template (if you
display only styles want to change the template
that are available to that is currently applied to
the selected control. the control) or click Edit a
For example, you Copy (to simultaneously
cannot apply a text create a new copy of the
box style to a button. template that is currently
applied to the control and
Using the Asset Library to apply the new template to
draw a styled control on the control). The Edit
the artboard Template option is not
available if the system
1. Open the Asset template is applied to the
Library . control.For an example, see
Create or edit a control
2. Do one of the template.
following:
Using the Resources panel (to
 If your style modify an existing template)
was created in 1. In the Resources panel,

the document locate the style that contains
in which you the template, and then click
are working, the Edit resource button
click the Local next to the style.
Styles tab.
 If your style Timeline, right-click the
was created in Style elements, point to Edit
a resource Control Parts (Template),
dictionary and then click Edit
(WPF only), Template.
click the
Controls tab, To return to the editing
and then select scope of your main
the dictionary. document, you must click
the Scope Up button two
3. Select the style that times because the first click
you want, and then brings you back to the
draw on the artboard. editing mode of the style.
Expression Blend includes a set of simple styles and templates that are packaged in a resource dictionary in WPF
projects. You can use resource dictionaries to design a theme for your application. For more information, see the
Simple styles and resource dictionaries section.
Back to top
Modifying styles and templates

When you are in the editing scope of a style or template in Expression Blend 2, a breadcrumb navigation bar appears at
the upper left of the artboard.
Breadcrumb bar with template-editing mode selected
By clicking the buttons on the breadcrumb bar, you can quickly move through template-editing mode, style-editing
mode, and object-editing scope for the selected object. The breadcrumb bar appears for any selected object that has a
custom style or template applied to it.
For information about how to modify a style or template, see Edit a style and Create or edit a control template. When
you modify styles or templates, make sure that you adopt the Best practices that follow.
Back to top
Best practices
Caution:
When you modify styles and templates, the following are key points to remember to keep from breaking the
functionality of the system control to which the style or template is applied:
 Avoid changing the existing triggers unless you are just changing color brushes.
 Do not rename or modify any element whose name starts with "PART_", because these elements are referred to
from the code that implements the control.
 Do not remove any helper elements, such as the TabPanel in the SimpleTabControl, or the Track in the
SimpleScrollBar. These elements must be present to preserve the capabilities of the control.
 Do not reset or change any bindings in the Properties panel. These are identified by a yellow highlight around
the property or by a yellow Advanced property options button. Template binding is used to bind properties in
the template to the properties of the control to which the template is applied.
 If the template includes a presenter element (such as a ContentPresenter or ItemsPresenter element), make sure
to retain that element in the template. Presenter elements display content that is defined in the control to which
the template is applied.
Back to top
Themes
A theme is a set of styles and templates that produce a consistent look for user interface controls. For example,
Windows Presentation Foundation uses one theme for WPF applications that are running on Microsoft Windows XP,
and a different theme for WPF applications that are running on Windows Vista. That 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 locations:
1. Properties that are set on a control An example is 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.
2. Properties that are set in the custom style or template that is used by a control An example is if you were to
create a button in Expression Blend and then modify 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 in 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.
3. 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).
Back to top
Simple styles and resource dictionaries

Note:
Simple styles and resource dictionaries are not supported in Silverlight 2 projects.
You can effectively create a theme by creating property, style, and template resources in an individual file that is
named a resource dictionary. Resource dictionaries enable 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:
Copy Code
<Button Content="Button" ... />
If you create a SimpleButton on the artboard, the resulting XAML includes a reference to the SimpleButton style:
Copy Code
<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
the styles in the Resources panel.
For examples of using simple styles, see the topics under Simple styles. For more information about how to manage
resources, see Resources overview.
Back to top
Create a style resource
You can use the style of a control in Microsoft Expression Blend 2 project to specify triggers (WPF) or states
(Silverlight 2) and properties that will be used as defaults by the control to which the style is applied. The properties
(such as the background brush color) will affect the control's appearance, and the triggers or states will affect how the
control responds to property changes and events. For example, when the user moves their mouse over the control, the
IsMouseOver property changes from False to True and the MouseOver event fires. You can create a style for a button
that causes the background color of the button to change when the mouse pointer moves over the button. If you want to
modify the structure of a control, create a template instead using the procedures in Create or edit a control template.
Because a style is a resource, you can save the style separately from the button, and then apply the style resource to
other button objects. For more information about resources, see Resources overview in this User Guide.
To create a new style resource for a control

1. On the artboard or under Objects and Timeline in the Interaction panel, select the object for which you want to
create a style.
2. On the Object menu, point to Edit Style, and then do one of the following:
 To create a new empty style, click Create Empty. For shape controls (such as Rectangle) and text controls
(such as TextBox), this is the only option that is available.
 To create a new style that is based on the style that is currently in use by the selected object (whether the
style is the default style for the object or is a custom style that you created previously), click Edit a Copy.
The Create Style Resource dialog box appears.
3. Under Resource name (Key), do one of the following:
 To create a new named style for the element, enter a key name. This is the name by which other elements
can reference the style, thus applying the style.
 To create a style that will be used by all elements of this type, select Apply to all.
Tip:
In the XAML for the style element that will be created, an attribute named TargetType will be set to the typ
element for which you are creating the style.
An x:Key attribute will only be set if you entered a key name (the first option above). The presence of an x
attribute only allows the style to be applied to elements that specify the style by name. The absence of an x
attribute makes the style apply to all elements of this type. For example, the style element below will not be
all buttons on the artboard.
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"...

4. Under Define in, select the option where you want the style to be defined:
 To make the style available to any document in your application, select Application.
 To make the style available only to the current document, select This document (Window: Window)
 To define the style in a resource dictionary file that can be reused in other projects, select Resource
dictionary. You can then select an existing resource dictionary file or create a New one.
Note:
Resource dictionaries are not supported in Silverlight 2.
5. Click OK to exit the dialog box and open the style for editing.
Tip:
You are effectively creating a new style resource here. This will become a local resource and can be viewed and
modified easily using the Resources panel.
6. Notice the new Expression Blend 2 breadcrumb bar at the top of the artboard.
By clicking the buttons on the breadcrumb bar, you can quickly move between template-editing mode, style-
editing mode, and object-editing scope for the selected object. The breadcrumb bar appears for any selected
object that has a custom style or template applied to it.
7. Add your property and event triggers in the Interaction panel. For an example of triggers to set, see Make an
object into a button in this User Guide, or see the Try it! topics under Simple styles.
8. To exit the editing scope of the style, click the Scope Up button under Objects and Timeline.
This returns you to the previous editing scope you were working from.
Tip:
Notice that once you create or apply a style resource to an object, a green highlight appears in the Properties pane
the Style property of the selected object to indicate that the object is now bound, or linked, to this style resource.
See also
Concepts

Simple styles
Edit a style
that causes the background color of the button to change when the mouse pointer moves over the button.
Editing the style of a button
Style resources save you time by allowing you to define the appearance and behavior for a type of control, and then
apply that style to multiple instances of that type of control on the artboard. When you modify a style resource, all of
the controls on the artboard that use that style are automatically updated.
Tip:
To edit a style, you must have already created the style as a resource or applied the style to an element on the artboard.
For more information, see Create a style resource or Apply a style resource in this User Guide.
To edit the style of an object on the artboard

1. On the artboard or under Objects and Timeline in the Interaction panel, select the object whose style you want to
edit.
 On the Object menu, point to Edit Style, and then click Edit Style.
Note:
If the Edit Style option is unavailable, the object does not have a custom style applied to it. If you choose E
you will create a style resource that is a copy of the system style.
 Under Miscellaneous in the Properties panel, click the Style property, and then click Edit Resource.
Note:
If the Style property is empty, the object does not have a custom style applied to it.
Expression Blend enters the editing scope for the style.
To edit a style resource

 Locate the name of the resource in the Resources panel, and then click the Edit resource button next to the
resource.
Expression Blend enters the editing scope for the style.
To modify a style
1. While in the editing scope for a style, add your property and event triggers under Triggers in the Interaction
panel. For an example of triggers that you can set, see Make an object into a button in this User Guide.
2. To exit the editing scope of the style, click the Scope Up button under Objects and Timeline. This returns you
to the editing scope of the document.
Tip:
Notice that after you create a new style resource for an object or apply an existing style resource to an object, a gr
highlight appears in the Properties panel for the Style property of the selected object, to indicate that the object is
bound, or linked, to the style resource.
Note:
You cannot create a style or a control template for one control that will effect a change on another control. However,
you can use event triggers directly on one control to effect a change on another control. For more information, see Add
or remove a trigger in this User Guide.
Style resources save you time by allowing you to define the appearance and behavior for a type of control, and then
apply that style to multiple instances of that type of control on the artboard.
Tip:
To apply a style, you must first create a style. For more information about how to create a style, see Create a style
resource in this User Guide.
To apply an existing style resource to a control on the

artboard
 On the artboard or under Objects and Timeline in the Interaction panel, click an object to select it, and then do
one of the following:
 On the Object menu, point to Edit Style, point to Apply Resource, and then click the named style that you
want to apply.
 Under Miscellaneous in the Properties panel, click the Advanced property options button next the Style
property, point to Local Resource, and then click the named style that you want to apply.
Note:
If you do not see your style resource listed, the resource might have been created for a different type of control. F
example, a resource that was created from a button object cannot be applied to a check box control.
To use a style resource to create a control on the

artboard
1. In the Resources panel, locate the style resource for the control that you want to add to the artboard. You might
have to expand the nodes in the Resources panel to see the resource.
2. Drag the style resource to the artboard.
A control is added to the artboard with the style already applied.
Note:
If the style is defined in a resource dictionary, you can also add it to the artboard by selecting the name of the reso
dictionary in the Controls tab of the Asset Library, selecting the style, and then drawing on the artboard.
Restore the default style
control responds to property changes and events. For example, when the user moves their mouse over a control, the
At any time, you can restore the default style or template of a control that is drawn on the artboard. The default style
uses a dynamic theme that changes the appearance of your control depending on whether your application runs on a
Microsoft Windows XP computer or on a Windows Vista computer. For more information, see the "Themes and
simple styles" section of the Style and template overview.
Tip:
To restore the default style for a control, you must have applied a different style to it previously. Restoring the default
style essentially breaks the link the control had to a style resource.
To restore the default style or template that is applied

to an object
1. On the artboard or under Objects and Timeline, click an object that has a style resource applied to it.
2. In the Properties panel, locate the Style or Template property, click the property value or the Advanced property
options marker, and then click Reset on the shortcut menu. Notice that the green outline disappears from
around the property value.
See also
Concepts
Create or edit a control template
The template of a control in a Microsoft Expression Blend 2 project defines its appearance by defining the child
controls that are contained within the control. For example, the control template for a TextBox contains a Border
element named Bd, which in turn contains a ScrollViewer element named PART_ContentHost. The ScrollViewer
element displays the content of the TextBox when the control template is applied to a TextBox on the artboard.
Editing the template of a TextBox control
A default control template uses a dynamic theme that changes the appearance of your control depending on whether
your application runs on a Microsoft Windows XP computer or on a Windows Vista computer. You can modify the
elements (control parts) within a control template to rearrange the elements or draw more elements into the control.
However, if you modify a template for a system control, your control will look the same on both Windows XP and
Windows Vista. For more information, see the "Themes and simple styles" section in the Style and template overview.
Control templates are saved as a style resource that you can apply to other controls of the same type.
Note:
You can configure trigger in a control template that respond to property changes (such as IsMouseOver). For example,
you can create a property trigger for a TextBox that changes the background color when the mouse cursor moves over
the TextBox.
If you want to create an event trigger that responds to an event by changing properties or starting an animation, you
must create it in a style. For more information, see Edit a style.
Caution:
Changing the template of a control can break the functionality of the control. As an alternative to editing the control
template for a system control, you could use a prestyled, simple control which gives you total freedom over the design
of the template. For more information, see Working with simple styles.
If none of the simple styles meet your needs and you want to modify the template of a system control, remember the
following cautions:
 Avoid changing the existing triggers unless you are just changing brushes.
 Do not rename or modify any element whose name begins with "PART_" because these are referred to from the
code that implements the control.
 Do not reset or change any bindings in the Properties panel. These are identified by a yellow highlight around
the property or by a yellow Advanced property option button.
 If the template includes a ContentPresenter or Presenter element (such as a ContentPresenter or ItemsPresenter

element), make sure to retain that element in the template. Presenter elements display content that is defined in
the control that will use the template.
To create a control template

1. Under Objects and Timeline or on the artboard, select the object from which you want to create a control
template and do one of the following:
 In the Object menu, point to Edit Control Parts (Template).
 Right-click the object under Objects and Timeline, point to Edit Control Parts (Template).
2. Point to Edit Template, and then do one of the following:
 To create a new empty template, click Create Empty.
 To create a new template based upon the template currently in use by the selected element (whether it is
the default template for the object, or a custom template previously created), click Edit a Copy.
Note:
If the Edit Template option is enabled, then a template is already applied to this object. You can choose to e
template .
The Create Style Resource dialog box appears. This is because control templates are stored in a style resource.
3. Under Resource name (Key), do one of the following:
 To create a new named style for the element, enter a key name. This is the name by which other elements
can reference the style, thus applying the template.
 To create a style that will be used by all elements of this type, select Apply to all.
Tip:
In the XAML for the style element that will be created, an attribute named TargetType will be set to the typ
element for which you are creating the style. An x:Key attribute will only be set if you entered a key name
option above). The presence of an x:Key attribute only allows the style to be applied to elements that specif
by the key name. The absence of an x:Key attribute makes the style apply to all elements of this type. For e
style element below will not be applied to all buttons on the artboard.
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"...

4. Under Define in, select the option where you want the style to be defined:
 To make the style available to any document in your application, select Application.
 To make the style available only to the current document, select This document (Window: Window)
 To define the style in a resource dictionary file that can be reused in other projects, select Resource
dictionary. You can then select an existing resource dictionary file or create a New one.
Note:
Resource dictionaries are not supported in Silverlight 2.
5. Click OK to exit the dialog box and open the style for editing.
Tip:
You are effectively creating a new template resource inside a style. This will become a local resource and can be
viewed and modified easily using the Resources panel.
7. Modify your template by adding or rearranging child elements or adding your property triggers in the Interaction
panel. Follow the cautions above if you are modify the template of a system control.
8. To exit the editing scope of the style, click the Scope Up button under Objects and Timeline. This returns you
to the editing scope of the document.
Tip:
Notice that once you create or apply a style resource to an object, a green highlight appears in the Properties pane
the Style property of the selected object to indicate that the object is now bound, or linked, to this style resource.
Back to top
To edit the template of an object that is drawn on the

artboard
 On the artboard or under Objects and Timeline, click an object to select it, and then do one of the following:
 In the Object menu, point to Edit Control Parts (Template), and then click Edit Template.
 Right-click the object under Objects and Timeline, point to Edit Control Parts (Template), and then click
Edit Template.
 In the Properties panel, click the Style property (it should be highlighted in green since you've applied a
style to this element previously), and then click Edit Resource in the shortcut menu. Once in the editing
scope of the style, right-click the Style object under Objects and Timeline, point to Edit Control Parts
(Template), and then click Edit Template.
Note:
If the Edit Template option is disabled, then no template has been applied to the object.
Microsoft Expression Blend enters the editing scope for the template.
Back to top
To edit a template resource

 In the Resources panel, locate your resource name, and then click the Edit Resource button next to the name.
Expression Blend enters the editing scope for the template.
Back to top
To modify a template
1. While in the editing scope for a template, add your property triggers in the Interaction panel, or add child
elements to the template. Follow the cautions above if you are modify the template of a system control.
2. To exit the editing scope of the template, click the Scope Up button under Objects and Timeline.
This returns you to the editing scope of the document.
Tip:
Notice that once you create or apply a template resource to an object, a green highlight appears in the Properties p
for the Style property of the selected object to indicate that the object is now bound, or linked, to this style resour
Back to top
See also
Concepts

Navigate the style hierarchy using the breadcrumb bar
When you are in the editing scope of a style or template in Expression Blend 2, a breadcrumb navigation bar appears at
the upper left of the artboard.
The breadcrumb bar appears for any selected object that can have a custom style or template applied to it.
To navigate the style hierarchy using the breadcrumb

bar
 By clicking the buttons on the breadcrumb bar, you can quickly move through template-editing mode, style-
editing mode, and object-editing scope for the selected object.
To create a style or template resource by using the

breadcrumb bar
1. Select an object on the artboard or under Objects and Timeline that supports styles and templates. For example,
select a button.
2. At the top of the artboard, select the breadcrumb button that appears.
Note:
If the object does not support styles or templates, the breadcrumb button for the object is unavailable.
3. From the pop-up menu that appears below the breadcrumb, select which kind of resource to create.
For information about how to create styles and templates, see Create a style resource, Create or edit a control
template, and see the section on "The difference between styles and templates" in the Style and template
overview.
Simple styles
Simple styles are a set of custom, ready-to-use style resources for a set of common system controls, such as the Button
and ListBox controls. The simple styles are contained in a resource dictionary that is not visible in the Resources panel
until you draw a simple style from the Asset Library on the artboard. Expression Blend provides these simple style
resources because modifying the style of a system control requires some knowledge of Windows Presentation
Foundation (WPF) styles and templates in order to not break the functionality of the control.
Note:
The Expression Blend simple styles are not available in Microsoft Silverlight 1.0 projects, but you can create
JavaScript classes to define reusable controls. For an example, see the Button class in the ButtonGallery sample that is
available from the Samples tab in the Welcome Screen (on the Help menu). For more information, see the Silverlight
learning center.
In This Section
Conceptual
SimpleButton
SimpleCheckBox
SimpleExpander
SimpleProgressBar
SimpleScrollBar
SimpleScrollViewer
SimpleSlider
Try it
See also
Concepts
Styles and templates

Resources
Microsoft Expression Blend enables you to go above and beyond simply working with default or system controls as
you design the user interface (UI) for your application. Instead, you can actually customize and style controls to your
liking to make them perform the way you want and—through the use of resources in Expression Blend—give them a
unique, attractive look to differentiate your application from others as a way to create a highly branded experience or
to create a consistent UI across all of your applications.
Note:
The Expression Blend simple styles are not available in Microsoft Silverlight 1.0 projects, but you can create
JavaScript classes to define reusable controls. For an example, see the Button class in the ButtonGallery sample that is
available from the Samples tab in the Welcome Screen (on the Help menu). For more information, see the Silverlight
learning center.
What are simple styles?

Simple styles are a set of custom, ready-to-use style resources for a set of common system controls, such as the Button
and ListBox controls. Expression Blend provides these simple style resources because modifying the style of a system
control requires some knowledge of Windows Presentation Foundation (WPF) styles and templates in order to not
break the functionality of the control. You can use the simple styles in Expression Blend as a self-contained set of
resources that you can quickly modify to create a unique look for your application, without having to start with an
understanding of WPF styles and templates.
Back to top
Creating a simple style control

Simple styles are available in the Asset Library, on the Controls tab, by clicking Simple Styles. Select the Show All
check box to see all of the available simple styles. After you select a simple style from the Asset Library, the icon for
the simple style appears above the Asset Library button and is selected, ready to be drawn on the artboard. When
you draw a simple style (such as the SimpleButton) onto the artboard, you actually create an instance of the system
control (such as the Button), but with the SimpleButton style applied to it.
If you want the simple styles to be applied to the tools that are available in the drop-down lists for some of the tools in
the Toolbox, you can click the Use as Default button in the Asset Library when Simple Styles is selected on the
Controls tab.
The Asset Library showing the available simple style controls, and the option to make them the default styles
The following table lists the available simple styles and the controls to which they apply.
Control to
Simple style which it Icon
applies
SimpleButton Button
SimpleCheckBox CheckBox
SimpleComboBox ComboBox
SimpleComboBoxItem ComboBoxItem
SimpleExpander Expander
SimpleLabel Label
SimpleListBox ListBox
SimpleListBoxItem ListBoxItem
SimpleMenu Menu
SimpleMenuItem MenuItem
SimpleProgressBar ProgressBar
SimpleRadioButton RadioButton
RepeatButton
SimpleRepeatButton in a ListBox
control
SimpleScrollBar ScrollBar
RepeatButton
SimpleScrollBarRepeatButtonStyle in a ScrollBar
control
SimpleScrollViewer ScrollViewer
Separator in a
ListBox, Menu,
SimpleSeparator
or ToolBar
control
SimpleSlider Slider
Thumb in a
SimpleSliderThumb
Slider control
SimpleTabControl TabControl
TabItem in a
SimpleTabItem
TabControl
SimpleTextBox TextBox
Thumb in a
SimpleThumbStyle ScrollBar in a
ListBox control
SimpleTreeView TreeView
TreeViewItem
SimpleTreeViewItem in a TreeView
control
ToggleButton
SimpleTreeViewItemToggleButton in a TreeView
control
Back to top
Modifying simple styles

The simple style resources are contained in a resource dictionary named SimpleStyles.xaml. After you add a simple
style to the artboard from the Toolbox, the SimpleStyles.xaml resource dictionary is added to your project, and all of
the simple style resources are visible in the Resources panel.
The SimpleStyles.xaml resource dictionary includes brush resources and other templates that are used by the simple
styles. You can make any of the following changes to the simple styles:
 Change the colors The colors that are used by all of the simple styles are stored as resources that you can
change. To change one of the color resources, click the down arrow button next to the color resource in the
Resources panel. For information about brushes, see Appearance overview.
Choosing to edit a brush resource in the Resources panel
 Change the style You can use the style of a control in Expression Blend to specify properties and triggers that
will be used as defaults by the control to which the style is applied. The properties (such as the background
brush color) will affect the control's appearance, and the triggers will affect how the control responds to property
changes and events. For example, the SimpleButton style includes a trigger for the IsMouseOver property such
that the button's appearance is changed when the user moves their mouse pointer over the control. The trigger
occurs when the IsMouseOver property changes from False to True. To change one of the simple styles, click
the Edit Resource button next to the simple style in the Resources panel.
Choosing to edit a style resource in the Resources panel
 Change the control template The template of a control defines its appearance by defining the child controls that
are contained within the control. For example, the control template for the SimpleTextBox element contains a
Grid element, which in turn contains a Border element, which contains a ScrollViewer element named
PART_ContentHost. The ScrollViewer element displays the content of the TextBox when the SimpleTextBox
style is applied to a TextBox on the artboard. Just like the style, you can set property and event triggers in the
control template.To change the control template for a simple style, click the Edit resource button next to the
simple style in the Resources panel, right-click the Style element that appears under Objects and Timeline, point
to Edit Control Parts (Template), and then click Edit Template.
Choosing to edit the control template when starting from the editing scope of the style
Tip:
Control templates are wrapped inside styles so that the style that is applied to a control includes both the appearan
(parts) and the behavior for the control. This is important to remember when choosing between Edit a Copy and E
Template.
For a detailed comparison between styles and templates, see Styles and templates. For specific information about
simple styles and examples of modifying the simple styles and control templates, see the topics listed under Reference
and Try it! in Simple styles.
Back to top
Applying a style resource to an existing control on the

artboard
The simple styles are resources that can be applied and managed like any other resource. For an example, see Apply a
style resource in this User Guide. For more information about resources, see Resources overview in this User Guide.
Back to top
SimpleButton
The button is a content control, which reacts to a Click event. You can place content in a button in Microsoft
Expression Blend by double-clicking the button and then drawing an element into it. If you want to place multiple
elements into the button, you need to first add in a layout panel such as a Grid or Canvas. A button also can display
text by default; you can edit the text by right-clicking the button, and then clicking Edit Text.
The artboard view of a SimpleButton control
Breaking down the control template

The SimpleButton control template consists of the following items:
 A Grid layout panel, which is used to hold the multiple child elements within the button. The Grid is also used
because it makes it easier for you to add more elements to the template. For example, if the root element was a
Border and you tried to add another element, the other element would replace the ContentPresenter element
because Border can only have a single child.
 A Border element, which is used because it includes a BorderThickness property that can be template-bound to
the BorderThickness property of the button control to which the template is applied.
 A ContentPresenter, which is used to display the Content property of the button to which the template is applied.
This element must be present to show the content of the button.
Objects view: The basic parts (template) of a SimpleButton control
Back to top
Property triggers used

Property triggers in the control template are used to make the control react to property changes. You can click the
items under Triggers in the Interaction panel to view the properties that are changed when a trigger is active. For
example, in the SimpleButton template, when the IsMouseOver property becomes True, the background of the Border
element changes color to the MouseOverBrush resource.
Back to top
Brushes used
The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleButton template:
 The Background property is set by using: the NormalBrush when no trigger is active;, the MouseOverBrush
when IsMouseOver is True; the PressedBrush when IsPressed is True; and the DisabledBackgroundBrush when
is IsEnabled is False.
 The Border property is set by using: the NormalBorderBrush when no trigger is active; the DefaultBorderBrush
when IsKeyboardFocused is True; the PressedBorderBrush when IsPressed is True; and the
DisabledBorderBrush when IsEnabled is False.
 The Foreground property is set by using the DisabledForegroundBrush when IsEnabled is False.
Back to top
Best practices and design guidelines

 In general, use a Grid control as the root of your template if you expect a designer to add further visual elements
to your control. Expression Blend looks for a layout panel like the Grid control and makes it active by default so
that new elements that are added to the artboard end up as child elements of the layout panel.
 Property triggers are used to change the look of the control depending on the user action, such as a button click.
Property triggers are preferred over event triggers because you need two event triggers (for example, for the
MouseDown and MouseUp events) to do the same job as one property trigger (for example, for the IsPressed
state). However, event triggers can be used to start an animation timeline for more complicated controls.
 In general, you will want to set a brush or visual change on the IsMouseOver, IsPressed, and IsEnabled (False)
states. In addition, you can use the IsKeyboardFocused state that is usually used to display a dotted line around
the control.
Back to top
See also
Concepts

In addition to using property triggers to change the appearance of a button depending on user interaction, in Microsoft
Expression Blend you can also apply a bitmap effect on each state.
To create bitmap effects on a button

1. Draw a SimpleButton on the artboard in Expression Blend.
Tip:
The simple style controls are available from the Simple Styles category of the Controls tab in the Asset Library
After you select a simple style control from the list, you can draw it on the artboard.
2. Right-click the button under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit
Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a Copy
instead of Edit Template, to create a new template and save it in the document. For more information about
creating a copy, see Create a resource.
Tip:
To exit the template-editing mode and return to the scope of your document: click the Scope up button , which
above the element tree in the Interaction panel.
To return to template editing mode for an existing template: under Objects and Timeline, right-click the element w
template you want to edit, point to Edit Control Parts (Template), and then click Edit Template.
3. In the editing scope of the control template, delete the Border child element of the Grid.
4. Double-click the Grid element to make it active so that you can add child elements.
5. Draw a Rectangle into the grid, and then set the Fill property to yellow under Brushes in the Properties panel.
6. Right-click the Rectangle element, point to Order, and then click Send to Back to layer it behind the
ContentPresenter element.
7. Round the edges of the Rectangle element, either by using the adorner that appears when you move your
mouse pointer over one of the two handles outside the upper left corner of the rectangle, or by using the
RadiusX and RadiusY properties under Appearance in the Properties panel.
8. With the Rectangle still selected, locate the BitmapEffect property in the Advanced section under
Appearance in the Properties panel. Click the drop-down arrow, and then click Bevel. Leave the BevelWidth
property set to 5, but change the other bevel properties until you achieve the effect that you want.
9. Under Triggers in the Interaction panel, click the IsMouseOver = True trigger, to activate trigger recording. In
the Properties panel, click the drop-down arrow next to the BitmapEffect property again, click Bevel, and then
change the BevelWidth property to 10.
A new line appears under Properties when active under Triggers, reflecting the property change that will occur
when the mouse moves over the button.
Tip:
You might have to adjust the windows of the Interaction panel to see all of the triggers and actions under Trigger
your mouse to resize the windows.
10. Under Triggers in the Interaction panel, click the IsPressed = True trigger to activate trigger recording, and then
in the Properties panel, click the drop-down arrow next to the BitmapEffect property again, click Bevel, and then
change the BevelWidth property to 2.
when the mouse clicks the button.
11. Click Default under Triggers in the Interaction panel, to turn off trigger recording.
12. Test your application (F5) to see the effects.
Tip:
Bitmaps effects are not hardware accelerated, so it is best to set an explicit value and not try to animate the values
using an event trigger and animation timeline.
See also
Concepts
SimpleButton
Add or remove a trigger
Triggers overview
Add a bitmap effect to an object
The SimpleButton does not animate the changes in its state. Instead, it sets a brush resource when there are state
changes. In Microsoft Expression Blend, you cannot animate from a brush resource to a color. The following
procedure shows you an alternative, by using property triggers to start animation timelines.
To animate a button
1. Draw a SimpleButton on the artboard of Expression Blend.
Tip:
Tip:
4. Double-click the Grid element to make it active, so that you can add child elements.
5. Draw a Rectangle into the grid.
6. Right-click the Rectangle element, point to Order, and then click Send to Back to layer it behind the
ContentPresenter element.
7. Set a new value for the Fill property of the rectangle under Brushes in the Properties panel. This will be the
default color of your button.
Tip:
The Border child element of the original template used template binding to bind the Fill property of the template
Background property of the control to which the template is applied. Template binding lets you use in your templ
some of the properties that are set on the control, and thus lets you create multiple buttons that have different
background colors but still use the same template. However, you cannot animate from a template bound property
specific color, which is why we set a default color for the Fill property in the template.
8. Under Triggers in the Interaction panel, click the IsMouseOver = True trigger to activate trigger recording.
Then, beside Actions when activating, click the Add new action button to add an animation timeline. If you
do not already have a timeline that you want to trigger when the mouse moves over the button, a Timeline
Needed window will appear. Click OK to create a new timeline and to begin recording.
Tip:
You might have to adjust the windows of the Interaction panel to see all of the triggers and actions under Trigger
your mouse to resize the windows.
9. Under Objects and Timeline, move the playhead to 1 second, and then set a new value for the Fill property
under Brushes in the Properties panel.
As soon as you change the Fill property, a keyframe appears on the timeline. You do not need to set a
keyframe at 0 seconds. The timeline will animate from the previous fill to the fill that is set at 1 second, when
the mouse pointer moves over the button.
10. Under Triggers in the Interaction panel, click the IsMouseOver = True trigger again to exit the animation
timeline and return to the recording mode for the trigger. Click the Add new action button beside Actions
when deactivating. Create or select the animation timeline that will run when the mouse pointer moves away
from the button. For example, you could use the previous timeline, but select the Stop method for the timeline.
11. If you like, you can create animation timelines for other states under Triggers.
See also
Concepts
SimpleButton
Add or remove a trigger
Triggers overview
Create simple animation
A rollover effect can be created in a button template by changing the appearance of your button depending on user
interaction. As an alternative to triggering an animation timeline or triggering property changes to produce a rollover
effect, you can use the following procedure to create multiple Grid panels to represent each state of the button, and
then toggle the Visibility properties of each Grid panel.
To create a rollover effect on a button

1. Draw a SimpleButton on the artboard in Microsoft Expression Blend.
Tip:
Tip:
4. Double-click the Grid element to make it active so that you can add child elements.
5. From the Toolbar, add three Grid controls into the Grid of the template. You can add them quickly by
double-clicking the Grid icon in the Toolbox, then right-clicking each Grid control under Objects and Timeline,
pointing to Auto Size, and then clicking Fill.
6. Right-click the ContentPresenter element, point to Order, and then click Bring to Front to layer the
ContentPresenter in front of the new Grid objects.
7. Under Objects and Timeline, rename the new grid objects to "Default", "Pressed", and "MouseOver"
respectively, by right-clicking each object and then clicking Rename.
8. To set up the trigger behavior, you need to make only one grid object visible per trigger. For example, with
Default selected under Triggers in the Interaction panel, click the Pressed and MouseOver grid objects while
holding down the CTRL key, to select those objects. Then, under Appearance in the Properties panel, set the
Visibility property to Hidden.
9. Click IsMouseOver = True under Triggers in the Interaction panel, select the Pressed and Default grid objects,
and then under Appearance in the Properties panel, set the Visibility property to Hidden.
10. Finally, with IsPressed = True selected under Triggers, select the MouseOver and Default grid objects, and then
under Appearance in the Properties panel, set the Visibility property to Hidden.
11. You can now design each grid object the way that you want it to appear under the different conditions. You can
use drawing tools and animation timelines to create unique behavior for your button. To design one of the grid
objects without the others being visible, you can click the Hide/Show button beside the other grid objects
under Objects and Timeline.
See also
Concepts
SimpleButton
SimpleCheckBox
The check box is a content control that acts as a toggle that can have three states: checked, unchecked, and
indeterminate. The IsChecked state indicates whether the check box is selected. You can place content in a check box
in Microsoft Expression Blend by double-clicking the check box and then drawing an element into it. If you want to
place multiple elements into the check box, you need to first add in a layout panel such as a Grid or Canvas. A check
box also can display text by default; you can edit the text by right-clicking the check box, and then clicking Edit Text.
The artboard view of a SimpleCheckBox control

The SimpleCheckBox control template consists of the following items:
 A BulletDecorator container, which is used to align the check box against the text. A BulletDecorator takes two
children: a bullet, and a content element (such as ContentPresenter). The BulletDecorator is used in other
controls (such as the RadioButton) that need to align text against another element.
 The Bullet element, which contains a Grid panel that in turn contains a Path element named CheckMark and a
Border element. The Path is used to draw an "x" mark.
 The ContentPresenter, which is used to display the Content property of the check box to which the template is
applied. This element must be present to show the content of the check box.
Objects view: The basic parts (template) of a SimpleCheckBox control
Back to top

example, in the SimpleCheckBox template, when the IsChecked property is False, the visibility of the CheckMark path
element is changed to Collapsed. In other triggers, you change the background of the Border element by using brush
resources.
Back to top
Brushes used
The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleCheckBox
template:
 The Background property of the Border element is set by using: the NormalBrush when no trigger is active; the
MouseOverBrush when IsMouseOver is True; the PressedBrush when IsPressed is True; and the
DisabledBackgroundBrush when is IsEnabled is False.
 The BorderBrush property is set by using: the NormalBorderBrush when no trigger is active; the
PressedBorderBrush when IsPressed is True; and the DisabledBorderBrush when IsEnabled is False.
 The Stroke property of the CheckMark element uses the GlyphBrush to draw the "x" mark.
Back to top

 In general, use a Grid control as the root of your template if you expect an application user interface (UI)
designer to add further visual elements to your control. Expression Blend looks for a layout panel like the Grid
control and makes it active by default so that new elements that are added to the artboard end up as child
elements of the layout panel.
 The content of the check box is shown by the ContentPresenter element. ContentPresenter elements
automatically bind the template to the Content property of the control to which the template is applied. This
element must be present for the check box to show the content from the templated parent.
 In some cases, the control you are working with will not have enough attributes to bind to in the control
template. For example, the CheckBox control does not provide an attribute to set the brush for the CheckMark
element. In this case, the stroke of the CheckMark is set to a brush so that it is easier to change. You can create a
custom class based on the CheckBox control and add more attributes to bind to, or you can bind to one of the
existing attributes. For an example of a custom class, see Try it: Create a custom WPF control in this User
Guide.
 The Grid element is a fixed size because you hide and show the CheckMark path element. If the Grid element
was not a fixed size, the text in the ContentPresenter would move when the check box selection changed. As an
alternative to a fixed Grid size and hiding the CheckMark path, you could change the Opacity of the Stroke
property on the CheckMark path object to 0.
Back to top
See also
Concepts
It is easy to customize the appearance of a check mark in Microsoft Expression Blend, by using the SimpleCheckBox
control template.
To customize the check mark in a SimpleCheckBox

1. Draw a SimpleCheckBox on the artboard in Expression Blend.
Tip:
2. Right-click the check box under Objects and Timeline, point to Edit Control Parts (Template), and then click
Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a
Copy instead of Edit Template, to create a new template and save it in the document. For more information
about creating a copy, see Create a resource.
Tip:
3. In the editing scope of the control template, expand all of the nodes under Objects and Timeline. Delete the
CheckMark path element.
4. Double-click the Grid element to make it active, so that you can add child elements.
5. Draw a path into the Grid element by using the Pen tool in the Toolbox. You can modify the path by using
the Direct Selection tool to adjust points on the path.
Tip:
To zoom in on the artboard, you can use the Zoom text box at the bottom of the artboard, or you can
the scroll button on your mouse while holding down the CTRL key.
Tip:
As an alternative to drawing a path element by using the Pen tool, you can use an art resource that is imported fro
Microsoft Expression Design 2, or an image file that has been added to your project.
6. When you deleted the CheckMark path element, the trigger that makes it appear and disappear was deleted as
well. To recreate the trigger, click IsChecked = False under Triggers in the Interaction panel. Under Objects and
Timeline, select the new check mark element, and then under Appearance in the Properties panel, set the
Visibility property to Collapsed.
See also
Concepts
SimpleCheckBox
The combo box is an items control in the form of a drop-down list. You can place content in a combo box in Microsoft
Expression Blend by double-clicking the combo box and then drawing an element (such as a SimpleComboBoxItem)
within it. Alternatively, you can right-click the combo box under Objects and Timeline, and then click Add
SimpleComboBoxItem to add individual items to the collection, or click Bind ItemsSource to Data to generate the
collection of ComboBoxItem elements from a data source. To view the combo box on the artboard while it is
expanded, you can right-click the combo box or combo box item under Objects and Timeline, and then click Expand
ComboBox.
The artboard view of a SimpleComboBox control after two items are added

The SimpleComboBox control template consists of the following items:
 A Grid panel, which is used to hold the multiple children within the combo box. The Grid is also used because it
makes it easier for an application user interface (UI) designer to add more elements to the template.
 A ContentPresenter element named ContentSite, which is contained within the Grid and which is used to show
the selected item.
 A textbox named PART_EditableTextBox, which is contained within the Grid and which allows the user to edit
text within the combo box. Because the name PART_EditableTextBox is used by the class to locate the text box,
you should not change it. By default, the text box is collapsed and is made visible when IsEditable is set to True
on the combo box to which this control template is applied.
 A pop-up toggle button control, which is used to create the expanding part of the combo box. The pop-up
control knows how to position itself relative to other controls, and renders on top of any other content. This
control also supports some built in animations.
 A Grid control that is contained within the pop-up control, and which contains a ScrollViewer that allows the list
of items to scroll. The StackPanel in the ScrollViewer positions each item. The IsItemsHost property of the
StackPanel is set to True so that the combo box control knows to position the child elements inside the
StackPanel. If you want to change the way in which your items are displayed, you can replace this layout panel
by right-clicking the drop-down grid under Objects and Timeline, and then selecting Change Layout Type to a
different panel such as a UniformGrid.
The SimpleComboBoxItem control template consists of the following items:
 A Grid panel, which is used to hold the multiple children within the combo box item. Also, a Grid is used
because it makes it easier for a designer to add more elements to the template.
the BorderThickness property of the button control to which this template is applied.
 A ContentPresenter element, which is contained within the Grid element and which is automatically bound to
the Content property of the item control to which this template is applied.
Objects view: The basic parts (template) of a SimpleComboBox control (left) and a SimpleComboBoxItem
control (right)
Back to top

example, in the template for the combo box, when the HasItems property is False, the minimum height of the
DropDownBorder element is set to 95 so that an empty drop-down window appears when the combo box is clicked. If
the minimum height was set to 0, a very tiny drop-down window would appear. In the template for the combo box
item, when the IsHighlighted property is True, the Background property of the Border element is changed to indicate
which item in the combo box is selected.
Back to top
Brushes used
The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleComboBox and
SimpleComboBoxItem templates:
 The Background property of the DropDownBorder element is set by using the WindowBackgroundBrush.
 The BorderBrush property of the DropDownBorder element is set by using the SolidBorderBrush.
 If the SimpleComboBox is populated with items that use the SimpleComboBoxItem template, the Background
property of the item is set by using the SelectedBackgroundBrush when an item is selected, and the Foreground
property is set by using the DisabledForegroundBrush if IsEnabled is False.
Back to top

 The expansion of the combo box is set by binding both the IsChecked property of the ToggleButton and the
IsOpen property of the pop-up to the IsDropDownOpen property of the combo box to which this control
template is applied. If you edit either the ToggleButton or the pop-up, you need to make sure you maintain this
template binding.
 The ToggleButton element uses a separate template named ToggleButtonControlTemplate. To modify this,
right-click the ToggleButton element, point to Edit Control Parts (Template), and then click Edit Template or
Edit Copy.
 To edit the SimpleComboBoxItem template, click the Edit resource button next to the SimpleComboBoxItem
style in the Resources panel. In the editing mode of the style, right-click Style under Objects and Timeline, point
to Edit Control Parts (Template), and then click Edit Template or Edit Copy. If you modify the
SimpleComboBoxItem template, you might want to preserve or modify the IsHighlighted trigger.
Back to top
See also
Concepts
It is easy to customize the appearance of the expander button in a combo box in Microsoft Expression Blend, by using
the ToggleButton control template of the SimpleComboBox.
To customize the expander button in a

SimpleComboBox
1. Draw a SimpleComboBox on the artboard in Expression Blend.
Tip:
2. Add an item to the combo box, by right-clicking the combo box under Objects and Timeline and then clicking
Add SimpleComboBoxItem.
3. Add one or two additional items to the combo box by repeating the preceding step.
4. Right-click ComboBox under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit
Tip:
5. In the editing scope of the control template, expand all of the nodes under Objects and Timeline.
6. Right-click the ToggleButton element under Objects and Timeline, point to Edit Control Parts (Template), and
then do one of the following:
 If you selected Edit Template in step 4, click Edit Template now to edit the ExpanderToggeButton control
template that is stored in SimpleStyles.xaml.
 If you selected Edit a Copy in step 4, click Edit a Copy now to create a copy of the ExpanderToggeButton
control template and store it in the same place as the template for the ComboBox.
The look of the expander button is designed in the ExpanderToggeButton control template. Note that the Grid in
the template extends the entire width of the combo box. This design enables the drop-down list to appear no
matter where the user clicks inside the combo box.
7. Select the Arrow element under Objects and Timeline to identify it on the artboard. The Arrow element is a Path
that represents the expander button for the ComboBox control.
You can modify the Arrow element by using the Direct Selection tool to adjust points on the path. Or, you
can delete the Arrow element and then create a new element by using the Pen tool in the Toolbox.
Tip:
Tip:
As an alternative to drawing a path element by using the Pen tool, you can use an art resource that you import fro
Microsoft Expression Design 2, or an image file that you add to your project.
8. The rollover effect when the expander button is clicked is defined by property triggers that change the
appearance of the Rectangle elements in the ToggleButton control template. You can add a new property change
to the existing triggers that will make your Arrow element rotate when the expander button is clicked. With your
Arrow element selected under Objects and Timeline, click IsChecked = True under Triggers in the Interaction
panel, and then click the Rotate tab under Transform in the Properties panel, and enter 180 in the Angle text box.
When a user clicks the expander button to expand the combo box, the Arrow element will rotate 180 degrees,
and will return to its original rotation when it is clicked again.
Tip:
When you have a property trigger selected under Triggers in the Interaction panel, any edits that you make anywh
in Expression Blend will set a value to be changed on that trigger condition. Make sure that the right trigger is sel
before you make your changes. If you want to make changes that affect the default state of the control template, c
Default under Triggers.
See also
Concepts
SimpleExpander
The expander is a headered content control that displays both a header and a collapsible window, which displays
content. You can title an expander in Microsoft Expression Blend by modifying the Header property. You can place
content in an expander by double-clicking the expander and then drawing an element into it. If you want to place
multiple elements into an expander, you need to first add in a layout panel such as a Grid or Canvas. An expander also
can display text by default; you can edit the text by right-clicking the expander, and then clicking Edit Text. To view
the expander on the artboard while it is expanded, you can right-click the expander under Objects and Timeline, and
then click Expand Expander.
The artboard view of a SimpleExpander control

The SimpleExpander control template consists of the following items:
 A Grid, which is a layout panel that is needed to hold the multiple children within the expander. The Grid is also
used because it makes it easier for an application user interface (UI) designer to add more elements to the
template. The Grid is divided into two areas: the Border area that represents the header, and the ExpandSite area
that represents the content.
the BorderThickness property of the expander control to which this template is applied.
 A ToggleButton element, which is contained within the Border element and which expands and collapses the
expander.
 A ContentPresenter element, which is contained within the Border element and which is automatically bound to
the Header property of the expander control to which this template is applied.
 A ContentPresenter under the ExpandSite area, which is used to display the Content property of the expander to
which this template is applied. Both ContentPresenter elements must be present to make the expander work as
expected.
Objects view: The basic parts (template) of a SimpleExpander control
Back to top

example, in the SimpleExpander template, when the IsExpanded property becomes True, the ExpandSite area becomes
visible.
Back to top
Brushes used
The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleExpander template:
 The Background property is set by using the LightBrush when no trigger is active, and by using the
DisabledBackgroundBrush when IsEnabled is False.
 The BorderBrush property is set by using the NormalBorderBrush when no trigger is active, and by using the
 The Background property of the Border element is set by using the NormalBrush when no trigger is active, .
 The Background property of the ExpandSite element is set by using the WindowBackgroundBrush when no
trigger is active.
 The BorderBrush property of the ExpandSite element is set by using the SolidBorderBrush when no trigger is
active.
Back to top

 Because the expander has two ContentPresenter elements (one for the header and one for the content), the
ContentPresenter in the header needs to be explicitly set to the class of the control. To do this, set the
ContentSource property of the ContentPresenter element (in the Border node of the template) to Header.
 The ToggleButton element uses a separate template named ExpanderToggleButton. To modify this, right-click
the ToggleButton element, point to Edit Control Parts (Template), and then click Edit Template or Edit Copy.
The ToggleButton is connected to the rest of the expander by a binding between IsChecked on the ToggleButton
and IsExpanded on the expander. For this property to be correctly updated, you need to keep this binding—the
two-way binding allows you to programmatically expand the expander.
 By default, the ExpandSite area is collapsed and is made visible by a trigger. Because the trigger references the
ExpandSite element by name, you need to also update the IsExpanded trigger if you change or replace the
ExpandSite element.
Back to top
The list box is an items control in the form of a scrollable list. You can place content in a list box in Microsoft
Expression Blend by double-clicking the list box and then drawing an element (such as a rectangle) into it.
Alternatively, you can right-click the list box under Objects and Timeline, and then click Add SimpleListBoxItem to
add individual items to the collection, or click Bind ItemsSource to Data to generate the collection of
SimpleListBoxItem elements from a data source. If you add individual items to the collection, you can reorder the
items by double-clicking the list box to make it active, and then dragging the items to change them to the desired
order. You can set which item is selected by using the SelectedIndex property of the list box.
The artboard view of a SimpleListBox control after two items are added

The SimpleListBox control template consists of the following items:
 A Grid panel, which is used to hold the multiple children within the list box. The Grid is also used because it
the BorderThickness property of the list box control to which this template is applied.
 A ScrollViewer element, which is used to allow the user of the application to scroll if the list is too long.
 A StackPanel, which is contained within the ScrollViewer element and which arranges the items. The
IsItemsHost property of the StackPanel is set to True to identify the ScrollViewer as the element that will
display the items of the list box control to which this template is applied. You can change the StackPanel to
another panel element by right-clicking the StackPanel element under Objects and Timeline, and then selecting
Change Layout Type to a different panel such as a UniformGrid.
The SimpleListBoxItem control template consists of the following items:
 A Grid panel, which is used to hold the multiple children within the list box item. Also, a Grid is used because it
makes it easier for a designer to add more elements to the template.
 A ContentPresenter element, which is contained within the Grid element and which is automatically bound to
the Content property of the item control to which this template is applied.
Objects view: The basic parts (template) of a SimpleListBox control (left) and a SimpleListBoxItem control
(right)
Back to top

example, in the template for the list box, when the IsSelected property of a list box item is True, the background color
of the item is changed. In the template for the list box item, when the IsHighlighted property is True, the Background
property of the Border element is changed to indicate which item in the list box is selected.
Back to top
Brushes used
The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleListBox and
SimpleListBoxItem templates:
 The Background property is set by using the WindowBackgroundBrush if no triggers are active, and is set by
using the DisabledBackgroundBrush if IsEnabled is False.
 The BorderBrush property is set by using the SolidBorderBrush if no triggers are active, and is set by using the
DisabledBorderBrush if IsEnabled is False.
 If the SimpleListBox is populated with items that use the SimpleListBoxItem template, the Background property
of the item is set by using the SelectedBackgroundBrush when an item is selected, and the Foreground property
is set by using the DisabledForegroundBrush if IsEnabled is False.
Back to top
See also
Concepts
It is easy to customize the appearance of a selected item in a list box in Microsoft Expression Blend, by using the
SimpleListBoxItem control template.
To change the look of the selected item in a

SimpleListBox
1. Draw a SimpleListBox on the artboard in Expression Blend.
Tip:
2. Add an item to the list box by right-clicking the list box under Objects and Timeline and then clicking Add
SimpleListBoxItem.
3. Right-click one of the list box items under Objects and Timeline, point to Edit Control Parts (Template), and
then click Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click
Edit a Copy instead of Edit Template to create a new template and save it in the document. For more
information about creating a copy, see Create a resource.
Tip:
4. Click IsSelected = True under Triggers in the Interaction panel. By default, the border background color is
changed when an item is selected, as you can see under Properties when active under Triggers. You can change
the background to a different color by clicking Border under Objects and Timeline, and then modifying the
Background property under Brushes in the Properties panel.
Tip:
When you have a property trigger selected under Triggers in the Interaction panel, any edits that you make anywh
in Expression Blend will set a value to be changed on that trigger condition. Make sure that the right trigger is sel
before you make your changes. If you want to make changes that affect the default state of the control template, c
Default under Triggers.
5. To add more items to the list box that use the template that you just modified, you can click the Scope up button
to return to the editing scope for your document, double-click the list box element to activate it, and then add
your custom style from the Local Styles tab of the Asset Library .
To change the look of the selected item by using the

ItemContainerStyle template
1. Draw a SimpleListBox on the artboard in Expression Blend.
Tip:
2. Add a few items to the list box by double-clicking the list box under Objects and Timeline to select it and then
drawing a Rectangle or other control into the list box on the artboard. Alternatively, you can right-click the
list box element and click Add SimpleListBoxItem.
Tip:
If you want to try data binding to automatically generate items for the list box, you can use the procedures in Try
Create an RSS news reader in this User Guide.
3. Click the ListBox object under Objects and Timeline. On the Object menu, point to Edit Other Styles, point to
Edit ItemContainerStyle, and then click Edit a Copy.
The Create Style Resource window appears. To learn more about the options in the Create Style Resource
window, see Create a resource. For the purposes of this procedure, accept the defaults and click OK.
Expression Blend enters the editing mode for the style of a ListBoxItem.
4. Templates are wrapped in style elements, so to edit the template of the ListBoxItem, right-click the Style
element under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template.
Note:
You click Edit Template here instead of Edit a Copy because control templates are wrapped in style elements and
clicked Edit a Copy in step 3 to create a copy of the style.
Expression Blend enters the editing scope of the ListBoxItemStyleTemplate—the template that the list box uses
for every item. Inside this template is a Border element named Bd, a ContentPresenter element, and two triggers
for the IsSelected state.
5. Under Triggers in the Interaction panel, click one of the IsSelected triggers to enter the recording mode for that
trigger, and then change the properties of the Bd element.
See also
Concepts
The menu is an items control that hierarchically organizes elements that are associated with commands and event
handlers. You can place content in a menu in Microsoft Expression Blend by double-clicking the menu and then
drawing an element (such as a rectangle) into it. Alternatively, you can right-click the menu under Objects and
Timeline, and then click Add SimpleMenuItem to add individual items to the collection, or click Bind ItemsSource to
Data to generate the collection of MenuItem elements from a data source. To add a second-level menu item, you can
right-click a menu item under Objects and Timeline and then click Add SimpleMenuItem, or add a custom menu item
from the Local Styles tab of the Asset Library .
You can edit the text of the menu item by right-clicking the menu item under Objects and Timeline and then clicking
Edit Text, or you can make the menu item active by double-clicking it and drawing a control into it. To view the child
menu items of a menu item on the artboard while they are expanded, you can right-click the parent menu item under
Objects and Timeline, and then click Expand MenuItem.
The artboard view of a SimpleMenu control after two items and a separator are added

The SimpleMenu control template consists of the following items:
 A Grid panel, which is used to hold the multiple children within the menu. The Grid is also used because it
the BorderThickness property of the menu control to which this template is applied.
 A StackPanel, which is contained within the Grid element and which is used to lay out the menu items. By
default, the Orientation property of the StackPanel is set to Horizontal.
The SimpleMenuItem control template consists of the following items:
 A Grid panel, which is used to hold the multiple children within the menu item. The Grid is also used because it
makes it easier for a designer to add more elements to the template. This Grid panel uses the concept of size
sharing, allowing each menu item to be the same width as all of the other menu items in the menu.
 A ContentPresenter element named Icon, which is bound to the Icon property of the menu item to which this
template is applied.
 A Grid panel named GlyphPanel which is used to display a check mark in case the menu item is a checkable
item. By default, the Glyph element is collapsed, but it is made visible by the IsChecked trigger.
 A ContentPresenter element named HeaderHost, which is bound to the Header property of the menu item to
which this template is applied. The binding is set in the ContentSource property of the HeaderHost element.
 A Grid panel named ArrowPanel, which is used to provide a way to expand the menu item. By default, the
ArrowPanel is collapsed, but it is made visible by the Role = SubmenuHeader trigger, which identifies the menu
item as a submenu header (a second-level or lower-level menu item that has child menu items).
 A Popup element named SubMenuPopup, which is used to hold any existing child menu items. These are placed
into a StackPanel element that is marked as the Items Host so that this menu item knows where to place its child
menu items. If you want a different arrangement of the menu items, you can use a different layout panel such as
a WrapPanel, by right-clicking the StackPanel element under Objects and Timeline, pointing to Change Layout
Type, and then selecting a panel.
Objects view: The basic parts (template) of a SimpleMenu control (on the left) and a SimpleMenuItem control
(on the right)
Back to top

example, in the template for the menu item, when the IsChecked property is True, it means that the menu item to
which the template is applied is checkable, so the GlyphPanel element is made visible by the trigger.
Back to top
Brushes used
The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleMenu and
SimpleMenuItem templates:
 The Background property of the menu is set by using the LightBrush, and is set by using the
 The BorderBrush property of the menu is set by using the NormalBorderBrush, and is set by using the
 The Background property of the SubMenuBorder element is set by using the WindowBackgroundBrush.
 The BorderBrush property of the SubMenuBorder element is set by using the SolidBorderBrush.
Additionally, the templates use bindings to system colors, which allow the controls to use the system defaults. In many
cases, you may want to change these brushes so that you can create a unique design. You can do this by editing the
Triggers that set the system colors.
Back to top

 The pop-up control renders on top of any other controls. This is usually desirable for a menu. The pop-up
control itself has logic that allows the offset from the parent control to be set, for example, by setting the
Placement property to "Right". In the case of a menu, the menu's expansion is controlled by a binding to the
parent control. For the menu to expand correctly you must keep the binding.
 The root Grid panel for the menu item template uses the concept of size sharing, allowing each menu item to be
the same width as all the other menu items in the menu. If you want to change this behavior, you need to modify
the SharedSizeGroup property in XAML view because Expression Blend does not display this property in the
Properties panel. In most cases, you do not need to modify the SharedSizeGroup because it allows the menu to
resize properly. As a best practice, you can change the look of the menu item by drawing elements into the root
Grid panel of the menu item template instead of rearranging the columns or their content.
 Some of the menu item template triggers work with a property called Role. Role is set depending on the level of
the menu item in the menu hierarchy. If you modify the menu item template, you might want to preserve the
role-based triggers. The template that is used by the actual system MenuItem control is considerably more
complex than SimpleMenuItem. The MenuItem control template uses a style to switch between different control
templates based on the role of the menu item. SimpleMenuItem uses a single template to achieve this, and is
thus easier to edit.
 To edit the SimpleMenuItem template, click the Edit resource button next to the SimpleMenuItem style in the
Resources panel. Then, in the editing mode of the style, right-click Style under Objects and Timeline, point to
Edit Control Parts (Template), and then click Edit Template or Edit Copy.
 For information about how to hook up a menu item to a Command, see the Menu Overview on MSDN.
Back to top
SimpleProgressBar
The progress bar is a simple control that an application can use to visually indicate the progress of a lengthy operation.
By default, the progress bar window is filled from left to right, as the operation progresses. The control has a range and
a current position. The SimpleProgressBar in Microsoft Expression Blend only supports a horizontally orientated
progress bar.
The artboard view of a SimpleProgressBar control after setting the Value property to 10

The SimpleProgressBar control template consists of the following items:
 A Grid layout panel, which is used to hold the multiple child elements within the progress bar. The Grid is also
template.
 A Border element named PART_Track, which is used to represent the bar area to be filled.
 A Border element named PART_Indicator, which is used to represent the bar area that has already been filled.
Caution:
Do not rename any element whose name begins with "PART_" because these elements are referred to from the co
that implements the control.
Objects view: The basic parts (template) of a SimpleProgressBar control
Back to top

The SimpleProgressBar control template does not use triggers. All control behavior is implemented in code.
Back to top
Brushes used
The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleProgressBar
template:
 The Background property of the PART_Track element is set by using the PressedBrush.
 The BorderBrush property of the PART_Track element is set by using the SolidBorderBrush.
 The Background property of the PART_Indicator element is set by using the MouseOverBrush.
 The BorderBrush property of the PART_Indicator element is set by using the NormalBorderBrush.
Back to top

 If you want, you can add triggers to the SimpleProgressBar template, or modify the PART_Indicator element to
make the bar look more interesting, but do not rename any element whose name begins with "PART_" because
these elements are referred to from the code that implements the control.
 For information about how to hook up a progress bar to the progress of an operation, see the documentation
about the ProgressBar Overview on MSDN.
Back to top
See also
Concepts
It is easy to customize the appearance of a progress indicator in Microsoft Expression Blend, by using the
SimpleProgressBar control template. Note that the SimpleProgressBar only supports a horizontally orientated progress
bar.
To customize the progress indicator of a

SimpleProgressBar
1. Draw a SimpleProgressBar on the artboard in Expression Blend.
Tip:
2. Right-click the progress bar under Objects and Timeline, point to Edit Control Parts (Template), and then click
Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit a
Copy instead of Edit Template to create a new template and save it in the document. For more information about
Tip:
above the element tree in the Interaction panel. To return to template editing mode for an existing template: under
Objects and Timeline, right-click the element whose template you want to edit, point to Edit Control Parts (Temp
and then click Edit Template.
3. Under Objects and Timeline, right-click the PART_Indicator element, point to Change Layout Type, and then
click Grid. Use your mouse on the artboard, or modify the Width property under Layout in the Properties panel,
to increase the width of the PART_Indicator.
4. Double-click the PART_Indicator element under Objects and Timeline to make it active.
You can now add child elements to the PART_Indicator element because it is active and because it is a Grid
panel instead of a Border.
5. In the Toolbox, double-click the Ellipse tool to add a circle into the PART_Indicator element and fill it. You
can see your circle if you change its width. Modify the color of the circle under Brushes in the Properties panel.
Adjust the size of the circle by using the properties under Layout in the Properties panel. Make sure that the
HorizontalAlignment property is set to Stretch .
6. If you want to apply a bitmap effect, click the Show Advanced Properties button for the Appearance category
of the Properties panel, click the drop-down arrow next to the BitmapEffect property, and then select an effect
such as Outer Glow.
7. In order to see your progress bar in action, you can add code to the code-behind file for your document. For
example, if your document is named Window1.xaml, the code-behind file is Window1.xaml.cs or
Window1.xaml.vb, depending on the programming language you selected when you created your project.
Under Objects and Timeline, click the Scope Up button to return to the editing scope of your document, and
then give your progress bar a name such as "ProgressBar1" (square brackets around the name indicate that an
element has not been named).
8. Open the code-behind file from the Project panel, and add the following code. For information about how to
open a code-behind file, see Edit a code-behind file.
C# Copy Code
// Insert code required on object creation below this point.
Duration duration = new Duration(System.TimeSpan.FromSeconds(10));
DoubleAnimation doubleanimation = new DoubleAnimation(ProgressBar1.Maximum, duration);
ProgressBar1.BeginAnimation(ProgressBar.ValueProperty, doubleanimation);
Visual Basic Copy Code

' Insert code required on object creation below this point.
Dim duration As New Duration(System.TimeSpan.FromSeconds(10))
Dim doubleanimation As New DoubleAnimation(ProgressBar1.Maximum, duration)
ProgressBar1.BeginAnimation(ProgressBar.ValueProperty, doubleanimation)
See also
Concepts
SimpleProgressBar
SimpleScrollBar
The scroll bar is a simple control that displays a marker on a bar in a position that depends on the Value property. You
can set the orientation of the scroll bar in Microsoft Expression Blend by using the Orientation property under Layout
in the Properties panel. You can set the Minimum, Maximum, and current Value of the scroll bar under Common
Properties in the Properties panel. The current value must be between the minimum and maximum values.
The Artboard view of a SimpleScrollBar control

The SimpleScrollBar control template consists of the following items:
 A Grid panel named GridRoot, which is used to hold the multiple child elements within the scroll bar. The Grid
is also used because it makes it easier for you to add more elements to the template. The Grid is split into three
rows where the top and bottom rows have maximum sizes set so that they will not expand beyond 18 pixels (or,
device-independent units which are approximately 1/96 inch), and the middle row is set to star (*) size which
means that it will expand when the window expands.
 Two RepeatButton elements named DecreaseRepeat and IncreaseRepeat, which are used to move the position
marker on the bar. The RepeatButton elements contain content that displays arrows. Again, a Grid is used as a
root for each of these so that the user can easily edit the Path elements (named DecreaseArrow and
IncreaseArrow) and add other content.
 A Track element named PART_Track, which is used to display a Thumb element along a bar. The exposed parts
of the bar double as RepeatButtons named PageDown and PageUp. Both of these use the
SimpleScrollRepeatButtonStyle template, which can be edited separately. The IncreaseRepeatButton and
DecreaseRepeatButton sections of the track use Command bindings so that they can call commands on the scroll
bar class. The Thumb element uses the SimpleThumbStyle template, which can be edited separately.
 A layout transform, which is used to display the slider bar in a horizontal orientation. This design makes it easier
to edit than having to remember to edit two different templates. However, there are cases when the two
orientations need to be sufficiently different that they require separate templates. In this case, you could use a
Setter in the <Style> element in XAML view of Expression Blend to switch the templates based on orientation.
You can find an example of this in the default template for the system ScrollBar control.
Caution:
Objects view: The basic parts (template) of a SimpleScrollBar control
Back to top

Property triggers in the control template are used to make the control react to property changes. You can click the item
under Triggers in the Interaction panel to view the properties that are changed when a trigger is active. For example, in
the SimpleScrollBar template, when the Orientation property is Horizontal, multiple properties are changed to reflect
the new orientation of the progress bar.
Back to top
Brushes used
The SimpleScrollBar template only uses one system brush resource for the Foreground property. Other brush resources
are referenced in the templates that the SimpleScrollBar uses, such as the SimpleRepeatButton, SimpleThumbStyle,
and SimpleScrollRepeatButtonStyle templates. You can modify the brushes that these templates use, to change the
look of the SimpleScrollBar, or you can create new templates.
Back to top

 You can apply the SimpleScrollBar template to the scroll bar that is used in the template for a ScrollViewer.
 Because the SimpleScrollBar template uses other templates, it can be tedious to walk through various levels of
templates to get to the one that you want to change. To edit templates directly, you can click the Edit resource
button next to the template name in the Resources panel. Then, in the editing mode of the style, right-click Style
under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit Template or Edit Copy.
Alternatively, it can be simpler to just delete the references to the subtemplates (reset the Style property under
Miscellaneous in the Properties panel), and design your template at the first level.
 In order for your control to work, you need to keep the command bindings that fire commands on the control’s
class and provide another way to make a contract between the control and the class that represents it. These
bindings are present in the Command properties of the IncreaseRepeat, DecreaseRepeat, PageUp, and
PageDown elements, and in the Orientation=Horizontal trigger.
 If you want, you can add triggers to the SimpleScrollBar template, or modify the elements in the PART_Track
element to make the bar look more interesting, but do not rename the PART_Track element or any of its child
elements because these elements are referred to from the code that implements the control. The PART_Track
element knows how to find its parts because they are placed under specific control headers:
Track.IncreaseRepeatButton, Track.DecreaseRepeatButton, and Track.Thumb. The Thumb is also a specific
Windows Presentation Foundation (WPF) control that knows how to be dragged.
Back to top
See also
Concepts
It is easy to customize the appearance of a scroll bar in Microsoft Expression Blend, by using the SimpleScrollBar
control template.
To customize the look of a SimpleScrollBar

1. Draw a SimpleScrollBar on the artboard in Expression Blend.
Tip:
2. Right-click the scroll bar under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit
instead of Edit Template to create a new template and save it in the document. For more information about
Tip:
3. Under Objects and Timeline, click the IncreaseRepeat element and set the Alpha attribute (identified by an A on
the right side of the color palette) of the Background and BorderBrush properties to 0 percent under Brushes in
the Properties panel.
4. Under Objects and Timeline, click the IncreaseArrow path element and then set the Stroke and Fill properties to
a white Solid color brush . For the Stroke property, you will first need to remove the binding by clicking the
Advanced property options button and then clicking Reset.
5. Right-click the IncreaseRepeat element under Objects and Timeline, point to Edit Control Parts (Template), and
then do one of the following:
 If you selected Edit Template in step 2, click Edit Template now to edit the SimpleRepeatButton control
template that is stored in SimpleStyles.xaml.
 If you selected Edit a Copy in step 2, click Edit a Copy now to create a copy of the SimpleRepeatButton
control template and store it in the same place as the template for the ScrollBar.
6. In the editing scope of the SimpleRepeatButton, delete the event triggers named IsMouseOver = True and
IsPressed = True under Triggers in the Interaction panel by selecting each trigger and then clicking the Delete
trigger button.
7. Return to the editing scope of the SimpleScrollBar template by doing one of the following things:
 If you are editing the Simple Styles.xaml document because you chose Edit Template in step 5, click the
tab for your main document (for example, the Window1.xaml tab) at the top of the artboard. Right-click
your ScrollBar element, point to Edit Control Parts (Template), and then click Edit Template to return to
the ScrollBar template you were editing before.
 If you are editing your main document, click the Scope up button .
8. Repeat the previous step for the DecreaseRepeat element.
9. Activate the GridRoot element by double-clicking it under Objects and Timeline, then click the Border control
in the Toolbox, and then draw a Border inside the GridRoot. Auto-size the new Border element by right-clicking
it under Objects and Timeline, pointing to Auto Size, and then clicking Fill.
10. With the new Border element still selected under Objects and Timeline, change the CornerRadius property under
Appearance in the Properties panel to 4,4,4,4. This will round the corners of the border.
11. Right-click the [Thumb] element under Objects and Timeline, point to Edit Control Parts (Template), and then
click Edit a Copy. In the editing scope of the ScrollBarStyle, click the Rectangle element, and then change the
Fill property to a dark gray Solid color brush , and set the left and right Margin properties to 2.
See also
Concepts
SimpleScrollBar
SimpleScrollViewer
The scroll viewer is a content control that displays its content in a scrollable area. You can place content in a scroll
viewer in Microsoft Expression Blend by double-clicking the scroll viewer and then drawing an element into it. If you
want to place multiple elements into the scroll viewer, you need to first add in a layout panel such as a Grid or Canvas.
A scroll viewer also can display text by default; you can edit the text by selecting the scroll viewer and then modifying
the Content property under Common Properties in the Properties panel. To position elements in the scroll viewer but
beyond the bounds of the scroll viewer, you need to manually set the positioning properties in the Advanced property
options under Layout in the Properties panel. The vertical scroll bar is visible by default. To make the horizontal scroll
bar appear, set the HorizontalScrollBarVisibility property to Visible.
The artboard view of a SimpleScrollViewer control

The SimpleScrollViewer control template consists of the following items:
 A Grid layout panel, which is used to hold the multiple child elements within the scroll viewer. The Grid is also
template. The row and column of the Grid panel that holds the ScrollContentPresenter is set to star (*) size so
that it expands as the scroll viewer is expanded. The row and column of the Grid panel that holds the scroll bars
are set to auto-size according to the size required by the scroll bars.
 A ScrollContentPresenter element, which is used to display the Content property of the scroll bar to which this
template is applied. This element must be present to show the content of the scroll bar.
 Two ScrollBar elements named PART_HorizontalScrollBar and PART_VerticalScrollBar, which are used to
scroll through the content. The scroll bars use the SimpleScrollBarStyle template by default.
Caution:
Objects view: The basic parts (template) of a SimpleScrollViewer control
Back to top

example, in the SimpleScrollViewer template, when the IsMouseOver property becomes True, the background of the
Border element changes color to the MouseOverBrush resource.
Back to top
Brushes used
The SimpleScrollViewer template does not use any brush resources in the SimpleStyles.xaml resource dictionary.
Instead, the Background property is template-bound to the Background property of the slider control to which the
template is applied.
Back to top

 The content of the SimpleScrollViewer is shown by a ScrollContentPresenter element that automatically binds
its content to the Content property of the ScrollViewer to which this template is applied. The
ScrollContentPresenter element must be present for the SimpleScrollViewer to show its content.
 The visibility of the scroll bars is controlled by the scroll viewer control because the template binds to the
properties that specify visibility. This binding allows the scroll bars to automatically hide or show as needed.
You can set the default for scroll bar visibility either on the scroll viewer control, or in its template.
 For the scroll viewer to work correctly, you need to keep all of the template bindings. Also note that the scroll
bars named PART_HorizontalScrollBar and PART_VerticalScrollBar must not be changed because these names
are used by the code in the control class.
 You can apply existing scroll bar templates to the scroll bars in the scroll viewer template by right-clicking the
scroll bars (named PART_HorizontalScrollBar and PART_VerticalScrollBar), pointing to Edit Control Parts
(Template), pointing to Apply Resource, and then clicking the name of the scroll bar template. Note that the
orientation of the template must match the orientation of the scroll bar.
Back to top
SimpleSlider
The slider is a simple control that lets a user select from a range of values by moving a Thumb control. By default, the
slider displays horizontally, but you can change it to vertical by setting the Orientation property under Common
Properties in the Properties panel of Microsoft Expression Blend. To set the value of a slider, use the Minimum,
Maximum, and Value properties.
The artboard view of a SimpleSlider control

The SimpleSlider control template consists of the following items:
 A Grid panel named GridRoot, which is used to hold the multiple child elements within the slider. The Grid is
also used because it makes it easier for an application user interface (UI) designer to add more elements to the
template. The GridRoot is split into three rows: the top row holds the TopTick element, the middle row holds the
Thumb element, and the bottom row holds the BottomTick element.
 Two TickBar elements named TopTick and BottomTick, which are used to show ticks on the slider. By default,
their Visibility property is set to Collapsed. The TickBar elements determine the number of tick marks to show
based on the properties that are set on the slider control to which this template is applied. The TickBar elements
do not provide an editable template, but you can set the brush they use to show the tick mark by setting the
Foreground property on the slider control (this TickBar is template-bound to the Foreground property of the
slider control).
 A Track element named PART_Track, which is used to display a Thumb element along a bar. The user can drag
the Thumb element. By default, the Thumb element uses the SimpleThumbStyle template, which you can edit.
 Two RepeatButton elements, which are contained within the PART_Track element and which allow the user to
click either side of the thumb to make larger changes to the slider value. You can specify the step value for these
changes in the LargeChange property of the slider (not the template). The step value that is specified by the
SmallChange property is used when the user moves the thumb by using the arrow keys.
 A layout transform, which is used to display the slider in a horizontal orientation. This design makes it easier to
edit, so that you don't have to remember to edit two different templates. However there are cases when the two
orientations need to be sufficiently different that they require separate templates. In this case, you could use a
Setter in the <Style> element in XAML view in Expression Blend to switch the templates based on orientation.
An example of this can be found in the default template for the system Slider control.
Caution:
Objects view: The basic parts (template) of a SimpleSlider control
Back to top

example, in the SimpleSlider template, triggers are used to make the TickBar elements appear based on the
TickPlacement property. This sets visibility on the TopTick and BottomTick elements. Horizontal and Vertical
orientation are also configured in the triggers of the SimpleSlider template. This applies a layout transform on the
slider that rotates it 90 degrees. Because the track automatically orientates itself, it is forced back so that it won't be
rotated twice.
Back to top
Brushes used
The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleSlider template:
 The Background property is set by using the LightBrush when no trigger is active, and is set by using the
 The BorderBrush property is set by using the NormalBorderBrush when no trigger is active, and is set by using
the DisabledBorderBrush when IsEnabled is False.
 The Foreground property of the TopTick element is set by using the GlyphBrush.
 The Fill property of the SimpleThumb template is set by using the NormalBrush, and the Stroke property is set
by using the NormalBorderBrush.
Back to top

 If you want, you can add triggers to the SimpleSlider template, or modify the PART_Track element to make the
slider look more interesting, but do not rename any element whose name begins with "PART_" because these
elements are referred to from the code that implements the control. The Thumb and repeat buttons need to be
placed in the correct elements within Track. The track control knows how to place the Thumb element based on
the Slider value. The repeat buttons use Command bindings to cause the value of the slider to increase or
decrease.
 When you edit the template of SimpelSlider, you can force the TickBar elements to appear by using the Triggers
area of the Interaction panel to select the appropriate trigger. For example, in the SimpleSlider template, when
TickPlacement is set to Both, both TickBar elements are shown by setting their Visibility property to Visible.
Back to top
See also
Concepts
It is easy to customize the appearance of a Thumb control in Microsoft Expression Blend, by using the SimpleSlider
control template.
To customize the Thumb element of a SimpleSlider

1. Draw a SimpleSlider on the artboard in Expression Blend.
Tip:
2. Right-click the slider under Objects and Timeline, point to Edit Control Parts (Template), and then click Edit
instead of Edit Template to create a new template and save it in the document. For more information about
Tip:
3. Right-click the [Thumb] element under Objects and Timeline, point to Edit Control Parts (Template), and then
click Edit a Copy.
4. By default, the Thumb template contains a Grid that has an Ellipse. Delete the Ellipse element.
5. Double-click the Grid element under Objects and Timeline so that you can add child elements to it.
6. Draw a path into the Grid element by using the Pen tool in the Toolbox. You can modify the path by using
the Direct Selection tool to adjust points on the path.
Tip:
Tip:
As an alternative to drawing a path element by using the Pen tool, you can use an art resource that you import fro
Microsoft Expression Design 2, or an image file that you add to your project.
See also
Concepts
SimpleSlider
The tab control is an items control that displays content in tabs. Typically, the child elements of a tab control are tab
items, which are headered content controls, each of which can have a header element and a content element. You can
place items in a tab control in Microsoft Expression Blend by right-clicking the tab control under Objects and
Timeline, and then clicking Add SimpleTabItem to add individual items to the collection, or by clicking Bind
ItemsSource to Data to generate the collection of tab item elements from a data source. .
You can edit the text of the tab item by right-clicking it under Objects and Timeline, and then clicking Edit Text, or
you can make the tab item active by double-clicking it and drawing a control into it.
The artboard view of a SimpleTabControl control after two SimpleTabItems are added

The SimpleTabControl control template consists of the following items:
 A Grid layout panel, which is used to hold the multiple child elements within the tab control. The Grid is also
template. The top row of the Grid uses auto-sizing so that it changes height with the size of the biggest tab item.
The bottom row uses star (*) sizing so that it takes up the remaining space to display the content of the tab item
(the PART_SelectedContentHost).
 A TabPanel element named HeaderPanel, which is a custom layout panel that knows how to organize tab items.
the BorderThickness property of the tab control to which this template is applied.
 A ContentPresenter element named PART_SelectedContentHost, which is used to display the Content property
of the tab control to which this template is applied.
The SimpleTabItem control template consists of the following items:
 A Grid layout panel, which is used to hold the multiple child elements within the tab control. The Grid is also
used because it makes it easier for an application UI designer to add more elements to the template. This Grid
panel uses the concept of size sharing, allowing each tab item to be the same width as all of the other tab items
in the tab control.
the BorderThickness property of the tab control to which this template is applied.
 A ContentPresenter element named ContentSite, which is bound to the Header property of the tab item to which
this template is applied. The binding is set in the ContentSource property of the ContentSite element.
Objects view: The basic parts (template) of a SimpleTabControl control (on the left) and a SimpleTabItem
control (on the right)
Back to top

example, in the template for the tab item, the trigger for IsSelected sets the ZIndex property on the tab item, which
forces it to the front. For this reason, this trigger needs to be kept if the tab item is to work correctly. The IsSelected
trigger also sets a thicker BorderThickness and changes the Background color to show that the item is selected.
Back to top
Brushes used
The following brush resources in the SimpleStyles.xaml resource dictionary are used by the SimpleTabControl and
SimpleTabItem templates:
 The Background property of the tab control is set by using the WindowBackgroundBrush when no trigger is
active.
 The BorderBrush property of the tab control is set by using the SolidBorderBrush when no trigger is active, and
is set by using the DisabledBorderBrush when IsEnabled is False.
 The Foreground property of the tab control is set by using the DisabledForegroundBrush when IsEnabled is
False.
 The Background property of the Border element of the tab item is set by using the LightBrush when no trigger is
active, is set by using the WindowBackgroundBrush when IsSelected is True, and is set by using the
 The BorderBrush property of the Border element of the tab item is set by using the SolidBorderBrush, and is set
by using the DisabledBorderBrush when IsEnabled is False.
 The Foreground property of the tab item is set by using the DisabledForegroundBrush when IsEnabled is False.
Additionally, the templates use bindings to system colors, which allow the controls to use the system defaults. In many
cases, you may want to change these brushes so you can create a unique design. You can do this by editing the triggers
that set the system colors.
Back to top

 The TabPanel element named HeaderPanel in the template is a specific layout panel used for TabControl. A
TabPanel knows how to lay out tab items in multiple rows, and how to layer them when a tab item is selected.
You can use a different layout container for the HeaderPanel, but you need to set its IsItemsHost property to
True.
 To edit the SimpleTabItem template, click the Edit resource button next to the SimpleTabItem style in the
Resources panel. Then, in the editing mode of the style, right-click Style under Objects and Timeline, point to
Edit Control Parts (Template), and then click Edit Template or Edit Copy.
 The control template for the system TabControl is considerably more complex than the SimpleTabControl. It
allows the TabPanel to be docked in different directions based on the Orientation property of the TabControl.
The SimpleTabControl ignores the Orientation property for simplicity, but if you want the TabPanel to be placed
in a different location you can edit the grid rows and columns.
 The ContentPresenter element that is named PART_SelectedContentHost should not be renamed because the
control’s class knows to look for this name as the place to show the tab item.
Back to top
See also
Concepts
Using the SimpleTabItem template makes it easy to customize the appearance of a tab control.
To add a bitmap effect to the SimpleTabItem

1. Draw a SimpleTabControl on the artboard. The SimpleTabControl includes two SimpleTabItem templates by
default.
Tip:
2. Right-click one of the tab items under Objects and Timeline, point to Edit Control Parts (Template), and then
click Edit Template. If you do not want to change the SimpleStyles.xaml resource dictionary, you can click Edit
a Copy instead of Edit Template, to create a new template and save it in the document. For more information
about creating a copy, see Create a resource.
Tip:
To exit the template-editing mode and return to the scope of your document: click the Scope up button, which
3. In the editing scope of the control template, select the Border element under Objects and Timeline, and then in
the advanced section of the Appearance category of the Properties panel, click the drop-down arrow beside
the BitmapEffect property, and click Bevel. By default, the BevelWidth property is 5.
4. In the Triggers panel, select the IsPressed state to turn on recording for the trigger. In the Properties panel, click
the drop-down arrow next to the BitmapEffect property again, click Bevel, and then change the BevelWidth
property to 25.
when the mouse moves clicks the tab item.
5. Click the Scope Up button to return to the editing scope of your document.
6. To apply the custom template to the other tab item in your tab control, right-click the other tab item under
Objects and Timeline, point to Edit Control Parts (Template), point to Apply Resource, and then click the name
of your custom template.
See also
Concepts

Silverlight 2 - Expression Blend - Styles and Templates

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Silverlight 2 - Expression Blend - Styles and Templates

Uploaded by

Copyright:

Available Formats

Styles and templates Page 1 of 65

Styles and templates

Working with simple styles

SimpleComboBox and SimpleComboBoxItem

SimpleListBox and SimpleListBoxItem

SimpleMenu and SimpleMenuItem

SimpleTabControl and SimpleTabItem

Apply a style resource

Restore the default style

Create or edit a control template

Navigate the style hierarchy using the breadcrumb bar

Try it: Add animation to a button

Try it: Create a rollover button

Try it: Customize the appearance of the check mark in a SimpleCheckBox

Try it: Customize the appearance of the expander button in a SimpleComboBox

Try it: Changing the look of the selected item in a SimpleListBox

Try it: Customize the progress indicator of a SimpleProgressBar

Try it: Customize the look of a SimpleScrollBar

Try it: Customize the Thumb element of a SimpleSlider

Try it: Customize the SimpleTabItem using a bitmap effect

Style and template overview

The difference between styles and templates

Characteristic Styles Templates

Using templates, you can modify

You can also modify the values of

When you modify a template, you

appear blue when it is a text property (in a text

Finally, you can specify the

You can enter the editing mode for

Using the menu

1. Under Objects and

2. Do one of the following:

2. On the Object menu, 3. Click Edit Template (if you

Using the Resources panel Tip:

You can apply an existing

1. Under Objects and 2. Do one of the following:

was created in 1. In the Resources panel,

Modifying styles and templates

Breadcrumb bar with template-editing mode selected

Simple styles and resource dictionaries

Create a style resource

To create a new style resource for a control

The Create Style Resource dialog box appears.

3. Under Resource name (Key), do one of the following:

<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"...

Breadcrumb bar with template-editing mode selected

Apply a style resource

Editing the style of a button

To edit the style of an object on the artboard

Expression Blend enters the editing scope for the style.

Breadcrumb bar with template-editing mode selected

To edit a style resource

Expression Blend enters the editing scope for the style.

Apply a style resource

or remove a trigger in this User Guide.

To apply an existing style resource to a control on the

To use a style resource to create a control on the

2. Drag the style resource to the artboard.

A control is added to the artboard with the style already applied.

Restore the default style

To restore the default style or template that is applied

Apply a style resource

Create or edit a control template