Logo
My Account |  Site Map | Contact Us  
 The same content in Microsoft HTML help file format is included in the download package.
Understanding Theme and Skin

This section covers the following topics:

Understanding Theme

A theme applies to all controls in the application. For example, switching the application theme from "Classic" to "Aero.Normal" would change the appearance of all controls that supports themes: Button, ListBox, TreeView, etc. In another word, changing theme usually changes the appearance of the whole application.

EO.Wpf supports the following built-in themes:

Theme Remarks
ThemeNames.Classic Class Windows 2003 style theme. The value of this property is "Classic".
ThemeNames.Aero Windows 7 Aero style theme. The value of this property is "Aero.NormalColor".
ThemeNames.LunaNormalColor Windows XP normal color scheme. The value of this property is "Luna.NormalColor".
ThemeNames.LunaHomestead Windows XP homestead color scheme. The value of this property is "Luna.Homestead".
ThemeNames.LunaMetallic Windows XP metallic color scheme. The value of this property is "Luna.Metallic".
ThemeNames.LunaMetallic Windows XP metallic color scheme. The value of this property is "Luna.Metallic".
ThemeNames.Royale Windows XP royale color scheme. The value of this property is "Royale.NormalColor".
ThemeNames.MetroLight Metro light theme. The value of this property is "Metro.Light".

By default, the application theme is set to the one that matches the system theme. For example, on a Windows 7 system with Aero theme, the application theme is set to Aero.NormalColor. To change application theme, simply set ThemeManager.AppTheme property. For example:

//Switch application theme to "Classic"
ThemeManager.AppTheme = "Classic";

//The following code has the same effect
ThemeManager.AppTheme = ThemeNames.Classic;

Property ThemeName is inheritable. So setting it on a parent control automatically applies the same settings on the children of that control.

It is possible for you to define custom themes. See here for more details.

Understanding Skins

A skin is a style for a single control. Like theme, each skin also has a name. However a skin applies to a single control only. The following key points are important for skin:

  • A control can have many skins independently regardless of themes. For example, the DockView control has two skins: "VS2008" and "VS2010" that offers docking view appearance similar to Visual Studio 2008 and Visual Studio 2010. However it does not have an "Aero" skin. On the other hand, EO.Wpf has an "Aero" theme but does not have "VS2008" or "VS2010" theme;
  • Each control can register a default skin for each theme. For example, the DockView control registers "VS2008" skin as the default skin for the "Classic" theme and "VS2010" skin as the default skin for the "Aero" theme. When user switches AppTheme to "Classic", EO.Wpf theme engine switches the DockView control to use "VS2008" skin because "VS2008" skin is the default skin registered for that theme. Likewise, when user switches AppTheme to "Aero", DockView control automatically switches to "VS2010" skin. This "the default skin for theme X is skin Y" relationship is established by calling RegisterThemeStyles;
  • Many controls skin names are the same as theme names. For example, the Button control supports skin names like "Classic", "Aero", etc. However the name does not imply any relationship between the theme and skins. Their relationships are still established through RegisterThemeStyles;

Because switching application theme automatically switches skins, usually you do not need to switch skins manually. However if desired, you can also explicitly set ThemeManager.SkinName to override the default skin.

<!-- Set DockContainer to use skin "VS2008" in XAML -->
<eo:DockContainer eo:ThemeManager.SkinName="VS2008">
  <eo:DockView>
    ....
  </eo:DockView>
  <eo:DockView>
    ....
  </eo:DockView>
</eo:DockContainer>

Property SkinName is inheritable. So setting it on the DockContainer control automatically applies the same settings on the children DockView control.


Direct link to this topic