Style a control that displays data
Data is displayed by binding items of data to objects on the artboard. You can bind items of data to the properties of any object, whether you're binding a string value that represents the hexadecimal value of a color to the Background property of a rectangle, or binding a collection of data items to the ItemsSource property of a ListBox.
To style an object that displays data, you can modify the properties of the object, or, if the object supports templates, you can modify one of the templates that are applied to the object.
Modify the properties of the object in the Properties panel
When you select an object on the artboard, you can modify values in the Properties panel to change the appearance and other aspects of the object.
For example, you can modify the column headers of each column in a DataGrid object after you have bound the object to data.
Changing the column header text in a DataGrid object
.png "Cc294682.a2cebe0b-dc3d-45d5-9a30-23639e4bef48(en-us,Expression.30).png")
Additionally, you can use the AlternatingRowBackground property in a DataGrid object to specify the color of each alternating row.
Changing the color of alternating rows of a DataGrid object
.png "Cc294682.0547a4e7-d415-4589-99af-dbfdc369a793(en-us,Expression.30).png")
For general information about modifying objects, see Working with objects and properties.
For specific information about the properties of individual objects, see the class library topics for Windows Presentation Foundation (starting at the System.Windows.Controls Namespace) and Microsoft Silverlight (starting at the System.Windows.Controls Namespace) on MSDN.
Modify one of the templates that are applied to the object
If the object is a control that uses templates, you can modify the templates to change the appearance of that object and all other objects that use the same templates.
Most controls use multiple templates for different pieces of the control. For example, the ListBox control uses many nested templates to style each piece of the ListBox: a scroll viewer, scroll bars, the thumbs of the scroll bars, and paging buttons.
The nesting of templates in the ListBox control
.png "Cc294682.b8a37dc0-a65e-4fe1-8a9f-df485bb1bbae(en-us,Expression.30).png")
.png "Cc294682.095c13e8-6ed8-4572-9bd2-b2d6bdfdf199(en-us,Expression.30).png") |
A ListBox control. The ListBox control is a container for a list of items, either bound to items in a data source, or displaying individual unbound objects. |
.png "Cc294682.e1a62fcf-2f5c-4263-95fe-a9bf97616b85(en-us,Expression.30).png") |
A ScrollViewer control inside the ListBox template. |
.png "Cc294682.b36987f6-e914-4b58-99f2-a76c47128837(en-us,Expression.30).png") |
An unbound item in the ListBox control. |
.png "Cc294682.41999197-e26c-42b9-8039-58ce07f5b5ba(en-us,Expression.30).png") |
A vertical ScrollBar control inside the ScrollViewer template. |
.png "Cc294682.a5d608f2-bba2-48c5-8b15-2c115db86acc(en-us,Expression.30).png") |
A vertical Thumb control inside the ScrollBar template. |
.png "Cc294682.15de085f-48f5-41dd-a286-e3dcb4cfd18b(en-us,Expression.30).png") |
A vertical RepeatButton control inside the ScrollBar template to decrease the value of the ScrollBar control in large increments. |
.png "Cc294682.1d2fe38a-3fd8-4951-b978-7e44b6f2401d(en-us,Expression.30).png") |
A vertical RepeatButton control inside the ScrollBar template to decrease the value of the ScrollBar control in small increments. |
The ListBox control also includes a data template that styles the items that are displayed in each row of the object. The data template is specific to the items that you bind to the object. For example, if you drag a string data item and an image data item from the Data panel onto a ListBox, the data template will contain a TextBlock to display the string and an Image to display the image file. You can style these objects in the data template.
The data template of a ListBox object that is bound to data
.png "Cc294682.25738f24-f008-4283-9172-de0a0fbd81bf(en-us,Expression.30).png")
You can make a control look very different from its default appearance. For example, the default appearance of a ListBox object looks something like the following:
A ListBox object using the default template
.png "Cc294682.f3190de1-098e-4dc0-bc1d-4a44d091685f(en-us,Expression.30).png")
However, by modifying templates, you can make a ListBox object look like the following (from the ColorSwatchSL sample that is included with Microsoft Expression Blend):
The ListBox object using two modified templates (ItemContainerStyle and ItemsPanel)
.png "Cc294682.0a581ba0-08e1-4116-91bf-d1309c645ae0(en-us,Expression.30).png")
To access the templates that are applied to objects, right-click the object or select the object and use the breadcrumb bar at the top of the artboard.
Opening a template by using the breadcrumb bar
.png "Cc294682.a7257528-6a90-47ac-8c31-ad3422395f38(en-us,Expression.30).png")
Within a template, you can add, remove, and modify objects the same way that you would outside a template. The functionality of the ListBox control remains the same: it contains a list of items, of which one or many can be selected.
For specific examples of modifying data templates, see Use the DataGrid control and Use the TreeView control.
For more general information about styling controls, see Styling objects.
For detailed information about the parts of a control or a template, see Styling tips for common Silverlight controls, or see the class library topics for Windows Presentation Foundation (starting at the System.Windows.Controls Namespace) and Silverlight (starting at the System.Windows.Controls Namespace) on MSDN.
You can also find tutorials and videos about styling controls at Learn Expression Blend.