Silverlight 5’s New Style Data Binding

5 Comments April 19, 2011

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:

StyleDataBinding1

Clicking anywhere in the browser window instantly changes the theme colors:

StyleDataBinding2

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!


5 Comments

  • Gravatar Image
    Chris April 20, 2011 12:04 PM

    I really hope that Blend will get better support for enabling designers to use this feature effectively in a mid/large project. You can't even use the UI in blend to bind the values, let alone modify the colors (as a designer you want to constantly change the values to see the effect, which you can't easily do).

    I don't know why they just didn't introduce DynamicResource, that would of been perfect to achieve the same effect, except that it has full designer support for that already!

  • Gravatar Image
    progg.ru April 21, 2011 2:03 AM

    Thank you for submitting this cool story - Trackback from progg.ru

  • Gravatar Image
    Greg Gum August 8, 2012 10:50 AM

    I think Style Data Binding is great. I have a code based theme which I use to bind Background and Foreground colors. I can even change the colors and runtime and watch the color change instantly at runtime.

    However, the one limitation I have found is that Styles with binding do not update at runtime if they are in a resource dictionary. The workaround is to put them in UserControl.Resources. Then they will update at runtime via INotifyPropertyChanged.

    Greg

  • Gravatar Image
    Andrew Burnett-Thompson January 26, 2013 5:18 AM

    Hi Jeff, great article!

    I'm trying to implement Style Binding in a control library. I'm stuck on getting the instance of ColorTheme out of a generic.xaml resource dictionary declared inside my Control library DLL (Stackoverflow question here: http://stackoverflow.com/questions/14528622/find-resource-from-generic-xaml-programmatically/14528823#14528823)

    Application.FindResource doesn't find it.

    Any suggestions?

  • Gravatar Image
    scarpe hogan April 23, 2013 3:44 PM

    Silverlight 5’s New Style Data Binding | Wintellect [url=http://www.newyearski.com/scarpehoganoutlet.html]scarpe hogan[/url] <a href="http://www.newyearski.com/scarpehoganoutlet.html" title="scarpe hogan">scarpe hogan</a>

Have a Comment?

Archives

Tags