Another of the minor but potentially useful new features coming in Silverlight 5 – and already present in the Silverlight 5 beta – is style data binding. Simple put, style data binding allows you to use data-binding expressions to assign values to style setters. It may not sound that exciting, but among other things, it makes it easier than ever to include dynamic theming support in your Silverlight apps. There’s not a lot of documentation around this feature just yet, but as usual, a good example is better than documentation anyway.
I built the app shown below to demonstrate dynamic theming using style data binding. Here’s how it looks when it first appears on the screen:
Clicking anywhere in the browser window instantly changes the theme colors:
To make this work, and to leverage style data binding, I began by writing a simple class named ColorTheme that exposes brushes and colors through properties with names like AccentColor, AccentBrush, and TextBrush. (I also implemented INotifyPropertyChanged in the class since I intended to use it as a data source.) Then, in App.xaml, I declared an instance of ColorTheme, and I defined a few styles that use {Binding} expressions to reference ColorTheme properties:
<Application.Resources>
<!– Color theme –>
<local:ColorTheme x:Key="Theme" />
<!– Styles that data-bind to color theme –>
<Style x:Key="NormalText" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe WP" />
<Setter Property="FontSize" Value="16" />
<Setter Property="Foreground"
Value="{Binding TextBrush, Source={StaticResource Theme}}" />
</Style>
<Style x:Key="AccentText" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe WP" />
<Setter Property="FontSize" Value="16" />
<Setter Property="Foreground"
Value="{Binding AccentBrush, Source={StaticResource Theme}}" />
</Style>
<Style x:Key="BackgroundGradient" TargetType="Panel">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Offset="0"
Color="{Binding BackgroundColor, Source={StaticResource Theme}}" />
<GradientStop Offset="1"
Color="{Binding AccentColor, Source={StaticResource Theme}}" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
In MainPage.xaml, I applied the data-bound styles to XAML elements:
<Grid x:Name="LayoutRoot" Style="{StaticResource BackgroundGradient}"
MouseLeftButtonDown="OnClick">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="STYLE DATA BINDING DEMO"
Style="{StaticResource NormalText}" />
<TextBlock Text="silverlight 5 rocks!" FontSize="60"
Style="{StaticResource AccentText}" />
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Style="{StaticResource NormalText}" TextWrapping="Wrap"
Text="…" />
</Grid>
</Grid>
With this infrastructure in place, changing a theme color is as simple as changing the corresponding property in the ColorTheme object. To facilitate this, I built a public method named ToggleColors into the ColorTheme class. The OnClick handler calls that method on the instance of ColorTheme declared in App.xaml:
private void OnClick(object sender, MouseButtonEventArgs e)
{
// Toggle theme colors
(Application.Current.Resources["Theme"] as ColorTheme).ToggleColors();
}
ToggleColors, in turn, updates the colors and brushes. Here, for example, is how it switches from the bluish theme to the orangish theme:
BackgroundColor = Color.FromArgb(0xFF, 0xFF, 0xFF, 0xFF);
AccentColor = Color.FromArgb(0xFF, 0xF0, 0x96, 0x09);
BackgroundBrush = new SolidColorBrush(BackgroundColor);
AccentBrush = new SolidColorBrush(AccentColor);
TextBrush = new SolidColorBrush(Colors.Black);
You can download the Visual Studio solution and try it for yourself. The style story has improved in every version of Silverlight since version 2. It’s nice to see that version 5 is no exception!