Table of Contents
Table of Contents
Monitor Theme/Skin Change

EO.Wpf allows you to monitor application theme or control skin change. This allows you to switch styles for certain UI element based on the current application theme or the current skin of another control. For example, you may have a Border element in your code that you wish to switch to gray color if the current application theme is "Classic", but wish to switch to another color if the current application theme is "Aero.NormalColor".

EO.Wpf ThemeManager offers three attached properties to support this feature:

Property Remarks
TrackAppTheme This property can be used on any DependencyObject, not just on an EO.Wpf control. Once it is set to true on a DependencyObject, EO.Wpf ThemeManager will updates the value of EffectiveAppThemeName attached property on that object.
EffectiveAppThemeName The value of this attached property is set to the current application theme name if TrackAppTheme is set true on the target object.
EffectiveSkinName The value of this attached property is updated by the ThemeManager when it switches the skin for a control that is registered with the ThemeManager.

The following sample demonstrates how to use these properties to the color of a Border control based on the current application theme:

XAML
Copy 
<Border eo:ThemeManager.TrackAppTheme="True" Width="100" Height="100" HorizontalAlignment="Left" Margin="10,10,0,0">            
    <Border.Style>
        <Style TargetType="{x:Type Border}">
            <Setter Property="BorderThickness" Value="1"></Setter>
            <Style.Triggers>
                <!-- Switch border color to #828790 if the current theme is Aero.NormalColor -->
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=(eo:ThemeManager.EffectiveAppThemeName)}" Value="Aero.NormalColor">
                    <Setter Property="BorderBrush" Value="#828790"></Setter>
                </DataTrigger>                
                <!-- Switch border color to gray if the current theme is Classic -->
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=(eo:ThemeManager.EffectiveAppThemeName)}" Value="Classic">
                    <Setter Property="BorderBrush" Value="Gray"></Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Border.Style>            
</Border>

EO.Wpf.ThemeManager also provides two attached event: EffectiveAppThemeNameChanged and EffectiveSkinNameChanged that will be raised when EffectiveAppThemeName/ EffectiveSkinName is changed. Handle these two events are the same as handle any other routed events.