Styling tips for common Silverlight controls

Article
02/19/2013

JJ169940.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(fr-fr,VS.110).png

Blend for Visual Studio 2012 comes with many Microsoft Silverlight controls that you can use to create a great user experience. You can also download controls from trusted sources.

For more information, see Import a custom control by adding a reference (Blend).

If you find a control that functionally fits your needs but doesn't look the way that you want it to, and if that control supports templates, you can modify the templates of the control to change its appearance.

To make things easier, you can focus on your design by drawing everything on the artboard first, by using drawing tools, and by importing art or other assets. When you are done, you can use the Make Into Control command to convert your objects into a template for any control.

Template-binding

Controls have properties to which objects in a template can be bound. This is called template-binding. By binding parts of the template to a control, you effectively create parameters for the template. For example, instead of saying, "This Rectangle is blue," you say, "This Rectangle is the same color as the Background of the control." Thus, when you apply the template to a control with different Background properties, the result is a differently colored template.

To template-bind a property, select an object in a template, click Advanced options in the Properties panel, and then choose a property from Template Binding.

Some properties such as OpacityMask, Font, FontSize, LayoutTransform, and RenderTransform do not have to be template-bound. They will be applied to the objects in the templates automatically.

Content and Header properties

Several controls contain a Content property (Button, CheckBox, and RadioButton, for example) or a Header property (TabItem and MenuItem). Content and Header properties can be used to display content of any type.

To display any kind of content

If you want to display any kind of content (not just text), you will need a ContentPresenter in your template with a Content (or Header) property that is template-bound to the Content (or Header) property of the control. If you use Make Into Control to make artwork into a template, Blend adds a ContentPresenter to the template. If you were using a TextBlock to display content, delete the TextBlock after you make the artwork into a control. The ContentPresenter will display the content that was previously displayed in the TextBlock.

To display text

If you want to display only text, you can use a TextBlock instead of a ContentPresenter. Put the TextBlock in the template, and then template-bind the Text property of the TextBlock to the Content (or Header) property of the Button. If you use Make Into Control to make artwork into a template, and you were using a TextBlock to display content, delete the ContentPresenter that Blend added to the template. When you add text to the Content (or Header) property of a control with this style applied, the TextBlock will display that text.

Make Into ContentControl

When you use Make Into Control to turn artwork containing a TextBlock object into a template for a ContentControl (a button, for example), Blend does the following:

Puts a ContentPresenter into the template in place of the TextBlock.
Copies Layout properties from the TextBlock to the ContentPresenter.
Copies Typography properties from the TextBlock to the style of the control.
Copies the Text property from the TextBlock to the instance of the Content property of the control.

Make Into TextBox

When you use Make Into Control to turn artwork containing a TextBlock object into a template for a TextBox, Blend does the following:

Puts a ScrollViewer representing the ContentElement part into the template in place of the TextBlock.
Copies Layout properties from the TextBlock to the ContentElement part.
Copies Typography properties from the TextBlock to the TextBox style.
Copies the Text property from the TextBlock to the instance of the TextBox control.

Visual states

Visual states in a state group are mutually exclusive. However, states in any group are independent of the states in any other group. This means that any one state from each group can be applied at any one time without creating a conflict.

Changing a property of an object in more than one state in the same group is common practice. For example, you may change the Fill property for Rectangle for the MouseOver, Pressed, and Disabled states. This works because only one state from the CommonStates state group is applied at the same time. However, changing the property of an object in more than one state group breaks the independent nature of the state groups and leads to conflicts where more than one state is trying to set the property of the same object at the same time. Blend will display a warning when a state conflict is detected.

Important

Each state name must be unique within a template, even across state groups.

The Normal visual state

Each state group has a default state. For example, CommonStates has Normal, and CheckedStates has Unchecked. It is a best practice to leave the default state unchanged when modifying the properties of an object. For example, for a check box, the check mark and check box rectangles are empty (hidden) in Base, and displayed in Checked (for the check mark) and Focused (for the check box rectangle).

Remember that Base is not a state. For that reason, you cannot define or control transitions to and from Base. For example, you cannot define a transition from Base to MouseOver because Base is not a state. Base represents the template in its base form, with no states applied. Only states should be considered when defining your transitions.

When you create your own control templates, you should define a normal state in each state group and have the control default to the normal state when it loads. If the control (a Button, for example) is not in its normal state when it loads, the transition (from the Normal state to the MouseOver state, for example) will not run.