Table of Contents
Table of Contents
Custom Skins and Themes

EO.Wpf allows you to create custom skins and themes for both EO.Wpf control and your own custom control. This topic explains how to create custom skin/theme for an EO.Wpf control. Steps to create custom skin/theme for your own custom control are explained here.

Custom Skins

Follow these steps to create a custom skin:

  1. In the assembly where the skin style to be defined, create a Themes folder in the root directory, then create a resource dictionary Generic.xaml inside that folder;

  2. Add the following attribute to the root ResourceDictionary element:

    XAML
    Copy 
    xmlns:eo="http://schemas.essentialobjects.com/wpf/"

    For example, the final resource file can look like this:

    XAML
    Copy 
    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:eo="http://schemas.essentialobjects.com/wpf/"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
                    ....
</ResourceDictionary>

  3. Add a new style. For example, you can define a style for Button that looks like this:

    XAML
    Copy 
    <Style TargetType="{x:Type eo:Button}">
    <Setter Property="Foreground" Value="Red"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type eo:Button}">
                <Border BorderBrush="Red" BorderThickness="1" Padding="3">
                    <ContentPresenter  />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

  4. Add "x:Key" attribute to the style. The key must be an EO.Wpf.NamedResourceKey object. For example:

    XAML
    Copy 
    <Style x:Key="{eo:NamedResourceKey Sample_Button_Red}" TargetType="{x:Type eo:Button}">
    ....
</Style>

  5. Call ThemeManager.RegisterSkinStyles to register the style. The style should be registered only once and it should be registered before they are used. For example, you can register it inside your App class's constructor, or a static constructor. The following code demonstrates how to call this function:

    Copy 
    //Register two skins for EO.Wpf.Button control
ThemeManager.RegisterSkinStyles(
    new SkinStyleInfo(typeof(EO.Wpf.Button), "Red", typeof(CustomSkin1).Assembly, "Sample_Button_Red"),
    new SkinStyleInfo(typeof(EO.Wpf.Button), "Blue", typeof(CustomSkin1).Assembly, "Sample_Button_Blue"));

    Note the second argument must be the assembly in which the theme styles are defined.

Once the styles are registered, you can use them the same way as predefined styles:

XAML
Copy 
<eo:Button eo:ThemeManager.SkinName="Red">Red Button</eo:Button>
<eo:Button eo:ThemeManager.SkinName="Blue">Blue Button</eo:Button>

Custom Themes

A custom theme is a collection of skins for a set of controls. In order to register a theme, you must first register all the skins that theme will use. Once all the skins are registered, call ThemeManager.RegisterThemeStyles to associate a theme name to the skins. For example, the following code associates theme "CustomTheme1" to "Style1" skin for the Button control, and to "Style2" skin for the ComboBox control:

Copy 
//Register theme "CustomTheme1"
ThemeManager.RegisterThemeStyles(
    new ThemeStyleInfo("CustomTheme1", typeof(EO.Wpf.Button), "Style1"),
    new ThemeStyleInfo("CustomTheme2", typeof(EO.Wpf.ComboBox), "Style2"));

Once a theme is registered, applying that theme automatically applies the associated styles for each control based on their types. For example, after the above code, applying "CustomTheme1" would apply "Style1" for the Button control and "Style2" for the ComboBox control.

A theme does not have to cover all controls. If no style is found for a control for a theme, then the default style for that control is applied. To register a default style for a control, pass null (Visual Basic Nothing) as the skin name when calling RegisterSkinStyles.