Resources and Styles

XAML provides very rich facilities for customizing the look of your application, through entities known as styles. However, before we get into this topic, we need to learn about resources . The term resources used in this context simply refers to a way of reusing commonly defined objects and values. Let s look at an example:

 <Border 
 xmlns="http://schemas.microsoft.com/2003/xaml" 
 xmlns:def="Definition" 
 Background="BlanchedAlmond" 
 > 
 <FlowPanel> 
 <FlowPanel.Resources> 
 <SolidColorBrush def:Name="MyColor" Color="Gold"/> 
 </FlowPanel.Resources> 
 <Button Background="{MyColor}"/> 
 <Ellipse Fill="{MyColor}"/> 
 </FlowPanel> 
 </Border> 

This code defines a new resource named MyColor , whose type is SolidColorBrush and value is Gold . This resource is part of the FlowPanel s Resources collection. Every element has a Resources collection. You can define resources on any element you want, but most often you ll put them only on the root element ”in this case, the FlowPanel .

Once you define a resource, you can then reference the resource in a property value by putting the resource name in braces, as you see here:

 <Button Background={MyColor}/> 

When the XAML processor sees {MyColor} in this example, it will first check the button s Resources collection. Because Button doesn t have a definition of MyColor (its Resources collection is empty), it will check the Button s parent ”the FlowPanel .

One particularly useful kind of resource is a Style . Style is both the name of class and the name of a property that all elements have. A Style defines properties to set on an element, which then uses that designated style. This example defines a Style called MyStyle and applies that style to a button:

 <Border 
 xmlns="http://schemas.microsoft.com/2003/xaml" 
 xmlns:def="Definition" 
 Background="BlanchedAlmond" 
 > 
 <FlowPanel> 
 <FlowPanel.Resources> 
 
 <Style def:Name="MyStyle"> 
 <Button Background="Red" FontSize="24"/> 
 </Style> 
 
 </FlowPanel.Resources> 
 <Button>Normal</Button> 
 
 <Button Style="{MyStyle}">Styled</Button> 
 
 </FlowPanel> 
 </Border> 

You can also define a Style resource with no name ”which becomes the element s default style for elements where you do not specify an explicit Style property. This example adds a default style to the preceding example:

 <Border 
 xmlns="http://schemas.microsoft.com/2003/xaml" 
 xmlns:def="Definition" 
 Background="BlanchedAlmond" 
 > 
 <FlowPanel> 
 <FlowPanel.Resources> 
 
 <Style> 
 <Button Background="Green" FontSize="15"/> 
 </Style> 
 
 <Style def:Name="MyStyle"> 
 <Button Background="Red" FontSize="24"/> 
 </Style> 
 </FlowPanel.Resources> 
 <Button>Normal</Button> 
 <Button Style="{MyStyle}">Styled</Button> 
 </FlowPanel> 
 </Border> 

You can do a kind of style inheritance by setting the BasedOn property of the Style class. Referencing the new Style class will set all the properties that the old Style did, plus the additional properties you specify. The following example defines two styles: the first sets the Background property, and the second, based on the first, sets the FontSize property.

 <Border 
 xmlns="http://schemas.microsoft.com/2003/xaml" 
 xmlns:def="Definition" 
 Background="BlanchedAlmond" 
 > 
 <FlowPanel> 
 <FlowPanel.Resources> 
 <Style def:Name="Style1"> 
 <Button Background="Red"/> 
 </Style> 
 
 <Style def:Name="Style2" BasedOn="{Style1}"> 
 <Button FontSize="24"/> 
 </Style> 
 </FlowPanel.Resources> 
 <Button Style="{Style1}">Style 1</Button> 
 <Button Style="{Style2}">Style 2</Button> 
 </FlowPanel> 
 </Border> 

It s even possible for a Style to set properties conditionally, using a feature known as property triggers . Style has a property named VisualTriggers , which is a collection of PropertyTriggers . Each PropertyTrigger specifies a condition using the Property and Value properties, and contains a collection of Set statements. When the styled element s property matches that value, the Set statements are applied, and when the condition is no longer true, the values are unapplied, as if they had never been set in the first place. This example uses property triggers to make the button green when the mouse is over the button, and red otherwise :

 <Border 
 xmlns="http://schemas.microsoft.com/2003/xaml" 
 xmlns:def="Definition" 
 Background="BlanchedAlmond" 
 > 
 <FlowPanel> 
 <FlowPanel.Resources> 
 <Style def:Name="Style1"> 
 <Button Background="Red"/> 
 
 <Style.VisualTriggers> 
 <PropertyTrigger Property="IsMouseOver" Value="true"> 
 <Set PropertyPath="Background" Value="Green"/> 
 </PropertyTrigger> 
 </Style.VisualTriggers> 
 </Style> 
 </FlowPanel.Resources> 
 <Button Style="{Style1}">Style 1</Button> 
 </FlowPanel> 
 </Border> 

Many XAML controls use control composition. They combine a number of smaller controls to create a larger, more complicated control. Styles even let you change this! By specifying a different composition, you can completely redefine the look of a control while still keeping its behavior.

After you declare the style element and its properties, the < Style.VisualTree > tag specifies inside the Style which elements to compose to create the larger control. You can set child elements properties as usual, and give to those children children of their own. You can also use property aliasing to set property values. For example, Name1="*Alias(Target=Name2)" will set the child s Name1 property to the larger control s Name2 property. The following example creates a style for Button that changes the composition to achieve a round look, as you can see in Figure 3-12. The button s Background and Content properties are aliased at appropriate points in the visual tree.

 <Border Background="white" 
 xmlns="http://schemas.microsoft.com/2003/xaml" 
 xmlns:def="Definition"> 
 <FlowPanel> 
 <FlowPanel.Resources> 
 <Style def:Name="RoundButton"> 
 
 <Button FontSize="20"/> 
 
 <Style.VisualTree> 
 <Canvas> 
 <Rectangle ID="MainRect" 
 RadiusX="10" RadiusY="10" 
 Fill="*Alias(Target=Background)" 
 Width="100%" Height="100%" /> 
 
 <FlowPanel Width="100%" Height="100%" > 
 <ContentPresenter 
 ContentControl.Content="*Alias(Target = Content)" 
 Margin="15,3,15,5"/> 
 </FlowPanel> 
 </Canvas> 
 </Style.VisualTree> 
 </Style> 
 </FlowPanel.Resources> 
 
 <Button Style="{RoundButton}"> 
 standard RoundButton 
 </Button> 
 
 <Button Background="red" Style="{RoundButton}"> 
 red RoundButton 
 </Button> 
 
 <Button> 
 standard button 
 </Button> 
 
 <Button Background="red"> 
 red standard button 
 </Button> 
 </FlowPanel> 
 </Border> 

Figure 3-12: A couple of RoundButton and standard buttons on a FlowPanel