Silverlight ToolkitのTheme
Silverlight ToolkitのMicrosoft.Windows.Controls.Theming.dllには、ImplicitStyleManager(以下、ISM)の仕組みを利用したThemeというクラスも用意されています。ThemeはContentControlとなっており、Styleを適用させたい階層をThemeではさむようなかたちで使用します。実際にはThemeクラス自身に対してISMのSetExternalResourceDictionaryメソッドでリソースが設定されているような動作になっています。
Themeは抽象クラスとなっているので、継承して使用します。ToolkitにはThemeクラスを継承した下記の6つのクラスがそれぞれ別のアセンブリとして用意されています。
クラス名 | アセンブリ名 |
---|---|
ExpressionDarkTheme | Microsoft.Windows.Controls.Theming.ExpressionDark.dll |
ExpressionLightTheme | Microsoft.Windows.Controls.Theming.ExpressionLight.dll |
RainierOrangeTheme | Microsoft.Windows.Controls.Theming.RainierOrange.dll |
RainierPurpleTheme | Microsoft.Windows.Controls.Theming.RainierPurple.dll |
ShinyBlueTheme | Microsoft.Windows.Controls.Theming.ShinyBlue.dll |
ShinyRedTheme | Microsoft.Windows.Controls.Theming.ShinyRed.dll |
これらのThemeの使い方もとっても簡単です。まず、参照設定でToolkitのMicrosoft.Windows.Controls.Theming.dllと使いたいThemeのアセンブリを追加します。ここではMicrosoft.Windows.Controls.Theming.ExpressionDark.dllを使います。
そして下記のようにStyleを適用させる階層をExpressionDarkTheme要素で囲みます(つまりExpressionDarkThemeのContentとして設定する)。
<UserControl x:Class="ThmeSample.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:expressionDark="clr-namespace:Microsoft.Windows.Controls.Theming;assembly=Microsoft.Windows.Controls.Theming.ExpressionDark"
Width="200" Height="200" FontSize="36">
<expressionDark:ExpressionDarkTheme ApplyMode="OneTime">
<StackPanel x:Name="LayoutRoot" Background="White">
<Button Content="Button"/>
</StackPanel>
</expressionDark:ExpressionDarkTheme>
</UserControl>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:expressionDark="clr-namespace:Microsoft.Windows.Controls.Theming;assembly=Microsoft.Windows.Controls.Theming.ExpressionDark"
Width="200" Height="200" FontSize="36">
<expressionDark:ExpressionDarkTheme ApplyMode="OneTime">
<StackPanel x:Name="LayoutRoot" Background="White">
<Button Content="Button"/>
</StackPanel>
</expressionDark:ExpressionDarkTheme>
</UserControl>
このような感じで簡単にThemeが適用されます。なお、これら6つのテーマはコアコントロール、SDKのライブラリ、Toolkitのすべてのコントロールの種類のStyleがリソースとして含まれています。
なお、注意点としましては現在の仕様ではScrollViewerやTabControlなどPanel系以外のコンテナに配置したコントロールにはThemeが適用されないようです。