C# 4 and .NET 4

1012 ❘ ChaPTer 35 cOre wpf
In WPF, the functionality of controls is completely separate from their look and feel. A button has a default
look, but you can completely customize that look as you like with templates.
WPF gives you several template types that derive from the base class FrameworkTemplate.
TemPlaTe TyPe
ControlTemplate
ItemsPanelTemplate
DataTemplate
HierarchicalDataTemplate
desCriPTion
With a ControlTemplate you can specify the visual structure of a control
and override the look.
For an ItemsControl you can specify the layout of its items by
assigning an ItemsPanelTemplate. Each ItemsControl has a
default ItemsPanelTemplate. For the MenuItem, it is a WrapPanel.
The StatusBar uses a DockPanel, and the ListBox uses a
VirtualizingStackPanel.
DataTemplates are very useful for graphical representations of objects.
Styling a ListBox, you will see that, by default, the items of the ListBox
are shown according to the output of the ToString() method. By applying
a DataTemplate you can override this behavior and define a custom
presentation of the items.
The HierarchicalDataTemplate is used for arranging a tree of objects.
This control supports HeaderedItemsControls, such as TreeViewItem
and MenuItem.
Control Templates
Previously in this chapter you’ve seen how the properties of a control can be styled. If setting simple
properties of the controls doesn’t give you the look you want, you can change the Template property. With
the Template property, the complete look of the control can be customized.
The next example shows customizing buttons, and later, list boxes are customized step by step, so you can
see the intermediate results of the changes.
The customization of the Button type is done in a separate resource dictionary file, Styles.xaml. Here, a
style with the key name RoundedGelButton is defined.
The style GelButton sets the properties Background, Height, Foreground, and Margin, and the
Template. The Template is the most interesting aspect with this style. The Template specifies a Grid
with just one row and one column.
Inside this cell, you can find an ellipse with the name GelBackground. This ellipse has a linear gradient brush
for the stroke. The stroke that surrounds the rectangle is very thin because the StrokeThickness is set to 0.5.
The second ellipse, GelShine, is a small ellipse where the size is defined by the Margin property and
so is visible within the first ellipse. The stroke is transparent, so there is no line surrounding the ellipse.
This ellipse uses a linear gradient fill brush, which goes from a light, partly transparent color to full
transparency. This gives the ellipse a shimmering effect:
www.it-ebooks.info