Working with simple styles
.png "This page applies to WPF projects only")
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.
.gif "Cc294894.7e183f1f-37d8-4dcb-980c-19a5d61ca087(en-us,Expression.10).gif")
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 .png "Cc294894.0224cabd-5da1-4e01-bddd-4a647401a098(en-us,Expression.10).png")
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
.png "Cc294894.7ac13e33-029a-4ce3-aa85-ca623b6b9caa(en-us,Expression.10).png")
The following table lists the available simple styles and the controls to which they apply.
Simple style |
Control to which it applies |
Icon |
|---|---|---|
SimpleButton |
Button |
.png "Cc294894.05df1779-a68f-436b-b834-a91b7995a3ec(en-us,Expression.10).png") |
SimpleCheckBox |
CheckBox |
.png "Cc294894.91bc7bff-27d2-4dfe-93ab-844f2952186f(en-us,Expression.10).png") |
SimpleComboBox |
ComboBox |
.png "Cc294894.b174a511-dd12-4a45-a986-034de7693de9(en-us,Expression.10).png") |
SimpleComboBoxItem |
ComboBoxItem |
|
SimpleExpander |
Expander |
.png "Cc294894.a9e00db8-c14d-404f-88cb-5f37a41bc783(en-us,Expression.10).png") |
SimpleLabel |
Label |
.png "Cc294894.a27042f1-4067-4239-b99a-8b2e4c223de0(en-us,Expression.10).png") |
SimpleListBox |
ListBox |
.png "Cc294894.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(en-us,Expression.10).png") |
SimpleListBoxItem |
ListBoxItem |
|
SimpleMenu |
Menu |
.png "Cc294894.015a263c-0b2b-4253-ac57-b86fcb8c9591(en-us,Expression.10).png") |
SimpleMenuItem |
MenuItem |
.png "Cc294894.82c89430-1209-4aa1-b534-cf1cedac74c7(en-us,Expression.10).png") |
SimpleProgressBar |
ProgressBar |
.png "Cc294894.1a4a4117-497e-4920-acaa-d84cb5a1ce83(en-us,Expression.10).png") |
SimpleRadioButton |
RadioButton |
.png "Cc294894.33646a24-f5a1-4b74-9496-e0aaddb922c6(en-us,Expression.10).png") |
SimpleRepeatButton |
RepeatButton in a ListBox control |
|
SimpleScrollBar |
ScrollBar |
.png "Cc294894.6513a026-499e-4296-8a67-7558b466bd33(en-us,Expression.10).png") |
SimpleScrollBarRepeatButtonStyle |
RepeatButton in a ScrollBar control |
|
SimpleScrollViewer |
ScrollViewer |
.png "Cc294894.5ca26a94-31cd-4fda-83c5-a9564b5b019d(en-us,Expression.10).png") |
SimpleSeparator |
Separator in a ListBox, Menu, or ToolBar control |
|
SimpleSlider |
Slider |
.png "Cc294894.bf689d92-3c74-4218-815c-e98c930ac189(en-us,Expression.10).png") |
SimpleSliderThumb |
Thumb in a Slider control |
|
SimpleTabControl |
TabControl |
.png "Cc294894.f13847cd-7fdf-4757-a648-d5ece98fcaea(en-us,Expression.10).png") |
SimpleTabItem |
TabItem in a TabControl |
|
SimpleTextBox |
TextBox |
.png "Cc294894.343296b4-5c7d-4145-84cc-91b08ba67a1b(en-us,Expression.10).png") |
SimpleThumbStyle |
Thumb in a ScrollBar in a ListBox control |
|
SimpleTreeView |
TreeView |
.png "Cc294894.39c99139-8723-49c9-a3e7-f99232d939cb(en-us,Expression.10).png") |
SimpleTreeViewItem |
TreeViewItem in a TreeView control |
|
SimpleTreeViewItemToggleButton |
ToggleButton 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
.png "Cc294894.64136c65-52bc-4225-a948-b1171634baca(en-us,Expression.10).png")
**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
.png "Cc294894.a6080791-03cf-43ae-9476-22d33e9d8ce4(en-us,Expression.10).png")
**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
.png "Cc294894.a64c8f57-1243-4482-87ad-b9d5aac62867(en-us,Expression.10).png")
Tip
Control templates are wrapped inside styles so that the style that is applied to a control includes both the appearance (parts) and the behavior for the control. This is important to remember when choosing between Edit a Copy and Edit 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