リサイズはクリックかドラッグ

テーマテンプレートを適用する

テーマテンプレートはリソースファイルアセンブリ(*.dll)として提供され、InputMan for WPF をインストールしたディレクトリの Bin フォルダにコピーされています。それぞれのテーマテンプレートに対応するリソースファイルアセンブリは以下のとおりです。

テーマリソースファイルアセンブリリソースを参照する際に指定するリソース位置説明
Generic(なし)(なし)標準的なデザインのテーマです。テーマテンプレートを明示的に指定しない場合のデフォルトテーマとなります。
AeroGrapeCity.WPF.InputMan.Aero.dllThemes/Aero.NormalColor.xamlAero の外観に似たデザインのテーマです。
Aero2GrapeCity.WPF.InputMan.Aero2.dllThemes/Aero2.NormalColor.xamlAero2 の外観に似たデザインのテーマです。
AeroLiteGrapeCity.WPF.InputMan.AeroLite.dllThemes/AeroLite.NormalColor.xamlAeroLite の外観に似たデザインのテーマです。
BureauBlueGrapeCity.WPF.InputMan.BureauBlue.dllThemes/BureauBlue.xamlOffice Blue の外観に似たデザインのテーマです。
BureauBlackGrapeCity.WPF.InputMan.BureauBlack.dllThemes/BureauBlack.xamlOffice Black の外観に似たデザインのテーマです。
ClassicGrapeCity.WPF.InputMan.Classic.dllThemes/Classic.xamlClassic の外観に似たデザインのテーマです。
ExpressionDarkGrapeCity.WPF.InputMan.ExpressionDark.dllThemes/ExpressionDark.xamlExpression Blend の外観に似たデザインのテーマです。
Luna(Homestead)GrapeCity.WPF.InputMan.Luna.dllThemes/Luna.Homestead.xamlLuna Homestead の外観に似たデザインのテーマです。
Luna(Mettlic)GrapeCity.WPF.InputMan.Luna.dllThemes/Luna.Metallic.xamlLuna Metallic の外観に似たデザインのテーマです。
Luna(NormalColor)GrapeCity.WPF.InputMan.Luna.dllThemes/Luna.NormalColor.xamlLuna NormalColor の外観に似たデザインのテーマです。
RoyaleGrapeCity.WPF.InputMan.Royale.dllThemes/Royale.NormalColor.xamlRoyale の外観に似たデザインのテーマです。
メモ メモ

それぞれのコントロールに対するテーマテンプレートの適用例は、各コントロールの「外観を変更する」トピックを参照してください。

テーマテンプレートの適用方法

InputMan for WPF の各コントロールに対してこれらのテーマテンプレートを適用するには、以下の手順にしたがって使用するテーマテンプレートを設定します。

  1. ソリューションエクスプローラでプロジェクトノードあるいは「参照設定」ノードを右クリックし、コンテキストメニューから「参照の追加」を選択します。
  2. 「参照の追加」ダイアログボックスで、使用するテーマテンプレートのリソースファイルアセンブリを見つけて選択し、OK ボタンをクリックしてプロジェクトに参照を追加します。
  3. UserControl あるいは 特定のコンテナコントロールのリソースディクショナリに、テーマテンプレートのリソースを読み込みます。Source プロパティに指定する URI 形式は「/assemblyShortName;component/(上記のリソース位置を記載)」となります。

以下のサンプルコードは UserControlResources 内に BureauBlue テーマテンプレートのリソースを追加する例です。

XAML
<UserControl.Resources>
    <ResourceDictionary Source="/GrapeCity.WPF.InputMan.BureauBlue;component/Themes/BureauBlue.xaml"/>
</UserControl.Resources>
メモ メモ

テーマテンプレートを特定のコンテナのリソースとして指定すると、コンテナ上に配置されたコントロールに対してのみテーマが適用されます。これにより、複数のテーマテンプレートを同一ページ上で使用することができます。

AeroLite の適用について

AeroLite をコンボコントロールあるいはリストコントロールのスクロールバーに適用する場合、以下の手順が必要となります。これは、スクロールバーは標準のフレームワークを利用しているため、InputMan のテーマテンプレートが適用されないためです。

  • presentationframework.AeroLite.dll を参照設定に追加する。
  • リソースディクショナリに、presentationframework.AeroLite のリソースを読み込みます。
    XAML
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/presentationframework.AeroLite;component/themes/aeroLite.normalcolor.xaml"/>
                <ResourceDictionary Source="/GrapeCity.WPF.InputMan.AeroLite;component/Themes/AeroLite.NormalColor.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
テーマを適用したコントロールに対してスタイルを設定する

テーマを適用したコントロールに対してスタイルを設定するには、Style 要素を定義する際に、BasedOn プロパティを使用して、該当するコントロールに対してテーマ内で定義されているスタイルのキーを指定します。これにより、テーマ内で定義されているスタイルを保持しつつ、特定のスタイル要素をカスタマイズすることができます。

それぞれのコントロールに対するスタイルキーは以下の通りです。

コントロールスタイルキーの値
GcComboBoxGcComboBox_StyleKey
GcComboBoxComboDropDownWindow_StyleKey
GcDropDownCalculatorGcDropDownCalculator_StyleKey
GcDropDownCalendarGcDropDownCalendar_StyleKey
GcDateTimeGcDateTime_StyleKey
GcListBoxGcListBox_StyleKey
GcListBoxListHeader_StyleKey
GcListBoxSubItem_StyleKey
GcListBoxListItem_StyleKey
GcListBoxListItemBase_StyleKey
GcMaskGcMask_StyleKey
GcNumberGcNumber_StyleKey
GcTextBoxGcTextBox_StyleKey

以下のサンプルコードは、BasedOn プロパティを使用してスタイルキーを指定した場合と指定しなかった場合の表示の違いを示します。このサンプルコードでは3つの GcDateTime を表示し、それぞれスタイル設定なし、BasedOn プロパティを使用せずにスタイルを設定、BasedOn プロパティを使用してスタイルを設定した結果を示しています。

XAML
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <StackPanel.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/GrapeCity.WPF.InputMan.ExpressionDark;component/Themes/ExpressionDark.xaml"/>
                <ResourceDictionary>
                    <Style x:Key="Style1" TargetType="im:GcDateTime">
                        <Setter Property="Foreground" Value="Red" />
                    </Style>
                    <Style x:Key="Style2" TargetType="im:GcDateTime" BasedOn="{StaticResource GcDateTime_StyleKey}">
                        <Setter Property="Foreground" Value="Red" />
                    </Style>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </StackPanel.Resources>
    <im:GcDateTime />
    <im:GcDateTime Style="{StaticResource Style1}" />
    <im:GcDateTime Style="{StaticResource Style2}" />
</StackPanel>
上記サンプルコードの実行結果
(図): 上記サンプルコードの実行結果
参照