Theme プロパティでよくあるスタイル問題の回避策

概要

この記事ではスタイルでよく見られる問題をご紹介します。 1つ目は Theme プロパティを設定しても要素がテーマの外観に従って表示されない問題です。 2 つ目は、要素のスタイルを作成してもスタイルが使用されないという問題です。はじめに WPF でスタイルがどのように配置され、解決されるかを確認しましょう。

この記事は WPF のスタイルの定義について基本的な知識があることを前提としています。スタイルの基本についてはマイクロソフトのスタイルとテンプレートをご覧ください。

背景

WPF の要素は 2 つのスタイルインスタンスによって影響されます。スタイルインスタンスは「ローカル」スタイルと「テーマ」です。

注：OS システムのテーマ (Aero、XP Blue、XP Silver など) を指します。インフラジスティックスコントロールで公開する Theme プロパティではありません。インフラジスティックス Theme プロパティについては後ほどご紹介します。

テーマのスタイルはWPF が要素のデフォルトスタイルとして使用する Style です。 WPF フレームワークは、その DefaultStyleKey の値に基づいて要素に Style　を読み込みます。これは通常要素の型 + OS のテーマ名という形で名付けられます。これはコントロールの開発者によって提供される Style です。

ローカルスタイルは要素が使用されているアプリケーションによって提供されるスタイルです。要素の Style プロパティが設定され、それがローカルスタイルになります。 Style プロパティが設定されていない場合、WPF は明示的なスタイルを見つけてローカルスタイルとして使用します。明示的なスタイルはプロセスで、要素のリソースと ResourceDictionary のキーが要素の特定の型であるそのスタイルの先祖をチェックします。最初に見つかったスタイルはローカルスタイルとして使用されます。見つからない場合はアプリケーションのリソースをチェックします。要素の特定の型は、ディクショナリのスタイルを見つけるために使用するキーとして使用されます。

注：XAML の ResourceDictionary でスタイルを定義する際にキーを明示的に指定しない場合、TargetType がキーとして使用されます。

ローカルスタイルが見つかると、スタイルのセッターとトリガーがテーマスタイルより優先されます。また、OverridesDefaultStyle プロパティを設定した場合 (要素またはローカルスタイルに直接)、WPF は要素インスタンスにテーマスタイルの情報を適用しません。

Infragistics Theme プロパティは、WPF の暗黙的ローカルスタイルの機能を利用します。コントロールに Theme プロパティを設定した場合、ThemeManager クラスは、Theme に定義されたリソースが含まれる ResourceDictionary を読み込み、要素の Resources の MergedDictionaries へ置きます。

WPF が使用するスタイルをどのように決定して、Theme プロパティがどのように関わっているかがお分かりいただけたと思います。さて、次は問題を検証していきましょう。

問題 1 – 要素がテーマを使用しない

最初の問題は Theme プロパティが設定されているのに要素がそのテーマに従っていない問題です。

この問題には、いくつかのケースが考えられます。

ケース 1

使用している要素が、インフラジスティックスのクラスインスタンスから派生している場合です。たとえば、xamRibbon を含む Window 内すべてを定義するかわりに、RibbonTabItem から派生させて、タブで使用する RibbonGroups および Tools を単独で定義した場合です。

<igRibbon:RibbonTabItem x:Class="StyleIssues.DerivedNotUsingTheme.MyRibbonTabItem"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:igRibbon="http://infragistics.com/Ribbon"
   Header="Home">
    <igRibbon:RibbonGroup Caption="Clipboard">
...
    </igRibbon:RibbonGroup>
</igRibbon:RibbonTabItem>

生成したタブのインスタンスを作成してリボン内で使用します。

<Window x:Class="StyleIssues.DerivedNotUsingTheme.TestWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="clr-namespace:StyleIssues.DerivedNotUsingTheme"
   xmlns:igRibbon="http://infragistics.com/Ribbon"
   Title="TestWindow" Height="300" Width="300">
    <StackPanel>
        <igRibbon:XamRibbon Theme="Office2k7Black">
            <local:MyRibbonTabItem />
           
            <igRibbon:RibbonTabItem Header="Other" />
        </igRibbon:XamRibbon>
    </StackPanel>
</Window>

アプリケーションを実行すると、タブにマウスオーバーしてホットトラックしたときにタブが正しく表示されません。

WPF が暗黙的なローカルスタイルを探す場合、クラスの実際の型を使用します。Theme プロパティを設定すると、RibbonTabItem のスタイルを含む ResourceDictionary が配置されます。ただし、WPF は型を探さずに、この場合では Key が MyRibbonTabItem である Style を探します。

この問題を回避するにはいくつかの方法があります。派生クラスを作成しないことです。バッキングクラスを使用せずに XAML を定義し、LoadComponent を使用します。詳細についてはこちらを参照してください。あるいは、インスタンスの Style プロパティをキーが基本型である DynamicResource に設定します。

<igRibbon:RibbonTabItem x:Class="StyleIssues.DerivedNotUsingTheme.MyRibbonTabItem"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:igRibbon="http://infragistics.com/Ribbon"
    Style="{DynamicResource {x:Type igRibbon:RibbonTabItem}}"
   Header="Home">
    <igRibbon:RibbonGroup Caption="Clipboard">
...
    </igRibbon:RibbonGroup>
</igRibbon:RibbonTabItem>

ケース 2

この問題が発生するもう 1 つのケースとして、要素の Style を明示的または暗黙的に設定した場合が考えられます。よくある原因の 1 つとして、フィールドに EditorStyle を使用することが考えられます。

<Window x:Class="StyleIssues.SetStyle.TestWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:igDP="http://infragistics.com/DataPresenter"
   xmlns:igEditors="http://infragistics.com/Editors"
   xmlns:sys="clr-namespace:System;assembly=mscorlib"
   Title="TestWindow" Height="300" Width="600">
    <Window.Resources>
        <igEditors:ComboBoxItemsProvider x:Key="departments">
            <sys:String>Accounting</sys:String>
            <sys:String>Marketing</sys:String>
            <sys:String>Sales</sys:String>
            <sys:String>Admin</sys:String>
        </igEditors:ComboBoxItemsProvider>
       
        <Style x:Key="comboStyle" TargetType="igEditors:XamComboEditor">
            <Setter Property="ItemsProvider" Value="{StaticResource departments}" />
        </Style>
    </Window.Resources>
    <Grid>
        <igDP:XamDataGrid Theme="LunaOlive" BindToSampleData="True">
            <igDP:XamDataGrid.FieldLayouts>
                <igDP:FieldLayout>
                    <igDP:Field Name="department">
                        <igDP:Field.Settings>
                            <igDP:FieldSettings EditorStyle="{StaticResource comboStyle}" />
                        </igDP:Field.Settings>
                    </igDP:Field>
                </igDP:FieldLayout>
            </igDP:XamDataGrid.FieldLayouts>
        </igDP:XamDataGrid>
    </Grid>
</Window>

WPF はローカルスタイルを探すときに最初に Style プロパティをチェックします。

設定されている場合はそれがローカルスタイルになりますが、設定されていない場合は暗黙スタイルを探そうとします。暗黙スタイルは使用されないため、要素に提供される Theme の Style は使用されません。

この問題を回避するには、Style の Based on を使用している Theme の Style に設定する方法があります。

   xmlns:igThemes="http://infragistics.com/Themes"
   Title="TestWindow" Height="300" Width="600">
    <Window.Resources>
...
       
        <Style x:Key="comboStyle" 
              TargetType="igEditors:XamComboEditor"
               BasedOn="{x:Static igThemes:EditorsLunaNormal.XamComboEditor}"
              >
            <Setter Property="ItemsProvider" Value="{StaticResource departments}" />
        </Style>
    </Window.Resources>

注：Style プロパティを明示的に設定せずに、 Style をターゲット要素自身、または先祖の 1 つである要素の Resources に置いた場合に同じような問題が発生します。回避策は前途と同じです。BasedOn を Style に設定してください。

問題 2 – カスタムスタイルが使用されない。

2 つ目は、要素に Style を設定しているにもかかわらず、Theme プロパティが設定されている場合に Style を使用しないという問題です。

<Window.Resources>
    <Style TargetType="igWindows:TabItemEx">
        <Setter Property="FontWeight" Value="Bold" />
    </Style>
</Window.Resources>
<Grid>
    <igWindows:XamTabControl Theme="Office2k7Black">
        <igWindows:TabItemEx Header="One" />
        <igWindows:TabItemEx Header="Two" />
        <igWindows:TabItemEx Header="Three" />
    </igWindows:XamTabControl>
</Grid>

Theme プロパティを設定した場合、Style は Theme を設定したコントロールの Resource に置かれます。 WPF は暗黙的な Style を検索する場合に、その要素 (この場合 xamTabControl) の Resource を見つけるとそれ以上検索しません。つまり、Window や Application に設定した Style は無視されてしまいます。回避策としては、Style を Theme　を設定した要素の Resource へ移動する方法があります。

注：この Style は最初に見つけられるため (Theme プロパティによって提供された ResourceDictionary が Resources.MergedDictionariesにあり、MergedDictionaries がリソースより先にチェックされるため)、Theme によって提供された Style は使用されません。そのため、問題 1 のケース 2 でご紹介したアプローチを使用する必要があります。

<igWindows:XamTabControl Theme="Office2k7Black">
    <igWindows:XamTabControl.Resources>
        <Style TargetType="igWindows:TabItemEx"
              BasedOn="{x:Static igThemes:PrimitivesOffice2k7Black.TabItemEx}">
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
    </igWindows:XamTabControl.Resources>
    <igWindows:TabItemEx Header="One" />
    <igWindows:TabItemEx Header="Two" />
    <igWindows:TabItemEx Header="Three" />
</igWindows:XamTabControl>

Theme プロパティでよくあるスタイル問題の回避策

概要

背景

問題 1 – 要素がテーマを使用しない

ケース 1

ケース 2

問題 2 – カスタムスタイルが使用されない。

製品について

Ultimate UI for WPF

概要

背景

問題 1 – 要素がテーマを使用しない

ケース 1

ケース 2

問題 2 – カスタム スタイルが使用されない。

Related Articles

XamGantt – 特定の列（インジケーター／タスクモード など）を非表示にする方法

XamDataGrid – TimeSpan型の値を24時間超でも「時:分:秒」形式で表示する方法

XamDataGrid – Ctrlキーによる行選択解除を無効にする方法

XamDataGrid で CRUD 操作の元に戻す/やり直しを実装する (Undo/Redo Frameworkを使用)

XamDataGrid で Undo/Redo 機能を使用する

XamDataGrid – DateTimeFieldのカレンダーを開いたときに特定の月を表示させる方法

製品について

Ultimate UI for WPF

問題 2 – カスタムスタイルが使用されない。

XamGantt – 特定の列（インジケーター／タスクモードなど）を非表示にする方法