Windows XP ビジュアル スタイルの使用

  • [アーティクル]

Windows User Experience Team
Microsoft Corporation

May 2001

この文書は暫定版であり、将来変更される可能性があります。

要約: この記事では、Microsoft Windows XP を使用して、アプリケーションにビジュアル スタイルを適用するときに必要な一般的な作業について説明します。

目次

はじめに
ComCtl32.dll バージョン 6
ビジュアル スタイルを使用するための手順
サードパーティの拡張機能を使用しないアプリケーションで ComCtl32.dll バージョン 6 を使用する
プロセスに導入された拡張機能、プラグイン、または DLL を使用するアプリケーションで ComCtl32 バージョン 6 を使用する
RunDll32.exe によって起動する コントロール パネルまたは DLL で ComCtl32 バージョン 6 を使用する
ビジュアル スタイルをカスタム コントロールと共に使用する
オーナー描画コントロールを有効にしてビジュアル スタイルを使用する
ビジュアル スタイルを持つダイアログ ボックスまたはウィンドウでコントロールがビジュアル スタイルを持たないように見せる
UxTheme Manager を使用してビジュアル スタイルを持たない部品のコントロールをレンダする
ビジュアル スタイルを HTML コンテンツと共に使用する
UxTheme Manager にトップレベルのウィンドウを無視させる
３２ビット アンチエイリアス アイコンを使用する
Windows XP と Windows の旧バージョン向けアプリケーションをリリースする
まとめ

はじめに

Microsoft(R) Windows(R) XP を使用すると、単色からテクスチャや図形まで、ビジュアル スタイルやコントロールおよびウィンドウの外観を定義することができます。ウィンドウの非クライアント (フレームおよびキャプション) 領域の各部分と同様に、コントロールの定義済みの各部分を制御することができます。また、ユーザーは、Windows のコントロール パネルにある [表示] タブを使用して、従来のビジュアル スタイルとほかの使用可能なスタイルを切り替えることができます。

ビジュアル スタイルは、Windows XP リリースにも用意されています。ヘルパー ライブラリおよびアプリケーションのプログラミング インターフェイス (API) を使用すると、コードをほとんど変更せずに、アプリケーションに Windows XP のビジュアル スタイルを組み込むことができます。詳細については、MSDN ライブラリで Platform SDK のドキュメントを参照してください。

ComCtl32.dll バージョン 6

Windows XP オペレーティング システムで実行中のすべてのアプリケーションには、非クライアント領域があります。この領域には、ウィンドウ枠と非クライアント スクロールバーが含まれます。既定では、ビジュアル スタイルは非クライアント領域に適用されます。つまり、非クライアント領域の外観は、現在インストールされているビジュアル スタイルによって指定されます。クライアント領域の一般的なコントロールにビジュアル スタイルを適用するには、ComCtl32.dll バージョン 6 以降を使用する必要があります。旧バージョンとは異なり、ComCtl32.dll のバージョン 6 は再配布することができません。ダイナミック リンク ライブラリ (DLL) のバージョン 6 を使用するには、バージョン 6 が組み込まれているオペレーティング システムを使用する必要があります。Windows XP には、バージョン 5 とバージョン 6 の両方が付属しています。ComCtl32.dll バージョン 6 には、ユーザー コントロールとコモン コントロールの両方が含まれています。既定では、アプリケーションは、User32.dll で定義されたユーザー コントロールと、ComCtl32.dll バージョン 5 で定義されたコモン コントロールを使用します。

アプリケーションでビジュアル スタイルを使用する場合、ComCtl32.dll バージョン 6 が使用可能であれば使用することを示すアプリケーション マニフェストを追加する必要があります。バージョン 6 には、複数の新しいコントロールおよび従来のコントロール用の新しいオプションが含まれていますが、最大の変更は、ウィンドウのコントロールの外観の変更をサポートすることです。

ビジュアル スタイルを使用するための手順

ビジュアル スタイルをコントロールに追加するには、次の手順を実行します。

サードパーティの拡張機能を使用しないアプリケーションで ComCtl32.dll バージョン 6 を使用する

以下はサードパーティ拡張機能を使用しないアプリケーションの例です。

  • 電卓
  • フリーセル
  • マインスイーパ
  • メモ帳
  • ソリティア

マニフェストを作成しアプリケーションがビジュアル スタイルを使用できるようにするには

  1. ComCtl32.lib にリンクし、InitCommonControls を呼び出します (MSDN ライブラリの Platform SDK ドキュメントを参照)。

  2. 次の XML 形式を含むソース ツリーに YourApp.exe.manifest と呼ばれるファイルを追加します。

    
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">
<assemblyIdentity
    version="1.0.0.0"
    processorArchitecture="X86"
    name="CompanyName.ProductName.YourApp"
    type="win32"
/>
<description>アプリケーションの説明</description>
<dependency>
    <dependentAssembly>
        <assemblyIdentity
            type="win32"
            name="Microsoft.Windows.Common-Controls"
            version="6.0.0.0"
            processorArchitecture="X86"
            publicKeyToken="6595b64144ccf1df"
            language="*"
        />
    </dependentAssembly>
</dependency>
</assembly>

  3. 次のように、アプリケーションのリソース ファイルにマニフェストを追加します。

    CREATEPROCESS_MANIFEST_RESOURCE_ID RT_MANIFEST "YourApp.exe.manifest"

注 : 上記のエントリをリソースに追加する場合は、1 行で構成する必要があります。代わりに、XML マニフェスト ファイルをアプリケーションの起動ファイルと同じディレクトリに配置することもできます。オペレーティング システムは、 まずファイル システムからマニフェストを読み込み、次に、実行可能ファイルのリソース セクションをチェックします。ファイル システムのバージョンが優先されます。

プロセスに導入された拡張機能、プラグイン、または DLL を使用するアプリケーションで ComCtl32 バージョン 6 を使用する

以下は拡張機能を使用するアプリケーションの例です。

  • Microsoft 管理コンソール (Mmc.exe)
  • Windows Shell
  • Microsoft(R) Visual Studio(R)

マニフェストを作成しアプリケーションがビジュアル スタイルを使用できるようにするには

  1. Platform SDK, Feburary 2001 Edition (Windows XP Beta 2 対象) 以降を使用してください。

  2. 次のように、コモン コントロール ヘッダー ファイルを含みます。

    #include "commctrl.h"

  3. コンパイラの変数プリプロセッサの定義を次のように定義します。

    #define SIDEBYSIDE_COMMONCONTROLS 1

    次の XML 形式を持つソース ツリーに YourApp.manifest と呼ばれるファイルを追加します。

    
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">
     <assemblyIdentity
    version="1.0.0.0"
    processorArchitecture="X86"
    name="CompanyName.ProductName.YourApp"
    type="win32"
/>
<description>アプリケーションの説明</description>
<dependency>
    <dependentAssembly>
        <assemblyIdentity
            type="win32"
            name="Microsoft.Windows.Common-Controls"
            version="6.0.0.0"
            processorArchitecture="X86"
            publicKeyToken="6595b64144ccf1df"
            language="*"
        />
    </dependentAssembly>
</dependency>
</assembly>

  4. 次のように、アプリケーションのリソース ファイルにマニフェストを追加します。

    CREATEPROCESS_MANIFEST_RESOURCE_ID RT_MANIFEST "YourApp.manifest"

    Winuser.rh には、次の定義が含まれます。

    #define CREATEPROCESS_MANIFEST_RESOURCE_ID 1

    #define CONTROL_PANEL_RESOURCE_ID 123

    #define RT_MANIFEST 24

RunDll32.exe によって起動するコントロール パネルまたは DLL で ComCtl32 バージョン 6 を使用する

マニフェストを作成しアプリケーションがビジュアル スタイルを使用できるようにするには

  1. ComCtl32.lib にリンクし、InitCommonControls を呼び出します。

  2. 次の XML 形式を持つソース ツリー に YourApp.cpl.manifest と呼ばれるファイルを追加します。

    
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">
<assemblyIdentity
    version="1.0.0.0"
    processorArchitecture="X86"
    name="CompanyName.ProductName.YourApp"
    type="win32"
/>
<description>アプリケーションの説明</description>
<dependency>
    <dependentAssembly>
        <assemblyIdentity
            type="win32"
            name="Microsoft.Windows.Common-Controls"
            version="6.0.0.0"
            processorArchitecture="X86"
            publicKeyToken="6595b64144ccf1df"
            language="*"
        />
    </dependentAssembly>
</dependency>
</assembly>

  3. 次のように、アプリケーションのリソース ファイルにマニフェストを追加します。

    CONTROL_PANEL_RESOURCE_ID RT_MANIFEST "YourCpl.manifest"

注 : コントロール パネル アプリケーションを書き込む場合は、適切な分類項目に配置します。コントロール パネルは、コントロール パネル アプリケーションの分類項目をサポートするようになります。これは、コントロール パネル アプリケーションに識別子が割り当てられ、プログラムの追加や削除、外観およびテーマ、または日付、時間、言語、および地域のオプションなどのタスク領域に分けられることを意味します。

ビジュアル スタイルをカスタム コントロールと共に使用する

ビジュアル スタイルをコントロールに追加する手順やその関連コードの例で引用された UxTheme API は、ヘッダーファイル Uxtheme.h で定義されます。API の要素は Platform SDK に記録されます。ビジュアル スタイルをコントロールに適用する手順の説明に加えて、このセクションでは、描画コード サンプルを示し、コントロールを描画するヒントを説明します。

ビジュアル スタイルを適用するコントロールを有効にするには

  1. OpenThemeData を呼び出し、ビジュアル スタイルを適用するコントロールの hwnd とコントロールのタイプを記述するクラス リストを渡します。クラスは、Tmschema.h で定義されます。OpenThemeData は、HTHEME ハンドルを返します。ただし、ビジュアル スタイル マネージャが無効か、または現在のビジュアル スタイルが指定されたコントロールの特定情報を提供できない場合は、この関数は NULL を返します。戻り値が NULL の場合は、非ビジュアル スタイル描画機能を使用します。
  2. コントロールを描画するには、DrawThemeBackground を呼び出して次に渡します。
    • OpenThemeData から返されたテーマ ハンドル。コントロールのレンダリングに使用する HDC です。
    • レンダするコントロールの部品を記述する部品識別子。コントロール部品および状態に関する情報については、Theme Parts and States (英語) を参照してください。
    • 部品の現在の状態を記述する状態識別子
    • コントロールがレンダされる四角形の座標を含む RECT 構造体を差すポインタ
  3. 部分的に透明にできる部品もあります。これは、テーマ ハンドル、コントロール部品、およびコントロール状態と共に IsThemeBackgroundPartiallyTransparent を呼び出して指定します。
  4. コントロールがテキストを描画する場合、コントロールのコンテンツ領域の内部にテキストを配置し、フォントを選択します。
    • コンテンツ領域の位置を決めるには、GetThemeBackgroundContentRect を呼び出します。
    • 任意のフォントを デバイス コンテキスト (DC) に追加し、その後、DrawThemeText を呼び出します。この関数を使用すると、影付きテキストなどの視覚効果を複数のコントロールで使用することができます。
  5. コントロールが WM_THEMECHANGED メッセージを受信した場合は、次の手順を実行する必要があります。

    • CloseThemeData を呼び出して既存のテーマ ハンドルを閉じます。

    • OpenThemeData を呼び出して新しく読み込まれたビジュアル スタイルのテーマ ハンドルを取得します。

    • 次のコード サンプルは、2 つの呼び出しを示します。

      case WM_THEMECHANGED:
        CloseThemeData (hTheme);
        hTheme = OpenThemeData (hwnd, L"MyClassName");
  6. コントロールが WM_DESTROY メッセージを受け取った場合は、CloseThemeData を呼び出して OpenThemeData の呼び出し時に返されたテーマ ハンドルを開放します。

描画コードの例

次のコード サンプルは、ボタン コントロールの描画方法を示します。

HTHEME hTheme = NULL;
hTheme = OpenThemeData(hwndButton, "Button");
...
DrawMyControl(hDC, hwndButton, hTheme, iState);
...
if (hTheme)
{
    CloseTheme(hTheme);
}

void DrawMyControl(HDC hDC, HWND hwndButton, HTHEME hTheme, int iState)
{
    RECT rc, rcContent;
    TCHAR szButtonText[255];
    HRESULT hr;

    GetWindowRect(hwndButton, &rc);
    GetWindowText(hwndButton, szButtonText,
                 ARRAYSIZE(szButtonText));

    if (hTheme)
    {
        hr = DrawThemeBackground(hTheme, hDC, BP_BUTTON,
                iState, &rc, 0);
        // 結果コードは常に確認してください。

        hr = GetThemeBackgroundContentRect(hTheme,
                BP_BUTTON, iState, &rc, &rcContent);
        hr = DrawThemeText(hTheme, hDC, BP_BUTTON, iState,
                szButtonText, lstrlen(szButtonText),
                DT_CENTER | DT_VCENTER | DT_SINGLELINE,
                0, &rcContent);
    }
    else
    {
        // ビジュアル スタイルを使用せずにコントロールを描画します。
    }
}

オーナー描画コントロールを有効にしてビジュアル スタイルを使用する

Windows XP を使用すると、コントロールを線と塗りつぶしの色以外で構成できます。したがって、コントロールの状態に応じてさまざまなテクスチャやパターンを含むことができます。つまり、既存のプログラミング要素を使用しても、ビジュアル スタイルを適用済みのコントロールの外観と雰囲気を持つオーナー描画コントロールを記述できません。既にオーナー描画コントロールを持つコードがある場合は、次のオプションがあります。

  • SetWindowTheme を呼び出して、コントロールのテーマをオフにします。

    SetWindowTheme (hwndButton, TEXT (" "), TEXT (" "));

    Windows の旧バージョンと同様に、 コントロールがレンダされます。

  • オーナー描画メソッドをコントロールで継続して使用することができますが、無視されるプロパティもあります。たとえば、ボタンの背景色を変更すると、ボタンにビジュアル スタイルが適用されたように描画されますが、背景色は指定した色ではありません。ただし、フォントを変更すると、ボタンは指定されたフォントで描画されます。

ビジュアル スタイルを持つダイアログ ボックスまたはウィンドウでコントロールがビジュアル スタイルを持たないように見せる

ウィンドウ内のほかのコントロールにビジュアル スタイルが適用されていても、アプリケーションのカスタム描画コントロールにビジュアル スタイルを使用しない場合があります。ビジュアル スタイルを持たない状態のカスタム描画コントロールを表示するには、SetWindowTheme を呼び出し、ウィンドウでコントロールにハンドルを渡し、pszSubAppName および pszSubIdList パラメータに空の文字列を渡します。SetWindowTheme 関数を空の文字列で呼び出すと、ビジュアル スタイルを持たない外観でコントロールがレンダされます。次のコードの断片は、ボタン コントロールの作成方法と、SetWindowTheme を呼び出してボタンからビジュアル スタイルを削除する方法を示しています。

HWND hwndButton;

hwndButton = CreateWindow (TEXT ("button"), ...);
if (hwndButton)
{
   SetWindowTheme (hwndButton, TEXT (" "), TEXT (" "));
}

注 : 実行時にコントロールをビジュアル スタイル コントロールに変更する場合は、SetWindowTheme を呼び出しますが、2 つの文字列パラメータに NULL を渡します。

UxTheme Manager を使用してビジュアル スタイルを持たない部品のコントロールをレンダする

コモン コントロール以外のコントロールがある場合、ビジュアル スタイル ファイルがインストールされているコンピュータでそのコントロールを適切な外観にするには、次のいずれかのアプローチを実行します。

  • 基本的なアプローチでは、システムのメトリック カラーを使用します。多くのシステムのメトリック カラーは、ビジュアル スタイル ファイルを適用したときに設定します。

  • ほかのコントロールの部品を使用して、部品ごとにレンダすることができます。たとえば、カレンダー コントロールは、グリッドで構成されています。グリッドで形成された各正方形は、ツール バー ボタンとして扱うことができます。正方形をツール バー ボタンとしてプログラムするには、次の手順を実行します。

    次のように、OpenThemeData を呼び出します。

    OpenThemeData (hwnd, "Toolbar");

    返されたテーマ ハンドルを使用してカレンダー上の各正方形をレンダします。

  • 指定されたコントロールに対し OpenThemeData を複数回呼び出し、適切なテーマ ハンドルを使用して、コントロール部品を混ぜたり合わせたりし、別の部品を描画することができます。ただし、ビジュアル スタイルによって、ほかの部品と互換性のない部品もあります。

  • コントロール レベル以上に Windows XP の外観を一致させる必要のある特殊なアプリケーションでは、現在読み込まれているビジュアル スタイルを検出して、その外観を一致させるために設計されたカスタム レンダリングを持つ必要があります。これは、ビジュアル スタイル アーキテクチャを提供するアプリケーションに役立ちます。

ビジュアル スタイルを HTML コンテンツと共に使用する

アプリケーションには、HTML で書き込まれ、UI 要素に HTML を使用したり WebObject をホストする HTML アプリケーション (HTA) や Win32(R) アプリケーションとして配置されるものが多数あります。Windows XP での実行時、これらのアプリケーションは、同じオペレーティング システムで実行中の Win32 ベースのアプリケーションと同じ外観を持つことがあります。次に、ビジュアル スタイルを HTML コンテンツに適用する場合の注意事項を示します。

  • HTML コンテンツに関連するビジュアル スタイルは、ボタン、スクロールバー、選択コントロールなどの標準 HTML コントロールにのみ適用されます。Windows XP のビジュアル スタイルは、HTML ページのコントロールに自動的に適用されます。ページにビジュアル スタイルを適用しない場合は、属性を NO に設定した META タグを使用します。META タグについては、次のセクションで説明します。

  • 背景や罫線などの CSS (カスケード スタイル シート) プロパティ を変更する HTML ページには、ビジュアル スタイルが適用されません。これらの HTML ページは、指定された CSS 属性を表示します。

  • コンテンツの一部として指定された場合、多くの CSS プロパティは、ビジュアル スタイルを適用済みの要素に適用されます。

  • ページの <head> セクションに META タグを追加する必要があります。このタグは、1 度しか追加する必要はありません。ビジュアル スタイルはこのタグをすべてのページ コンテンツに適用します。これは、HTA としてパッケージ化されたコンテンツにも適用されます。META タグは、次のように記述する必要があります。

    <META HTTP-EQUIV="MSThemeCompatible" CONTENT="Yes">

  • ビジュアル スタイルによって、コンテンツのレイアウトが変更する場合があるので注意してください。また、標準 HTML コントロールでボタンの幅などの特定の属性を設定すると、特定のビジュアル スタイルでボタンのラベルが読み取れないことがあります。

  • ビジュアル スタイルを使用しているコンテンツ全体をテストし、ビジュアル スタイルの適用がコンテンツやレイアウトに影響を及ぼすかどうかを調べる必要があります。コンテンツが正常に機能するように変更してください。

UxTheme Manager にトップレベルのウィンドウを無視させる

新しいビジュアル スタイルをトップレベルのウィンドウに適用しない場合は、次の項目を考慮します。

  • ウィンドウにビジュアル スタイルが適用される領域がある場合、UxTheme Manager はその領域を特定のウィンドウと見なすので、ウィンドウがビジュアル スタイルを使用することはありません。非ビジュアル スタイルのトップレベル ウィンドウに関連付けられた子ウィンドウは、親ウィンドウにビジュアル スタイルが適用されていなくても適用されることがあります。
  • 領域をトップレベル ウィンドウに適用し、その領域を後で削除した場合、ビジュアル スタイルはそのウィンドウに自動的に適用されません。ウィンドウにビジュアル スタイルを適用するには、新規ウィンドウを作成する必要があります。
  • アプリケーションのすべてのトップレベル ウィンドウにおけるビジュアル スタイルの使用を無効にする場合は、SetThemeAppProperties を呼び出し、STAP_ALLOW_NONCLIENT フラグを渡さないでください。
  • アプリケーションが SetThemeAppProperties を呼び出さない場合、フラグ値は STAP_ALLOW_NONCLIENT | STAP_ALLOW_CONTROLS | STAP_ALLOW_WEBCONTENT と見なされます。この値によって、非クライアント領域、コントロール、および Web コンテンツにビジュアル スタイルが適用されます。

３２ビット アンチエイリアス アイコンを使用する

Windows XP イメージリストは一覧表示コントロールなどの特定のコントロールと共に使用されるイメージのコレクションで、32 ビット アンチエイリアス アイコンおよびビットマップの使用をサポートします。色の値は 24 ビットを使用し、8 ビットはアイコンのアルファ チャネルとして使用されます。ピクセルあたり 32 ビット (32 bpp) のイメージを処理できるイメージリストを作成するには、 ImageList_Create 関数を呼び出して ILC_COLOR32 フラグを渡します。

次の図は、アイコン形式を変更することなく、アイコンを書き込む方法を変更したことを示します。

ms997646.xptheming1(ja-jp,MSDN.10).gif

アイコンの形式

32 ビット アイコンを正しく書き込むには、次の手順に従います。

  • 各アイコンの複数のイメージを書き込みます。次の図のようになります。

    ms997646.xptheming2(ja-jp,MSDN.10).gif

同じアイコンの複数のイメージ

  • 上の図では、最初の 3 つのイメージは、セーフ モードで使用される 16 色モードで表示されています。
  • 次の 3 つのアイコンは、Windows XP の 256 色モードで表示されています。
  • 最後の 3 つのアイコンにはアルファ チャネルがあり、24 ビット色以上で実行する Windows XP 以降のオペレーティング システムでのみ使用することができます。
  • アイコン形式では、イメージの順序が大きな意味を持ちます。順序を間違えると、旧バージョンの Windows はアイコンを抽出するときに正常に機能しません。アイコンの抽出を誤ると、メモリ破損や読み込み失敗を発生することがあります。
  • Windows の旧バージョンには、10 アイコン リソースという制限がありますが、Windows XP は無数のアイコン リソースをサポートしています。

注 : サードパーティ ツールを使用して、アルファ チャネルを含んでいるアイコン ファイルやビットマップを生成することができます。

Windows XP と Windows の旧バージョン向けアプリケーションをリリースする

Windows XP ビジュアル スタイルのアーキテクチャの大部分は、コントロールの外観の変更をサポートしない旧バージョンの Windows 向けにアプリケーションを簡単にリリースできるように設計されています。複数のオペレーティング システム向けのアプリケーションをリリースするときは、次の項目を確認してください。

  • アプリケーションのマニフェストを旧バージョンにインストールしても、コントロールのレンダリングには影響を及ぼしません。
  • 現在のバージョンをチェックする前に、アプリケーションをテストして ComCtl32.dll バージョン 6 の機能を使用していないことを確認します。
  • UxTheme.lib に直接リンクしないでください。UxTheme API を使用してカスタム コントロールにビジュアル スタイルを追加する場合は、必要に応じてライブラリを読み込んでください。
  • ビジュアル スタイルが正常に機能しない場合は、インスタンスのエラー処理コードを書き込みます。
  • タイトル表示やリンク コントロールなどの ComCtl32.dll バージョン 6 の機能を使用する場合、これらのコントロールがユーザーのコンピュータで使用できない事態に対処する必要があります。ComCtl32.dll バージョン 6 は、再配布することができません。

まとめ

この文書では、ビジュアル スタイルをアプリケーションに適用するときに必要な作業について説明しています。実行に必要なすべての作業ではなく、一般的な作業について説明しています。