Part 2: Style or Template?

Now that the new theme project has been created, let's list the elements that need to be styled (see Table 1) and those that need to be templated (see Table 2). We will not be reproducing the Office 2007 blue theme in its entirety, so some elements, such as the fixed-column splitter, have been omitted.

As mentioned in this tutorial's introduction: use styles to change an element's appearance and modify simple behaviors; use templates to change an element's layout, visual structure, and more complex behaviors.

Table 1: Elements to style

Element to style	What we will be changing
DataGridControl	Background, Foreground, and FontFamily
RowSelectorPane	Background and Foreground
Row	SelectionBackground and SelectionForeground
ColumnManagerRow	Background, BorderBrush, and BorderThickness
ColumnManagerCell	Padding
HierarchichalGroupByControl	Background and Foreground
HierarchicalGroupByItem	Background, BorderBrush, and BorderThickness
GroupHeaderControl	Background, BorderThickness, and BorderBrush
TableView	HorizontalGridLineBrush and VerticalGridLineThickness
groupByConnectionLinePen resource ( GroupByControl.ConnectionLinePen)	Providing a new Pen
dropMarkPen resource ( ViewBase.DropMarkPen)	Providing a new Pen. The drop-mark pen is used to identify the location where a column will be dropped when it is being dragged.

Table 2: Elements to template

Element to template	What we will be changing
RowSelector	Custom separator lines and change the background when the mouse is pressed
ColumnManagerCell	Change the background when the mouse is pressed Custom separator lines Change the color of the sort glyph

Using Styles

Styles are usually, but not necessarily, defined in the resources of an element, which determines the scope of where that particular style can be used. For example, providing a style for a button in the resources of an application indicates that all buttons in the application that wish to use the style may do so. If a style is provided in a more limited scope (e.g., in a Window's resources) then only the elements defined in the Window can use the style.

The x:Key and TargetType properties of a style determine how a style is applied to the elements in the same scope. If only a key is provided, all elements that wish to use the style must explicitly reference it using a StaticResource or DynamicResource markup extension. If only a target type is provided, all elements with the same type will automatically inherit the property values of the style. If a style provides both a key and a target type, the style will only be applied to the elements of the same target type that explicitly reference it by its key.

Using Templates

ControlTemplates define the default appearance of controls, including any triggers that may change their appearance or behavior and are provided through a control's Template property, either through a style or by explicitly setting the Template property. For example, a button looks like a button because that is the appearance its default template defines; however, it is possible to change the appearance of the control by providing a new template. The type of control for which a ControlTemplate is designed is determined by the template's TargetType property. When the ControlTemplate is created for a ContentControl, a ContentPresenter must be provided to represent the location within the layout of the ControlTemplate where the control's data is displayed.

DataTemplates are the most commonly used form of template and define the appearance of the data items displayed in an ItemsControl or the content of a ContentControl. DataTemplates can be specified through the ItemsControl.ItemTemplate, ContentPresenter.ContentTemplate, or ContentControl.ContentTemplate properties, or as a resource. The DataTemplate's DataType property is used to locate resources that match the data type of a Content property.

Now that you have finished digesting what you just read, let's go to the next part where we will apply new styles and templates to the elements listed above.