DotNetBar for Silverlight come pre-loaded with a collection of color themes. A color theme is essentially a collection of brush resources. Any brush used by any element in any given DotNetBar for Silverlight control, if it is to be part of the color theme, is a resource defined by the color theme, having a pre-determined Key value.

DotNetBar for Silverlight is designed so that all controls from the library automatically share the same color theme. It is not possible, for example, to have a Ribbon displaying one color theme and a CalendarView with another. When you define a color theme for one, that theme automatically becomes the active theme for all DotNetBar controls in the Silverlight application.

The color themes that are generally available by default:

  • Office 2010 Silver, Blue and Black
  • Office 2007 Silver, Blue and Black

    In the case where a specific control does not support a specific color theme, it will fall back on the default theme, or the last theme selected which it did support. The Ribbon control, for example, does not currently support any of the Office 2007 themes.

    The object responsible for loading a color theme’s resources is DevComponents.Silverlight.Controls.ResourceLoader. All resources for the theme are merged into the application’s resource dictionary (by calling Application.Current.Resources.Add for each resource dictionary included in the theme) when the theme is set. The attached dependency property ResourceLoader.ColorTheme sets the color theme. Note that the attached property requires an UIElement on which to set the property value; this is an attempt to ensure that the current application’s resources collection exists in a ready state (which it will be if the visual tree is under construction.)

    Here is an example of how to set the color theme to Office2007Black in Xaml:

    <Grid x:Name="LayoutRoot" Background="White" Margin="20">
        <ctrls:ResourceLoader.ColorTheme>
            <ctrls:ColorThemeBlend Theme="Office2007Black" />
        </ctrls:ResourceLoader.ColorTheme>
        ...

    The same thing in code (c#), which you would place in the constructor of you’re main UserControl, looks like this:

    ResourceLoader.SetColorTheme(this, new ColorThemeBlend(ColorTheme.Office2007Black));

    Note: each library that is included in DotNetBar for Silverlight has its own limited resource loader who’s purpose is to inform the common resource loader of the location of the library’s unique resources. For convenience, a ColorTheme attached property has been defined on each of these which can be used in place of the common one. For example, if you do not need a reference to namespace DevComponents.Silverlight.Controls in your Xaml, using ScheduleResourceLoader or RibbonResourceLoader in the same manner will yield the same results as the code sample above.

    You will have noticed in the code samples above that the value for color theme is an object of type ColorThemeBlend. ColorThemeBlend exposes three properties:

  • Theme: a value of type ColorTheme which indicates the actual theme to use.
  • Blend: a nullable Color value for specifying a color with which to "Blend" the theme colors with. A specialized algorithm is used to combine the theme’s colors with the blend color, creating a new, unique, color for each color in the theme’s pallet.
  • Sources: a list of Uris which point to locations of the resource dictionaries which contain the resource definitions of the resources who’s values you wish to override from the default. Also, this list must be set if you want to create a custom theme (set Theme = ColorTheme.Custom.)

    Customizing Theme Colors

    There are two ways to customize the colors of a built-in color theme. Each involves redefining the specific resources you wish to override. The difference is where the resource definition gets placed. You can add the resource to your application’s resources collection directly (either in code or by defining the resource in the App.xaml) or you can create a new resource dictionary and add it’s location to the ColorThemeBlend.Sources list when you set the color theme. For example, to change the brush used by the CalendarView control’s outer border, add the following to your App.xaml file:

    <SolidColorBrush x:Key="CalendarViewBorder" Color="Green" />

    Creating a totally new theme is simply a matter of redefining all resources used by all the controls which appear in your application.

    Re-Using Resources

    It is possible to re-use any resource defined in any DotNetBar library that is part of a color theme. There are two ways to do this. One way is simply to reference the resource you wish to re-use as a StaticResource.  For example, you could to define a Border in your application which shares the same border brush and background fill color as the CalendarView control like this:

    <Border Background="{StaticResource CalendarViewBackgroundFill}"
            BorderBrush="{StaticResource CalendarViewBorder}" />

    This method has certain drawbacks, however, the main one being that it is static. If theme is changed at runtime this Border’s border brush and background will not be updated. To re-use theme resources so that they are dynamic, it is necessary to use DynamicResource attached properties, like this (controls = namespace DevComponents.Silverlight.Controls):

    <Border controls:DynamicResource.BackgroundKey="CalendarViewBackgroundFill"
            controls:DynamicResource.BorderBrushKey="CalendarViewBorder" />

    The other potential drawback of using StaticResource is that when this border is being loaded the resource you are referencing has not yet been added to the application’s resources collection, causing an exception at application startup. This will happen when the static constructor of the resource loader of the library where the resource is defined has not yet been called. (To avoid this issue, use the library specific resource loader for setting the color theme and do so at the root level of your visual tree.)

  • Related posts:

    1. Dynamic Resources
    2. Typed Data Templates
    3. Customizing Month View Days in Silverlight Schedule
    4. Customizing Time Slots in Silverlight Schedule
    5. Commanding