Silverlight 3 bring long-awaited improvements in styling mechanism: “BasedOn” mechanism, Merged Resource Dictionaries and eliminates “write once” style setting behavior. Let’s see those features.
BasedOn
Styles can be “derived” from one another. Perfect for cascading/inheriting styles.
Let’s define style for a… Button (well, in demos it is always a Button, TextBox, etc. ;))
<Style x:Key="BaseButtonStyle" TargetType="ButtonBase">
<Setter Property="Width" Value="100"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Margin" Value="5"/>
</Style>
To “derive” from existing style we should specify BasedOn property
<Style x:Key="DerivedButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource BaseButtonStyle}">
<Setter Property="Background" Value="Red"/>
<Setter Property="BorderBrush" Value="Blue"/>
<Setter Property="BorderThickness" Value="3"/>
</Style>
The new style will have 6 properties set. Also we will be able to “derive” from style and “override” some of setters:
<Style x:Key="ExtendedButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource DerivedButtonStyle}">
<Setter Property="FontFamily" Value="Trebuchet MS"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Height" Value="35"/>
<Setter Property="Width" Value="150"/>
<Setter Property="Background" Value="Green"/>
</Style>
All those styles could reside in ResourceDictionary. This was the feature of Silverlight 2. Silverlight 3 adds to it ability to create MergedResourceDictionary. Merged Resource Dictionaries will use separate Resource Dictionary files in order to create a Merged Resource Dictionary. Resource Dictionary files could be the part of current assembly (resource) or part of referenced external assemblies. Also it could have style definitions exactly like standard Resource Dictionary
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary>
<SolidColorBrush Color="Aqua" x:Key="My_AquaColor"/>
<Style x:Key="RectangeStyle" TargetType="Rectangle">
<Setter Property="Stroke" Value="Black"/>
<Setter Property="StrokeThickness" Value="0.5"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Width" Value="20"/>
<Setter Property="Height" Value="20"/>
</Style>
</ResourceDictionary>
<ResourceDictionary Source="/Resources/colors.xaml"> <!—Assembly resource-->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary>
<SolidColorBrush Color="GreenYellow" x:Key="My_GreenYellowColor"/>
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
<ResourceDictionary Source="/Resources;component/resources.xaml"/> <!—External assembly resource-->
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Last, but not least, Silverlight 3 applications now support resetting styles as many times as needed:
Style style = this.Resources["DerivedButtonStyle"] as Style;
if (null != style)
btnBase.Style = style;
More to come - stay tuned!
Enjoy,
Alex