Export (0) Print
Expand All

Styling tips for WPF Simple Styles

This page applies to WPF projects only

Blend for Visual Studio 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 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.

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

Simple styles are available in the Assets panel, in the Styles category, by clicking Simple Styles. After you select a simple style from the Assets panel, the icon for the simple style appears underneath the Assets button 0d8b8d29-1af9-418f-8741-be3097d76eab 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.

The Assets panel showing the available simple style controls

7ac13e33-029a-4ce3-aa85-ca623b6b9caa

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

05df1779-a68f-436b-b834-a91b7995a3ec

SimpleCheckBox

CheckBox

91bc7bff-27d2-4dfe-93ab-844f2952186f

SimpleComboBox

ComboBox

b174a511-dd12-4a45-a986-034de7693de9

SimpleComboBoxItem

ComboBoxItem

SimpleExpander

Expander

a9e00db8-c14d-404f-88cb-5f37a41bc783

SimpleLabel

Label

a27042f1-4067-4239-b99a-8b2e4c223de0

SimpleListBox

ListBox

ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae

SimpleListBoxItem

ListBoxItem

SimpleMenu

Menu

015a263c-0b2b-4253-ac57-b86fcb8c9591

SimpleMenuItem

MenuItem

82c89430-1209-4aa1-b534-cf1cedac74c7

SimpleProgressBar

ProgressBar

1a4a4117-497e-4920-acaa-d84cb5a1ce83

SimpleRadioButton

RadioButton

33646a24-f5a1-4b74-9496-e0aaddb922c6

SimpleRepeatButton

RepeatButton in a ListBox control

SimpleScrollBar

ScrollBar

6513a026-499e-4296-8a67-7558b466bd33

SimpleScrollBarRepeatButtonStyle

RepeatButton in a ScrollBar control

SimpleScrollViewer

ScrollViewer

5ca26a94-31cd-4fda-83c5-a9564b5b019d

SimpleSeparator

Separator in a ListBox, Menu, or ToolBar control

SimpleSlider

Slider

bf689d92-3c74-4218-815c-e98c930ac189

SimpleSliderThumb

Thumb in a Slider control

SimpleTabControl

TabControl

f13847cd-7fdf-4757-a648-d5ece98fcaea

SimpleTabItem

TabItem in a TabControl

SimpleTextBox

TextBox

343296b4-5c7d-4145-84cc-91b08ba67a1b

SimpleThumbStyle

Thumb in a ScrollBar in a ListBox control

SimpleTreeView

TreeView

39c99139-8723-49c9-a3e7-f99232d939cb

SimpleTreeViewItem

TreeViewItem in a TreeView control

SimpleTreeViewItemToggleButton

ToggleButton in a TreeView control

The simple style resources are contained in a resource dictionary named SimpleStyles.xaml. After you add a simple style to the artboard from the Tools panel, 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 Setting colors, brushes, and masks.

    Choosing to edit a brush resource in the Resources panel

    64136c65-52bc-4225-a948-b1171634baca
  • Change the style   You can use the style of a control in 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 the mouse pointer over the control. The trigger occurs when the IsMouseOver property changes from False to True.

    To change one of the simple styles in the Resources panel, choose Simple Styles.xaml and then choose the Edit Resource button next to the simple style you want to edit.

  • 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 object contains a Grid object, which in turn contains a Border object, which contains a ScrollViewer object named PART_ContentHost. The ScrollViewer object 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 in the Objects and Timeline panel, point to Edit Template, and then click Edit Current.

    Choosing to edit the control template when starting from the editing scope of the style

    a64c8f57-1243-4482-87ad-b9d5aac62867
    Tip 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 Current.

For a detailed comparison between styles and templates, see Styling a control that supports templates.

The simple styles are resources that can be applied and managed like any other resource.

For an example, see Apply a style resource.

For more information about resources, see Creating reusable resources.

Show:
© 2014 Microsoft