12/19/13

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

.NET Framework 4.5 A ControlTemplate specifies the visual structure and visual behavior of a control. You can customize the appearance of a control by giving it a new ControlTemplate. When you create a ControlTemplate, you replace the appearance of an existing control without changing its functionality. For example, you can make the buttons in your application round instead of the default square shape, but the button will still raise the Click event. This topic explains the various parts of a ControlTemplate, demonstrates creating a simple ControlTemplate for a Button, and explains how to understand the control contract of a control so that you can customize its appearance. Because you create a ControlTemplate in XAML, you can change a control's appearance without writing any code. You can also use a designer, such as Microsoft Expression Blend, to create custom control templates. This topic shows examples in the XAML that customize the appearance of a Button and lists the complete example at the end of the topic. For more information about using Expression Blend, see Styling a control that supports templates. The following illustrations show a Button that uses the ControlTemplate that is created in this topic. A button that uses a custom control template

A button that uses a custom control template and has the mouse pointer over it

This topic contains the following sections. Prerequisites When You Should Create a ControlTemplate Changing the Visual Structure of a Control Changing the Appearance of a Control Depending on Its State Specifying the Behavior of a Control When It Transitions Between States Customizing Other Controls by Understanding the Control Contract Complete Example Related Topics

Prerequisites
This topic assumes that you understand how to create and use controls and styles as discussed in Controls. The concepts discussed in this topic apply to elements that inherit from the Control class, except for the UserControl. You cannot apply a ControlTemplate to a UserControl.

When You Should Create a ControlTemplate

Controls have many properties, such as Background, Foreground, and FontFamily, that you can set to specify different aspects of the control's appearance, but the changes that you can make by setting these properties are limited. For example, you can set the Foreground property to blue and FontStyle to italic on a CheckBox.
msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx 1/18

12/19/13

example, you can set the Foreground property to blue and FontStyle to italic on a CheckBox.

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

Without the ability to create a new ControlTemplate for controls, all controls in every WPF-based application would have the same general appearance, which would limit the ability to create an application with a custom look and feel. By default, every CheckBox has similar characteristics. For example, the content of the CheckBox is always to the right of the selection indicator, and the check mark is always used to indicate that the CheckBox is selected. You create a ControlTemplate when you want to customize the control's appearance beyond what setting the other properties on the control will do. In the example of the CheckBox, suppose that you want the content of the check box to be above the selection indicator and you want an X to indicate that the CheckBox is selected. You specify these changes in the ControlTemplate of the CheckBox. The following illustration shows a CheckBox that uses a default ControlTemplate. A CheckBox that uses the default control template

The following illustration shows a CheckBox that uses a custom ControlTemplate to place the content of the CheckBox above the selection indicator and displays an X when the CheckBox is selected. A CheckBox that uses a custom control template

The ControlTemplate for the CheckBox in this sample is relatively complex, so this topic uses a simpler example of creating a ControlTemplate for a Button.

Changing the Visual Structure of a Control

In WPF, a control is often a composite FrameworkElement objects. When you create a ControlTemplate, you combine FrameworkElement objects to build a single control. A ControlTemplate must have only one FrameworkElement as its root element. The root element usually contains other FrameworkElement objects. The combination of objects makes up the control's visual structure. The following example creates a custom ControlTemplate for the Button. The ControlTemplate creates the visual structure of the Button. This example does not change the button's appearance when you move the mouse pointer over it or click it. Changing the button's appearance when it is in a different state is discussed later in this topic. In this example, the visual structure consists of the following parts: A Border named R o o t E l e m e n tthat serves as the template's root FrameworkElement. A Grid that is a child of R o o t E l e m e n t . A ContentPresenter that displays the button's content. The ContentPresenter enables any type of object to be displayed. XAML < C o n t r o l T e m p l a t eT a r g e t T y p e = " B u t t o n " > < B o r d e rN a m e = " R o o t E l e m e n t " > < ! C r e a t et h eS o l i d C o l o r B r u s hf o rt h eB a c k g r o u n d a sa no b j e c te l e m m e n ta n dg i v ei tan a m es o i tc a nb er e f e r r e dt oe l s e w h e r ei nt h e c o n t r o l t e m p l a t e . > msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx

2/18

12/19/13

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

c o n t r o lt e m p l a t e . > < B o r d e r . B a c k g r o u n d > < S o l i d C o l o r B r u s hx : N a m e = " B o r d e r B r u s h "C o l o r = " B l a c k " / > < / B o r d e r . B a c k g r o u n d > < ! C r e a t eab o r d e rt h a th a sad i f f e r e n tc o l o r b ya d d i n gs m a l l e rg r i d .T h eb a c k g r o u n do f t h i sg r i di ss p e c i f i c i e db yt h eb u t t o n ' s B a c k g r o u n dp r o p e r t y . > < G r i dM a r g i n = " 4 "B a c k g r o u n d = " { T e m p l a t e B i n d i n gB a c k g r o u n d } " > < ! U s eaC o n t e n t P r e s e n t e rt od i s p l a yt h eC o n t e n to f t h eB u t t o n . > < C o n t e n t P r e s e n t e r H o r i z o n t a l A l i g n m e n t = " { T e m p l a t e B i n d i n gH o r i z o n t a l C o n t e n t A l i g n m e n t } " V e r t i c a l A l i g n m e n t = " { T e m p l a t e B i n d i n gV e r t i c a l C o n t e n t A l i g n m e n t } " M a r g i n = " 4 , 5 , 4 , 4 "/ > < / G r i d > < / B o r d e r > < / C o n t r o l T e m p l a t e >

Preserving the Functionality of a Control's Properties by Using TemplateBinding

When you create a new ControlTemplate, you still might want to use the public properties to change the control's appearance. The TemplateBinding markup extension binds a property of an element that is in the ControlTemplate to a public property that is defined by the control. When you use TemplateBinding, you enable properties on the control to act as parameters to the template. That is, when a property on a control is set, that value is passed on to the element that has the TemplateBinding on it. The following example repeats the part of the preceding example that uses the TemplateBinding markup extension to bind properties of elements that are in the ControlTemplate to public properties that are defined by the button. XAML < G r i dM a r g i n = " 4 "B a c k g r o u n d = " { T e m p l a t e B i n d i n gB a c k g r o u n d } " > < ! U s eaC o n t e n t P r e s e n t e rt od i s p l a yt h eC o n t e n to f t h eB u t t o n . > < C o n t e n t P r e s e n t e r H o r i z o n t a l A l i g n m e n t = " { T e m p l a t e B i n d i n gH o r i z o n t a l C o n t e n t A l i g n m e n t } " V e r t i c a l A l i g n m e n t = " { T e m p l a t e B i n d i n gV e r t i c a l C o n t e n t A l i g n m e n t } " M a r g i n = " 4 , 5 , 4 , 4 "/ > < / G r i d > In this example, the Grid has its Panel.Background property template bound to Control.Background. Because Panel.Background is template bound, you can create multiple buttons that use the same ControlTemplate and set the Control.Background to different values on each button. If Control.Background was not template bound to a property of an element in the ControlTemplate, setting the Control.Background of a button would have no impact on the button's appearance. Note that the names of the two properties do not need to be identical. In the preceding example, the Control.HorizontalContentAlignment property of the Button is template bound to the FrameworkElement.HorizontalAlignment property of the ContentPresenter. This enables the content of the button to be positioned horizontally. ContentPresenter does not have a property named H o r i z o n t a l C o n t e n t A l i g n m e n t , but
msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx 3/18

12/19/13

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

Control.HorizontalContentAlignment can be bound to FrameworkElement.HorizontalAlignment. When you template bind a property, be sure that the target and source properties are the same type. The Control class defines several properties that must be used by the control template to have an effect on the control when they are set. How the ControlTemplate uses the property depends on the property. The ControlTemplate must use the property in one of the following ways: An element in the ControlTemplate template binds to the property. An element in the ControlTemplate inherits the property from a parent FrameworkElement. The following table lists the visual properties inherited by a control from the Control class. It also indicates whether the default control template of a control uses the inherited property value or if it must be template bound. Property Background BorderThickness BorderBrush FontFamily FontSize FontStretch FontWeight Foreground HorizontalContentAlignment Padding VerticalContentAlignment Usage method Template binding Template binding Template binding Property inheritance or template binding Property inheritance or template binding Property inheritance or template binding Property inheritance or template binding Property inheritance or template binding Template binding Template binding Template binding

The table lists only the visual properties inherited from the Control class. Apart from the properties listed in the table, a control may also inherit the DataContext, Language, and TextDecorations properties from the parent framework element. Also, if the ContentPresenter is in the ControlTemplate of a ContentControl, the ContentPresenter will automatically bind to the ContentTemplate and Content properties. Likewise, an ItemsPresenter that is in the ControlTemplate of an ItemsControl will automatically bind to the Items and ItemsPresenter properties. The following example creates two buttons that use the ControlTemplate defined in the preceding example. The example sets the Background, Foreground, and FontSize properties on each button. Setting the Background property has an effect because it is template bound in the ControlTemplate. Even though the Foreground and FontSize properties are not template bound, setting them has an effect because their values are inherited. XAML < S t a c k P a n e l > < B u t t o n S t y l e = " { S t a t i c R e s o u r c en e w T e m p l a t e } " msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx

4/18

12/19/13

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

< B u t t o nS t y l e = " { S t a t i c R e s o u r c en e w T e m p l a t e } " B a c k g r o u n d = " N a v y "F o r e g r o u n d = " W h i t e "F o n t S i z e = " 1 4 " C o n t e n t = " B u t t o n 1 " / > < B u t t o nS t y l e = " { S t a t i c R e s o u r c en e w T e m p l a t e } " B a c k g r o u n d = " P u r p l e "F o r e g r o u n d = " W h i t e "F o n t S i z e = " 1 4 " C o n t e n t = " B u t t o n 2 "H o r i z o n t a l C o n t e n t A l i g n m e n t = " L e f t " / > < / S t a c k P a n e l > The preceding example produces output that is similar to the following illustration. Two buttons with different background colors

Changing the Appearance of a Control Depending on Its State

The difference between a button with its default appearance and the button in the preceding example is that the default button subtly changes when it is in different states. For example, the default button's appearance changes when the button is pressed, or when the mouse pointer is over the button. Although the ControlTemplate does not change the functionality of a control, it does change the control's visual behavior. A visual behavior describes the control appearance when it is in a certain state. To understand the difference between the functionality and visual behavior of a control, consider the button example. The button's functionality is to raise the Click event when it is clicked, but the button's visual behavior is to change its appearance when it is pointed to or pressed. You use VisualState objects to specify the appearance of a control when it is in a certain state. A VisualState contains a Storyboard that changes the appearance of the elements that are in the ControlTemplate. You do not have to write any code to make this occur because the control's logic changes state by using the VisualStateManager. When the control enters the state that is specified by the VisualState.Name property, the Storyboard begins. When the control exits the state, the Storyboard stops. The following example shows the VisualState that changes the appearance of a Button when the mouse pointer is over it. The Storyboard changes the button's border color by changing the color of the B o r d e r B r u s h . If you refer to the ControlTemplate example at the beginning of this topic, you will recall that B o r d e r B r u s his the name of the SolidColorBrush that is assigned to the Background of the Border. XAML < ! C h a n g et h eb o r d e ro ft h eb u t t o nt or e dw h e nt h e m o u s ei so v e rt h eb u t t o n . > < V i s u a l S t a t ex : N a m e = " M o u s e O v e r " > < S t o r y b o a r d > < C o l o r A n i m a t i o nS t o r y b o a r d . T a r g e t N a m e = " B o r d e r B r u s h " S t o r y b o a r d . T a r g e t P r o p e r t y = " C o l o r " T o = " R e d "/ > < / S t o r y b o a r d > < / V i s u a l S t a t e > The control is responsible for defining the states as part of its control contract, which is discussed in detail in Customizing
msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx 5/18

12/19/13

The control is responsible for defining the states as part of its control contract, which is discussed in detail in Customizing Other Controls by Understanding the Control Contract later in this topic. The following table lists the states that are specified for the Button. VisualState Name Normal MouseOver Pressed Disabled Focused Unfocused VisualStateGroup Name CommonStates CommonStates CommonStates CommonStates FocusStates FocusStates Description The default state. The mouse pointer is positioned over the control. The control is pressed. The control is disabled. The control has focus. The control does not have focus.

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

The Button defines two state groups: the C o m m o n S t a t e sgroup contains the N o r m a l ,M o u s e O v e r ,P r e s s e d , and D i s a b l e d states. The F o c u s S t a t e sgroup contains the F o c u s e dand U n f o c u s e dstates. States in the same state group are mutually exclusive. The control is always in exactly one state per group. For example, a Button can have focus even when the mouse pointer is not over it, so a Button in the F o c u s e dstate can be in the M o u s e O v e r ,P r e s s e d , or N o r m a lstate. You add VisualState objects to VisualStateGroup objects. You add VisualStateGroup objects to the VisualStateManager.VisualStateGroups attached property. The following example defines the VisualState objects for the N o r m a l ,M o u s e O v e r , and P r e s s e dstates, which are all in the C o m m o n S t a t e sgroup. The Name of each VisualState matches the name in the preceding table. The D i s a b l e dstate and the states in the F o c u s S t a t e sgroup are omitted to keep the example short, but they are included in the entire example at the end of this topic. Note Be sure to set the VisualStateManager.VisualStateGroups attached property on the root FrameworkElement of the ControlTemplate. XAML < C o n t r o l T e m p l a t eT a r g e t T y p e = " B u t t o n " > < B o r d e rN a m e = " R o o t E l e m e n t " > < V i s u a l S t a t e M a n a g e r . V i s u a l S t a t e G r o u p s > < ! D e f i n et h es t a t e sa n dt r a n s i t i o n sf o rt h ec o m m o ns t a t e s . T h es t a t e si nt h eV i s u a l S t a t e G r o u pa r em u t u a l l ye x c l u s i v et o e a c ho t h e r . > < V i s u a l S t a t e G r o u pN a m e = " C o m m o n S t a t e s " > < ! T h eN o r m a ls t a t ei st h es t a t et h eb u t t o ni si n w h e ni ti sn o ti na n o t h e rs t a t ef r o mt h i sV i s u a l S t a t e G r o u p . > < V i s u a l S t a t eN a m e = " N o r m a l "/ > < ! C h a n g et h eS o l i d C o l o r B r u s h ,B o r d e r B r u s h ,t or e dw h e nt h e m o u s ei so v e rt h eb u t t o n . > < V i s u a l S t a t eN a m e = " M o u s e O v e r " > < S t o r y b o a r d > < C o l o r A n i m a t i o nS t o r y b o a r d . T a r g e t N a m e = " B o r d e r B r u s h " S t o r y b o a r d . T a r g e t P r o p e r t y = " C o l o r " T o = " R e d "/ >

msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx

6/18

12/19/13

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

T o = " R e d "/ >

< / S t o r y b o a r d > < / V i s u a l S t a t e > < ! C h a n g et h eS o l i d C o l o r B r u s h ,B o r d e r B r u s h ,t oT r a n s p a r e n tw h e nt h e b u t t o ni sp r e s s e d . > < V i s u a l S t a t eN a m e = " P r e s s e d " > < S t o r y b o a r d > < C o l o r A n i m a t i o nS t o r y b o a r d . T a r g e t N a m e = " B o r d e r B r u s h " S t o r y b o a r d . T a r g e t P r o p e r t y = " C o l o r " T o = " T r a n s p a r e n t " / > < / S t o r y b o a r d > < / V i s u a l S t a t e > < ! T h eD i s a b l e ds t a t ei so m i t t e df o rb r e v i t y . > < / V i s u a l S t a t e G r o u p > < / V i s u a l S t a t e M a n a g e r . V i s u a l S t a t e G r o u p s > < B o r d e r . B a c k g r o u n d > < S o l i d C o l o r B r u s hx : N a m e = " B o r d e r B r u s h "C o l o r = " B l a c k " / > < / B o r d e r . B a c k g r o u n d > < G r i dB a c k g r o u n d = " { T e m p l a t e B i n d i n gB a c k g r o u n d } "M a r g i n = " 4 " > < C o n t e n t P r e s e n t e r H o r i z o n t a l A l i g n m e n t = " { T e m p l a t e B i n d i n gH o r i z o n t a l C o n t e n t A l i g n m e n t } " V e r t i c a l A l i g n m e n t = " { T e m p l a t e B i n d i n gV e r t i c a l C o n t e n t A l i g n m e n t } " M a r g i n = " 4 , 5 , 4 , 4 "/ > < / G r i d > < / B o r d e r > < / C o n t r o l T e m p l a t e > The preceding example produces output that is similar to the following illustrations. A button that uses a custom control template in the normal state

A button that uses a custom control template in the mouse over state

A button that uses a custom control template in the pressed state

To find the visual states for controls that are included with WPF, see Control Styles and Templates.

Specifying the Behavior of a Control When It Transitions Between States

In the preceding example, the appearance of the button also changes when the user clicks it, but unless the button is pressed for a full second, the user does not see the effect. By default, the animation takes one second to occur. Because users are likely to click and release a button in much less time, the visual feedback will not be effective if you leave the ControlTemplate in its default state.
msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx 7/18

12/19/13

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

You can specify the amount of time that it takes an animation to occur to smoothly transition a control from one state to another by adding VisualTransition objects to the ControlTemplate. When you create a VisualTransition, you specify one or more of the following: The time it takes for a transition between states to occur. Additional changes in the control's appearance that occur at the time of the transition. Which states the VisualTransition is applied to.

Specifying the Duration of a Transition

You can specify how long a transition takes by setting the GeneratedDuration property. The preceding example has a VisualState that specifies that the button's border becomes transparent when the button is pressed, but the animation takes too long to be noticeable if the button is quickly pressed and released. You can use a VisualTransition to specify the amount of time it takes the control to transition into the pressed state. The following example specifies that the control takes one hundredth of a second to go into the pressed state. XAML < ! T a k eo n eh u n d r e d t ho fas e c o n dt ot r a n s i t i o nt ot h e P r e s s e ds t a t e . > < V i s u a l T r a n s i t i o nT o = " P r e s s e d " G e n e r a t e d D u r a t i o n = " 0 : 0 : 0 . 0 1 "/ >

Specifying Changes to the Control's Appearance During a Transition

The VisualTransition contains a Storyboard that begins when the control transitions between states. For example, you can specify that a certain animation occurs when the control transitions from the M o u s e O v e rstate to the N o r m a lState. The following example creates a VisualTransition that specifies that when the user moves the mouse pointer away from the button, the button's border changes to blue, then to yellow, then to black in 1.5 seconds. XAML < ! T a k eo n ea n dah a l fs e c o n d st ot r a n s i t i o nf r o mt h e M o u s e O v e rs t a t et ot h eN o r m a ls t a t e . H a v et h eS o l i d C o l o r B r u s h ,B o r d e r B r u s h ,f a d et ob l u e , t h e nt oy e l l o w ,a n dt h e nt ob l a c ki nt h a tt i m e . > < V i s u a l T r a n s i t i o nF r o m = " M o u s e O v e r "T o = " N o r m a l " G e n e r a t e d D u r a t i o n = " 0 : 0 : 1 . 5 " > < S t o r y b o a r d > < C o l o r A n i m a t i o n U s i n g K e y F r a m e s S t o r y b o a r d . T a r g e t P r o p e r t y = " C o l o r " S t o r y b o a r d . T a r g e t N a m e = " B o r d e r B r u s h " F i l l B e h a v i o r = " H o l d E n d "> < C o l o r A n i m a t i o n U s i n g K e y F r a m e s . K e y F r a m e s > < L i n e a r C o l o r K e y F r a m eV a l u e = " B l u e " K e y T i m e = " 0 : 0 : 0 . 5 "/ > < L i n e a r C o l o r K e y F r a m eV a l u e = " Y e l l o w " K e y T i m e = " 0 : 0 : 1 "/ >

msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx

8/18

12/19/13

K e y T i m e = " 0 : 0 : 1 "/ > < L i n e a r C o l o r K e y F r a m eV a l u e = " B l a c k " K e y T i m e = " 0 : 0 : 1 . 5 "/ >

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

< / C o l o r A n i m a t i o n U s i n g K e y F r a m e s . K e y F r a m e s > < / C o l o r A n i m a t i o n U s i n g K e y F r a m e s > < / S t o r y b o a r d > < / V i s u a l T r a n s i t i o n >

Specifying When a VisualTransition Is Applied

A VisualTransition can be restricted to apply to only certain states, or it can be applied any time the control transitions between states. In the preceding example, the VisualTransition is applied when the control goes from the M o u s e O v e r state to the N o r m a lstate; in the example before that, the VisualTransition is applied when the control goes into the P r e s s e dstate. You restrict when a VisualTransition is applied by setting the To and From properties. The following table describes the levels of restriction from most restrictive to least restrictive. Type of restriction From a specified state to another specified state From any state to a specified state From a specified state to any state From any state to any other state Value of From The name of a VisualState Not set The name of a VisualState Not set Value of To The name of a VisualState The name of a VisualState Not set Not set

You can have multiple VisualTransition objects in a VisualStateGroup that refer to the same state, but they will be used in the order that the previous table specifies. In the following example, there are two VisualTransition objects. When the control transitions from the P r e s s e dstate to the M o u s e O v e rstate, the VisualTransition that has both From and To set is used. When the control transitions from a state that is not P r e s s e dto the M o u s e O v e rstate, the other state is used. XAML < ! T a k eo n eh a l fs e c o n dt ot r a s i t i o nt ot h eM o u s e O v e rs t a t e . > < V i s u a l T r a n s i t i o nT o = " M o u s e O v e r " G e n e r a t e d D u r a t i o n = " 0 : 0 : 0 . 5 "/ > < ! T a k eo n eh u n d r e d t ho fas e c o n dt ot r a n s i t i o nf r o mt h e P r e s s e ds t a t et ot h eM o u s e O v e rs t a t e . > < V i s u a l T r a n s i t i o nF r o m = " P r e s s e d "T o = " M o u s e O v e r " G e n e r a t e d D u r a t i o n = " 0 : 0 : 0 . 0 1 "/ > The VisualStateGroup has a Transitions property that contains the VisualTransition objects that apply to the VisualState objects in the VisualStateGroup. As the ControlTemplate author, you are free to include any VisualTransition you want. However, if the To and From properties are set to state names that are not in the VisualStateGroup, the VisualTransition is ignored. The following example shows the VisualStateGroup for the C o m m o n S t a t e s . The example defines a VisualTransition for each of the button's following transitions. To the P r e s s e dstate.
msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx 9/18

12/19/13

To the P r e s s e dstate.

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

To the M o u s e O v e rstate. From the P r e s s e dstate to the M o u s e O v e rstate. From the M o u s e O v e rstate to the N o r m a lstate.

XAML < V i s u a l S t a t e G r o u pN a m e = " C o m m o n S t a t e s " > < ! D e f i n et h eV i s u a l T r a n s i t i o n st h a t c a nb eu s e dw h e nt h ec o n t r o lt r a n s i t i o n s b e t w e e nV i s u a l S t a t e st h a ta r ed e f i n e di nt h e V i s u a l S t a t G r o u p . > < V i s u a l S t a t e G r o u p . T r a n s i t i o n s > < ! T a k eo n eh u n d r e d t ho fas e c o n dt o t r a n s i t i o nt ot h eP r e s s e ds t a t e . > < V i s u a l T r a n s i t i o nT o = " P r e s s e d " G e n e r a t e d D u r a t i o n = " 0 : 0 : 0 . 0 1 "/ > < ! T a k eo n eh a l fs e c o n dt ot r a s i t i o n t ot h eM o u s e O v e rs t a t e . > < V i s u a l T r a n s i t i o nT o = " M o u s e O v e r " G e n e r a t e d D u r a t i o n = " 0 : 0 : 0 . 5 "/ > < ! T a k eo n eh u n d r e d t ho fas e c o n dt ot r a n s i t i o nf r o mt h e P r e s s e ds t a t et ot h eM o u s e O v e rs t a t e . > < V i s u a l T r a n s i t i o nF r o m = " P r e s s e d "T o = " M o u s e O v e r " G e n e r a t e d D u r a t i o n = " 0 : 0 : 0 . 0 1 "/ > < ! T a k eo n ea n dah a l fs e c o n d st ot r a n s i t i o nf r o mt h e M o u s e O v e rs t a t et ot h eN o r m a ls t a t e . H a v et h eS o l i d C o l o r B r u s h ,B o r d e r B r u s h ,f a d et ob l u e , t h e nt oy e l l o w ,a n dt h e nt ob l a c ki nt h a tt i m e . > < V i s u a l T r a n s i t i o nF r o m = " M o u s e O v e r "T o = " N o r m a l " G e n e r a t e d D u r a t i o n = " 0 : 0 : 1 . 5 " > < S t o r y b o a r d > < C o l o r A n i m a t i o n U s i n g K e y F r a m e s S t o r y b o a r d . T a r g e t P r o p e r t y = " C o l o r " S t o r y b o a r d . T a r g e t N a m e = " B o r d e r B r u s h " F i l l B e h a v i o r = " H o l d E n d "> < C o l o r A n i m a t i o n U s i n g K e y F r a m e s . K e y F r a m e s > < L i n e a r C o l o r K e y F r a m eV a l u e = " B l u e " K e y T i m e = " 0 : 0 : 0 . 5 "/ > < L i n e a r C o l o r K e y F r a m eV a l u e = " Y e l l o w " K e y T i m e = " 0 : 0 : 1 "/ > < L i n e a r C o l o r K e y F r a m eV a l u e = " B l a c k " K e y T i m e = " 0 : 0 : 1 . 5 "/ > < / C o l o r A n i m a t i o n U s i n g K e y F r a m e s . K e y F r a m e s > < / C o l o r A n i m a t i o n U s i n g K e y F r a m e s > < / S t o r y b o a r d > < / V i s u a l T r a n s i t i o n > < / V i s u a l S t a t e G r o u p . T r a n s i t i o n s > < ! T h er e m a i n d e ro ft h eV i s u a l S t a t e G r o u pi st h e
msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx 10/18

12/19/13

< ! T h er e m a i n d e ro ft h eV i s u a l S t a t e G r o u pi st h e s a m ea st h ep r e v i o u se x a m p l e . > < V i s u a l S t a t eN a m e = " N o r m a l "/ > < V i s u a l S t a t eN a m e = " M o u s e O v e r " > < S t o r y b o a r d > < C o l o r A n i m a t i o n S t o r y b o a r d . T a r g e t N a m e = " B o r d e r B r u s h " S t o r y b o a r d . T a r g e t P r o p e r t y = " C o l o r " T o = " R e d "/ > < / S t o r y b o a r d > < / V i s u a l S t a t e > < V i s u a l S t a t eN a m e = " P r e s s e d " > < S t o r y b o a r d > < C o l o r A n i m a t i o n S t o r y b o a r d . T a r g e t N a m e = " B o r d e r B r u s h " S t o r y b o a r d . T a r g e t P r o p e r t y = " C o l o r " T o = " T r a n s p a r e n t " / > < / S t o r y b o a r d > < / V i s u a l S t a t e >

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

< ! T h eD i s a b l e ds t a t ei so m i t t e df o rb r e v i t y . > < / V i s u a l S t a t e G r o u p >

Customizing Other Controls by Understanding the Control Contract

A control that uses a ControlTemplate to specify its visual structure (by using FrameworkElement objects) and visual behavior (by using VisualState objects) uses the parts control model. Many of the controls that are included with WPF 4 use this model. The parts that a ControlTemplate author needs to be aware of are communicated through the control contract. When you understand the parts of a control contract, you can customize the appearance of any control that uses the parts control model. A control contract has three elements: The visual elements that the control's logic uses. The states of the control and the group each state belongs to. The public properties that visually affect the control.

Visual Elements in the Control Contract

Sometimes a control's logic interacts with a FrameworkElement that is in the ControlTemplate. For example, the control might handle an event of one of its elements. When a control expects to find a particular FrameworkElement in the ControlTemplate, it must convey that information to the ControlTemplate author. The control uses the TemplatePartAttribute to convey the type of element that is expected, and what the name of the element should be. The Button does not have FrameworkElement parts in its control contract, but other controls, such as the ComboBox, do.
msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx

The following example shows the TemplatePartAttribute objects that are specified on the ComboBox class. The logic of

11/18

12/19/13

The following example shows the TemplatePartAttribute objects that are specified on the ComboBox class. The logic of ComboBox expects to find a TextBox named P A R T _ E d i t a b l e T e x t B o xand a Popup named P A R T _ P o p u pin its ControlTemplate. C# [ T e m p l a t e P a r t A t t r i b u t e ( N a m e=" P A R T _ E d i t a b l e T e x t B o x " ,T y p e=t y p e o f ( T e x t B o x ) ) ] [ T e m p l a t e P a r t A t t r i b u t e ( N a m e=" P A R T _ P o p u p " ,T y p e=t y p e o f ( P o p u p ) ) ] p u b l i cc l a s sC o m b o B o x:I t e m s C o n t r o l { } The following example shows a simplified ControlTemplate for the ComboBox that includes the elements that are specified by the TemplatePartAttribute objects on the ComboBox class. XAML < C o n t r o l T e m p l a t eT a r g e t T y p e = " C o m b o B o x " > < G r i d > < T o g g l e B u t t o nx : N a m e = " D r o p D o w n T o g g l e " H o r i z o n t a l A l i g n m e n t = " S t r e t c h "V e r t i c a l A l i g n m e n t = " S t r e t c h " M a r g i n = " 1 "H o r i z o n t a l C o n t e n t A l i g n m e n t = " R i g h t " I s C h e c k e d = " { B i n d i n gP a t h = I s D r o p D o w n O p e n , M o d e = T w o W a y , R e l a t i v e S o u r c e = { R e l a t i v e S o u r c eT e m p l a t e d P a r e n t } } " > < P a t hx : N a m e = " B t n A r r o w "H e i g h t = " 4 "W i d t h = " 8 " S t r e t c h = " U n i f o r m "M a r g i n = " 0 , 0 , 6 , 0 " F i l l = " B l a c k " D a t a = " F 1M3 0 0 , 1 9 0 L3 1 0 , 1 9 0 L3 0 5 , 1 8 3 L3 0 1 , 1 9 0Z"/ > < / T o g g l e B u t t o n > < C o n t e n t P r e s e n t e rx : N a m e = " C o n t e n t P r e s e n t e r "M a r g i n = " 6 , 2 , 2 5 , 2 " C o n t e n t = " { T e m p l a t e B i n d i n gS e l e c t i o n B o x I t e m } " C o n t e n t T e m p l a t e = " { T e m p l a t e B i n d i n gS e l e c t i o n B o x I t e m T e m p l a t e } " C o n t e n t T e m p l a t e S e l e c t o r = " { T e m p l a t e B i n d i n gI t e m T e m p l a t e S e l e c t o r } " > < / C o n t e n t P r e s e n t e r > < T e x t B o xx : N a m e = " P A R T _ E d i t a b l e T e x t B o x " S t y l e = " { x : N u l l } " F o c u s a b l e = " F a l s e " B a c k g r o u n d = " { T e m p l a t e B i n d i n gB a c k g r o u n d } " H o r i z o n t a l A l i g n m e n t = " L e f t " V e r t i c a l A l i g n m e n t = " C e n t e r " M a r g i n = " 3 , 3 , 2 3 , 3 " V i s i b i l i t y = " H i d d e n " I s R e a d O n l y = " { T e m p l a t e B i n d i n gI s R e a d O n l y } " / > < P o p u px : N a m e = " P A R T _ P o p u p " I s O p e n = " { T e m p l a t e B i n d i n gI s D r o p D o w n O p e n } " > < B o r d e rx : N a m e = " P o p u p B o r d e r " H o r i z o n t a l A l i g n m e n t = " S t r e t c h "H e i g h t = " A u t o " M i n W i d t h = " { T e m p l a t e B i n d i n gA c t u a l W i d t h } " M a x H e i g h t = " { T e m p l a t e B i n d i n gM a x D r o p D o w n H e i g h t } " B o r d e r T h i c k n e s s = " { T e m p l a t e B i n d i n gB o r d e r T h i c k n e s s } " B o r d e r B r u s h = " B l a c k "B a c k g r o u n d = " W h i t e "C o r n e r R a d i u s = " 3 " > < S c r o l l V i e w e rx : N a m e = " S c r o l l V i e w e r "B o r d e r T h i c k n e s s = " 0 "P a d d i n g = " 1 " > < I t e m s P r e s e n t e r / > < / S c r o l l V i e w e r > < / B o r d e r > < / P o p u p > < / G r i d > < / C o n t r o l T e m p l a t e >

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx

12/18

12/19/13

< / C o n t r o l T e m p l a t e >

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

States in the Control Contract

The states of a control are also a part of the control contract. The example of creating a ControlTemplate for a Button shows how to specify the appearance of a Button depending on its states. You create a VisualState for each specified state and put all VisualState objects that share a GroupName in a VisualStateGroup, as described in Changing the Appearance of a Control Depending on Its State earlier in this topic. Third-party controls should specify states by using the TemplateVisualStateAttribute, which enables designer tools, such as Expression Blend, to expose the control's states for authoring control templates. To find the control contract for controls that are included with WPF, see Control Styles and Templates.

Properties in the Control Contract

The public properties that visually affect the control are also included in the control contract. You can set these properties to change the appearance of the control without creating a new ControlTemplate. You can also use the TemplateBinding markup extension to bind properties of elements that are in the ControlTemplate to public properties that are defined by the Button. The following example shows the control contract for the button. C# [ T e m p l a t e V i s u a l S t a t e ( N a m e=" N o r m a l " ,G r o u p N a m e=" C o m m o n S t a t e s " ) ] [ T e m p l a t e V i s u a l S t a t e ( N a m e=" M o u s e O v e r " ,G r o u p N a m e=" C o m m o n S t a t e s " ) ] [ T e m p l a t e V i s u a l S t a t e ( N a m e=" P r e s s e d " ,G r o u p N a m e=" C o m m o n S t a t e s " ) ] [ T e m p l a t e V i s u a l S t a t e ( N a m e=" D i s a b l e d " ,G r o u p N a m e=" C o m m o n S t a t e s " ) ] [ T e m p l a t e V i s u a l S t a t e ( N a m e=" U n f o c u s e d " ,G r o u p N a m e=" F o c u s S t a t e s " ) ] [ T e m p l a t e V i s u a l S t a t e ( N a m e=" F o c u s e d " ,G r o u p N a m e=" F o c u s S t a t e s " ) ] p u b l i cc l a s sB u t t o n:B u t t o n B a s e { p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yB a c k g r o u n d P r o p e r t y ; p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yB o r d e r B r u s h P r o p e r t y ; p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yB o r d e r T h i c k n e s s P r o p e r t y ; p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yC o n t e n t P r o p e r t y ; p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yC o n t e n t T e m p l a t e P r o p e r t y ; p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yF o n t F a m i l y P r o p e r t y ; p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yF o n t S i z e P r o p e r t y ; p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yF o n t S t r e t c h P r o p e r t y ; p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yF o n t S t y l e P r o p e r t y ; p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yF o n t W e i g h t P r o p e r t y ; p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yF o r e g r o u n d P r o p e r t y ; p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yH o r i z o n t a l C o n t e n t A l i g n m e n t P r o p e r t y ; p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yP a d d i n g P r o p e r t y ; p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yT e x t A l i g n m e n t P r o p e r t y ; p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yT e x t D e c o r a t i o n s P r o p e r t y ; p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yT e x t W r a p p i n g P r o p e r t y ; p u b l i cs t a t i cr e a d o n l yD e p e n d e n c y P r o p e r t yV e r t i c a l C o n t e n t A l i g n m e n t P r o p e r t y ; p u b l i cB r u s hB a c k g r o u n d{g e t ;s e t ;} p u b l i cB r u s hB o r d e r B r u s h{g e t ;s e t ;} p u b l i cT h i c k n e s sB o r d e r T h i c k n e s s{g e t ;s e t ;} p u b l i co b j e c tC o n t e n t{g e t ;s e t ;} p u b l i cD a t a T e m p l a t eC o n t e n t T e m p l a t e{g e t ;s e t ;} msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx

13/18

12/19/13

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

p u b l i cD a t a T e m p l a t eC o n t e n t T e m p l a t e{g e t ;s e t ;} p u b l i cF o n t F a m i l yF o n t F a m i l y{g e t ;s e t ;} p u b l i cd o u b l eF o n t S i z e{g e t ;s e t ;} p u b l i cF o n t S t r e t c hF o n t S t r e t c h{g e t ;s e t ;} p u b l i cF o n t S t y l eF o n t S t y l e{g e t ;s e t ;} p u b l i cF o n t W e i g h tF o n t W e i g h t{g e t ;s e t ;} p u b l i cB r u s hF o r e g r o u n d{g e t ;s e t ;} p u b l i cH o r i z o n t a l A l i g n m e n tH o r i z o n t a l C o n t e n t A l i g n m e n t{g e t ;s e t ;} p u b l i cT h i c k n e s sP a d d i n g{g e t ;s e t ;} p u b l i cT e x t A l i g n m e n tT e x t A l i g n m e n t{g e t ;s e t ;} p u b l i cT e x t D e c o r a t i o n C o l l e c t i o nT e x t D e c o r a t i o n s{g e t ;s e t ;} p u b l i cT e x t W r a p p i n gT e x t W r a p p i n g{g e t ;s e t ;} p u b l i cV e r t i c a l A l i g n m e n tV e r t i c a l C o n t e n t A l i g n m e n t{g e t ;s e t ;} } When creating a ControlTemplate, it is often easiest to begin with an existing ControlTemplate and make changes to it. You can do one of the following to change an existing ControlTemplate: Use a designer, such as Expression Blend, which provides a graphical user interface for creating control templates. For more information, see Styling a control that supports templates. Get the default ControlTemplate and edit it. To find the default control templates that are included with WPF, see Default WPF Themes.

Complete Example
The following example shows the complete Button ControlTemplate that is discussed in this topic. XAML < S t a c k P a n e l > < S t a c k P a n e l . R e s o u r c e s > < S t y l eT a r g e t T y p e = " B u t t o n "x : K e y = " n e w T e m p l a t e " > < ! S e tt h eB a c k g r o u n d ,F o r e g r o u n d ,F o n t S i z e ,W i d t h , H e i g h t ,M a r g i n ,a n dT e m p l a t ep r o p e r t i e sf o r t h eB u t t o n . > < S e t t e rP r o p e r t y = " B a c k g r o u n d "V a l u e = " N a v y " / > < S e t t e rP r o p e r t y = " F o r e g r o u n d "V a l u e = " W h i t e " / > < S e t t e rP r o p e r t y = " F o n t S i z e "V a l u e = " 1 4 " / > < S e t t e rP r o p e r t y = " W i d t h "V a l u e = " 1 0 0 " / > < S e t t e rP r o p e r t y = " H e i g h t "V a l u e = " 4 0 " / > < S e t t e rP r o p e r t y = " M a r g i n "V a l u e = " 1 0 " / > < S e t t e rP r o p e r t y = " H o r i z o n t a l C o n t e n t A l i g n m e n t "V a l u e = " C e n t e r " / > < S e t t e rP r o p e r t y = " V e r t i c a l C o n t e n t A l i g n m e n t "V a l u e = " C e n t e r " / > < S e t t e rP r o p e r t y = " T e m p l a t e " > < S e t t e r . V a l u e > < C o n t r o l T e m p l a t eT a r g e t T y p e = " B u t t o n " > < B o r d e rx : N a m e = " R o o t E l e m e n t " > < V i s u a l S t a t e M a n a g e r . V i s u a l S t a t e G r o u p s > < ! D e f i n et h es t a t e sa n dt r a n s i t i o n sf o rt h ec o m m o ns t a t e s . T h es t a t e si nt h eV i s u a l S t a t e G r o u pa r em u t u a l l ye x c l u s i v et o e a c ho t h e r . > < V i s u a l S t a t e G r o u pN a m e = " C o m m o n S t a t e s " >
msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx 14/18

12/19/13

< V i s u a l S t a t e G r o u pN a m e = " C o m m o n S t a t e s " >

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

< ! D e f i n et h eV i s u a l T r a n s i t i o n st h a tc a nb eu s e dw h e nt h ec o n t r o l t r a n s i t i o n sb e t w e e nV i s u a l S t a t e st h a ta r ed e f i n e di nt h e V i s u a l S t a t G r o u p . > < V i s u a l S t a t e G r o u p . T r a n s i t i o n s > < ! T a k eo n eh u n d r e d t ho fas e c o n dt ot r a n s i t i o nt ot h e P r e s s e ds t a t e . > < V i s u a l T r a n s i t i o nT o = " P r e s s e d " G e n e r a t e d D u r a t i o n = " 0 : 0 : 0 . 0 1 "/ > < ! T a k eo n eh a l fs e c o n dt ot r a s i t i o nt ot h eM o u s e O v e rs t a t e . > < V i s u a l T r a n s i t i o nT o = " M o u s e O v e r " G e n e r a t e d D u r a t i o n = " 0 : 0 : 0 . 5 "/ > < ! T a k eo n eh u n d r e d t ho fas e c o n dt ot r a n s i t i o nf r o mt h e P r e s s e ds t a t et ot h eM o u s e O v e rs t a t e . > < V i s u a l T r a n s i t i o nF r o m = " P r e s s e d "T o = " M o u s e O v e r " G e n e r a t e d D u r a t i o n = " 0 : 0 : 0 . 0 1 "/ > < ! T a k eo n ea n dah a l fs e c o n d st ot r a n s i t i o nf r o mt h e M o u s e O v e rs t a t et ot h eN o r m a ls t a t e . H a v et h eS o l i d C o l o r B r u s h ,B o r d e r B r u s h ,f a d et ob l u e , t h e nt oy e l l o w ,a n dt h e nt ob l a c ki nt h a tt i m e . > < V i s u a l T r a n s i t i o nF r o m = " M o u s e O v e r "T o = " N o r m a l " G e n e r a t e d D u r a t i o n = " 0 : 0 : 1 . 5 " > < S t o r y b o a r d > < C o l o r A n i m a t i o n U s i n g K e y F r a m e s S t o r y b o a r d . T a r g e t P r o p e r t y = " C o l o r " S t o r y b o a r d . T a r g e t N a m e = " B o r d e r B r u s h " F i l l B e h a v i o r = " H o l d E n d "> < C o l o r A n i m a t i o n U s i n g K e y F r a m e s . K e y F r a m e s > < L i n e a r C o l o r K e y F r a m eV a l u e = " B l u e " K e y T i m e = " 0 : 0 : 0 . 5 "/ > < L i n e a r C o l o r K e y F r a m eV a l u e = " Y e l l o w " K e y T i m e = " 0 : 0 : 1 "/ > < L i n e a r C o l o r K e y F r a m eV a l u e = " B l a c k " K e y T i m e = " 0 : 0 : 1 . 5 "/ > < / C o l o r A n i m a t i o n U s i n g K e y F r a m e s . K e y F r a m e s > < / C o l o r A n i m a t i o n U s i n g K e y F r a m e s > < / S t o r y b o a r d > < / V i s u a l T r a n s i t i o n > < / V i s u a l S t a t e G r o u p . T r a n s i t i o n s > < ! T h eN o r m a ls t a t ei st h es t a t et h eb u t t o ni si n w h e ni ti sn o ti na n o t h e rs t a t ef r o mt h i sV i s u a l S t a t e G r o u p . T h e r ei sn os p e c i a lv i s u a lb e h a v i o rf o rt h i ss t a t e ,b u t t h eV i s u a l S t a t em u s tb ed e f i n e di no r d e rf o rt h eb u t t o n t or e t u r nt oi t si n i t i a ls t a t e . > < V i s u a l S t a t ex : N a m e = " N o r m a l "/ > < ! C h a n g et h eb o r d e ro ft h eb u t t o nt or e dw h e nt h e m o u s ei so v e rt h eb u t t o n . > < V i s u a l S t a t ex : N a m e = " M o u s e O v e r " > < S t o r y b o a r d > < C o l o r A n i m a t i o nS t o r y b o a r d . T a r g e t N a m e = " B o r d e r B r u s h " S t o r y b o a r d . T a r g e t P r o p e r t y = " C o l o r "

msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx

15/18

12/19/13

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

S t o r y b o a r d . T a r g e t P r o p e r t y = " C o l o r " T o = " R e d "/ >

< / S t o r y b o a r d > < / V i s u a l S t a t e > < ! C h a n g et h eb o r d e ro ft h eb u t t o nt oT r a n s p a r e n tw h e nt h e b u t t o ni sp r e s s e d . > < V i s u a l S t a t ex : N a m e = " P r e s s e d " > < S t o r y b o a r d> < C o l o r A n i m a t i o nS t o r y b o a r d . T a r g e t N a m e = " B o r d e r B r u s h " S t o r y b o a r d . T a r g e t P r o p e r t y = " C o l o r " T o = " T r a n s p a r e n t " / > < / S t o r y b o a r d > < / V i s u a l S t a t e > < ! S h o wt h eD i s a b l e d R e c tw h e nt h eI s E n a b l e dp r o p e r t yo n t h eb u t t o ni sf a l s e . > < V i s u a l S t a t ex : N a m e = " D i s a b l e d " > < S t o r y b o a r d > < D o u b l e A n i m a t i o nS t o r y b o a r d . T a r g e t N a m e = " D i s a b l e d R e c t " S t o r y b o a r d . T a r g e t P r o p e r t y = " O p a c i t y " T o = " 1 "D u r a t i o n = " 0 "/ > < / S t o r y b o a r d > < / V i s u a l S t a t e > < / V i s u a l S t a t e G r o u p > < ! D e f i n et h es t a t e sa n dt r a n s i t i o n sf o rt h ef o c u ss t a t e s . T h es t a t e si nt h eV i s u a l S t a t e G r o u pa r em u t u a l l ye x c l u s i v et o e a c ho t h e r . > < V i s u a l S t a t e G r o u px : N a m e = " F o c u s S t a t e s " > < ! D e f i n et h eV i s u a l S t a t e si nt h i sV i s t u a l S t a t e G r o u p . > < V i s u a l S t a t ex : N a m e = " F o c u s e d " > < S t o r y b o a r d > < O b j e c t A n i m a t i o n U s i n g K e y F r a m e s S t o r y b o a r d . T a r g e t N a m e = " F o c u s V i s u a l " S t o r y b o a r d . T a r g e t P r o p e r t y = " V i s i b i l i t y "D u r a t i o n = " 0 " > < D i s c r e t e O b j e c t K e y F r a m eK e y T i m e = " 0 " > < D i s c r e t e O b j e c t K e y F r a m e . V a l u e > < V i s i b i l i t y > V i s i b l e < / V i s i b i l i t y > < / D i s c r e t e O b j e c t K e y F r a m e . V a l u e > < / D i s c r e t e O b j e c t K e y F r a m e > < / O b j e c t A n i m a t i o n U s i n g K e y F r a m e s > < / S t o r y b o a r d > < / V i s u a l S t a t e > < V i s u a l S t a t ex : N a m e = " U n f o c u s e d " > < S t o r y b o a r d > < O b j e c t A n i m a t i o n U s i n g K e y F r a m e s S t o r y b o a r d . T a r g e t N a m e = " F o c u s V i s u a l " S t o r y b o a r d . T a r g e t P r o p e r t y = " V i s i b i l i t y " D u r a t i o n = " 0 " > < D i s c r e t e O b j e c t K e y F r a m eK e y T i m e = " 0 " > < D i s c r e t e O b j e c t K e y F r a m e . V a l u e > < V i s i b i l i t y > C o l l a p s e d < / V i s i b i l i t y > < / D i s c r e t e O b j e c t K e y F r a m e . V a l u e > < / D i s c r e t e O b j e c t K e y F r a m e >

msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx

16/18

12/19/13

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

< / D i s c r e t e O b j e c t K e y F r a m e > < / O b j e c t A n i m a t i o n U s i n g K e y F r a m e s > < / S t o r y b o a r d > < / V i s u a l S t a t e > < / V i s u a l S t a t e G r o u p > < / V i s u a l S t a t e M a n a g e r . V i s u a l S t a t e G r o u p s > < ! C r e a t et h eS o l i d C o l o r B r u s hf o rt h eB a c k g r o u n d a sa no b j e c te l e m m e n ta n dg i v ei tan a m es o i tc a nb er e f e r r e dt oe l s e w h e r ei nt h ec o n t r o lt e m p l a t e . > < B o r d e r . B a c k g r o u n d > < S o l i d C o l o r B r u s hx : N a m e = " B o r d e r B r u s h "C o l o r = " B l a c k " / > < / B o r d e r . B a c k g r o u n d > < ! C r e a t eab o r d e rt h a th a sad i f f e r e n tc o l o rb ya d d i n gs m a l l e rg r i d . T h eb a c k g r o u n do ft h i sg r i di ss p e c i f i e db yt h eb u t t o n ' sB a c k g r o u n d p r o p e r t y . > < G r i dB a c k g r o u n d = " { T e m p l a t e B i n d i n gB a c k g r o u n d } "M a r g i n = " 4 " > < ! C r e a t eaR e c t a n g l et h a ti n d i c a t e st h a tt h e B u t t o nh a sf o c u s . > < R e c t a n g l eN a m e = " F o c u s V i s u a l " V i s i b i l i t y = " C o l l a p s e d "M a r g i n = " 2 " S t r o k e = " { T e m p l a t e B i n d i n gF o r e g r o u n d } " S t r o k e T h i c k n e s s = " 1 " S t r o k e D a s h A r r a y = " 1 . 51 . 5 " / > < ! U s eaC o n t e n t P r e s e n t e rt od i s p l a yt h eC o n t e n to f t h eB u t t o n . > < C o n t e n t P r e s e n t e r H o r i z o n t a l A l i g n m e n t = " { T e m p l a t e B i n d i n gH o r i z o n t a l C o n t e n t A l i g n m e n t } " V e r t i c a l A l i g n m e n t = " { T e m p l a t e B i n d i n gV e r t i c a l C o n t e n t A l i g n m e n t } " M a r g i n = " 4 , 5 , 4 , 4 "/ > < ! C r e a t ear e c t a n g l et h a tc a u s e st h eb u t t o nt oa p p e a r g r a y e do u tw h e ni ti sd i s a b l e d . > < R e c t a n g l ex : N a m e = " D i s a b l e d R e c t " F i l l = " # A 5 F F F F F F " O p a c i t y = " 0 "I s H i t T e s t V i s i b l e = " f a l s e "/ > < / G r i d > < / B o r d e r > < / C o n t r o l T e m p l a t e > < / S e t t e r . V a l u e > < / S e t t e r > < / S t y l e > < / S t a c k P a n e l . R e s o u r c e s > < B u t t o nS t y l e = " { S t a t i c R e s o u r c en e w T e m p l a t e } " C o n t e n t = " B u t t o n 1 " / > < B u t t o nS t y l e = " { S t a t i c R e s o u r c en e w T e m p l a t e } " B a c k g r o u n d = " P u r p l e " C o n t e n t = " B u t t o n 2 "/ > < / S t a c k P a n e l >

See Also
msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx 17/18

12/19/13

See Also
Concepts
Styling and Templating

Customizing the Appearance of an Existing Control by Creating a ControlTemplate

2013 Microsoft. All rights reserved.

msdn.microsoft.com/en-us/library/ee230084(d=printer,v=vs.110).aspx

18/18