Styles and Control Templates - Inline Styles
(Page 2 of 4 )
Each “style-able” element in WPF has a Style property, which can be set inline using standard XAML property-element syntax (discussed in Chapter 1), as in Example 5-4.
Example 5-4. Setting an inline style
<Button ... x:Name="cell00" />
<Button.Style>
<Style>
<Setter Property="Button.FontSize" Value="32" />
<Setter Property="Button.FontWeight" Value="Bold" />
</Style>
</Button.Style>
</Button>
Because we want to bundle two property values into our style, we have a Style element with twoSetter sub-elements, one for each property we want to set—i.e.,FontSizeandFontWeight—both with theButtonprefix to indicate the class that contains the property. Properties suitable for styling are dependency properties, which are described in Chapter 9.
Due to the extra style syntax and because inline styles can’t be shared across elements, inline styles actually involve more typing than just setting the properties. For this reason, inline styles aren’t used nearly as often as named styles.
Named Styles By hoisting the same inline style into a resource (as introduced in Chapter 1), we can award it a name and use it by name in our button instances, as shown in Example 5-5.
Example 5-5. Setting a named style
<!-- Window1.xaml -->
<Window ...>
<Window.Resources>
<Style x:Key="CellTextStyle">
<Setter Property="Control.FontSize" Value="32" />
<Setter Property="Control.FontWeight" Value="Bold" />
</Style>
</Window.Resources>
...
<Button Style="{StaticResource CellTextStyle}" ... x:Name="cell00" />
...
</Window>
In Example 5-5, we’ve used theControlprefix on our properties instead of theButtonprefix to allow the style to be used more broadly, as we’ll soon see.
The TargetType Attribute As a convenience, if all of the properties can be set on a shared class, like Control in our example, we can promote the class prefix into theTargetType attribute and remove it from the name of the property, as in Example 5-6.
Example 5-6. A target-typed style
<Style x:Key="CellTextStyle" TargetType="{x:Type Control}">
<Setter Property="FontSize" Value="32" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
When providing aTargetTypeattribute, you can only set properties available on that type. If you’d like to expand to a greater set of properties down the inheritance tree, you can do so by using a more derived type, as in Example 5-7.
Example 5-7. A more derived target-typed style
<Style x:Key="CellTextStyle" TargetType="{x:Type Button}">
<!-- IsCancel is a Button-specific property -->
<Setter Property="IsCancel" Value="False" />
<Setter Property="FontSize" Value="32" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
In this case, theIsCancelproperty is only available onButton, so to set it, we need to switch theTargetTypeattribute for the style.
You may be wondering why I’m setting theFontSizeto"32"instead of"32pt"when the latter is more in line with how font sizes are specified and the two representations are definitely not equivalent (the former is pixels, while the latter is points). I’m using pixels because as of this writing, WPF styles using a non-prefixed property allow"32pt"to be specified forFontSize, while prefixed properties do not. For example, the following works (assuming aTargetTypeis set):
<Setter Property="FontSize" Value="32pt" />
whereas the following does not (regardless of whether aTargetTypeis set or not):
<Setter Property="Control.FontSize" Value="32pt" />
Hopefully this problem will have been fixed by the time you read this (and not replaced with others).
Next: Reusing Styles >>
More XML Articles
More By O'Reilly Media
|
This article is excerpted from chapter five of the book Programming Windows Presentation Foundation, written by Chris Sells and Ian Griffiths (O'Reilly; ISBN: 0596101139). Check it out today at your favorite bookstore. Buy this book now.
|
|