Drop-Down カラーピッカー

[アーティクル]
06/13/2023

Windows リボンフレームワークには、分割ボタンとカスタマイズ可能なドロップダウンカラーセレクターを使用してさまざまな色設定を公開する特殊な Drop-Down カラーピッカーコントロールが用意されています。

はじめに
マークアップ
コード
- Properties
- コマンドハンドラー
関連トピック

はじめに

Microsoft Office のカラーピッカーの外観と機能をエミュレートすることで、リボンフレームワークは、幅広いアプリケーションで一貫性と使い慣れ性の恩恵を受け、貢献することができます。

マークアップ

すべてのリボンコントロールと同様に、Drop-Down カラーピッカーはマークアップを使用して簡単に実装およびカスタマイズできます。フレームワークには、さまざまなレベルの機能を公開するための Drop-Down カラーピッカー用の要素属性が多数用意されています。次の表に、Drop-Down カラーピッカー属性の一覧を示します。

属性	説明
ColorTemplate	カラーピッカーの種類を指定するレイアウトテンプレート Drop-Down。 3 つのテンプレートがあり、それぞれに関連付けられた属性とプロパティキーのコントロールレイアウトと既定値が指定されています。 `ThemeColors` `StandardColors` `HighlightColors`
ChipSize	各カラーチップ (または見本) のサイズ。 `Small` `Medium` `Large`
[列]	カラーチップ (または見本) 列の数。
CommandName	関連付けられた Command 宣言の名前。
IsAutomaticColorButtonVisible	[自動] ボタンを表示 (または非表示) します。 ColorTemplate の値がまたは `StandardColors`の`ThemeColors`場合にのみ有効です。
IsNoColorButtonVisible	[ 色なし ] ボタンを表示 (または非表示) します。すべての ColorTemplate 値に対して有効です。
RecentColorGridRows	[最近使用した色] 領域のカラーチップ (または見本) 行の数。 ColorTemplate の値がの`ThemeColors`場合にのみ有効です。
StandardColorGridRows	[標準色] 領域のカラーチップ (または見本) 行の数。
ThemeColorGridRows	[テーマの色] 領域のカラーチップ (または見本) 行の数。 ColorTemplate の値がの`ThemeColors`場合にのみ有効です。

次のスクリーンショットは、3 つのカラーテンプレートの既定の Drop-Down カラーピッカーレイアウトを示しています。


`ThemeColors`:[newline] [改行]	`standardcolors`:[newline] [改行]	`highlightcolors`:[newline]

次の例では、各 Drop-Down カラーピッカーの種類に必要な基本的なマークアップを示します。

注意

Drop-Down カラーピッカーは、SizeDefinition テンプレートの有効なボタンコントロールです。

<!-- DropDownColorPickers -->
<Command Name="cmdDropDownColorPickerGroup"
         Symbol="cmdDropDownColorPickerGroup"
         Comment="DropDownColorPicker Group"
         Id="55000"/>
<Command Name="cmdDropDownColorPickerThemeColors"
         Symbol="cmdDropDownColorPickerThemeColors"
         Comment="DropDownColorPicker ThemeColors"
         Id="55010"
         LabelTitle="ThemeColors"
         LabelDescription="ThemeColors\ndescription."/>
<Command Name="cmdDropDownColorPickerStandardColors"
         Symbol="cmdDropDownColorPickerStandardColors"
         Comment="DropDownColorPicker StandardColors"
         Id="55011"
         LabelTitle="StandardColors"/>
<Command Name="cmdDropDownColorPickerHighlightColors"
         Symbol="cmdDropDownColorPickerHighlightColors"
         Comment="DropDownColorPicker HighlightColors"
         Id="55012"
         LabelTitle="HighlightColors"/>


<Group CommandName=&quot;cmdDropDownColorPickerGroup&quot;
       SizeDefinition=&quot;ThreeButtons&quot;>
  <DropDownColorPicker
    CommandName=&quot;cmdDropDownColorPickerThemeColors&quot;
    ColorTemplate=&quot;ThemeColors&quot;/>
  <DropDownColorPicker
    CommandName=&quot;cmdDropDownColorPickerStandardColors&quot;
    ColorTemplate=&quot;StandardColors&quot;/>
  <DropDownColorPicker
    CommandName=&quot;cmdDropDownColorPickerHighlightColors&quot;
    ColorTemplate=&quot;HighlightColors&quot;
    StandardColorGridRows=&quot;1&quot;/>
</Group>

コード

カスタマイズをサポートする特殊なコントロールとして、これらの機能を利用する Drop-Down カラーピッカーの実装には、プロパティを管理し、コントロールによって発行されたすべてのコマンドを処理するための特殊なアプリケーションコードが必要です。

Properties

リボンフレームワークは、Drop-Down カラーピッカーコントロールのプロパティキーのコレクションを定義します。

通常、Drop-Down カラーピッカープロパティは、 IUIFramework::InvalidateUICommand メソッドの呼び出しによってコントロールに関連付けられている Command を無効にすることで、リボン UI で更新されます。無効化イベントが処理され、 IUICommandHandler::UpdateProperty コールバックメソッドによってプロパティが更新されます。

IUICommandHandler::UpdateProperty コールバックメソッドは実行されず、アプリケーションはフレームワークでプロパティが必要になるまで、更新されたプロパティ値を照会しました。たとえば、タブがアクティブ化され、リボン UI に表示されるコントロールや、ツールヒントが表示されたときなどです。

注意

場合によっては、 IUIFramework::GetUICommandProperty メソッドを使用してプロパティを取得し、 IUIFramework::SetUICommandProperty メソッドで設定できます。

次の表に、Drop-Down カラーピッカーコントロールに関連付けられているプロパティキーの一覧を示します。

プロパティキー	説明	Notes
UI_PKEY_AutomaticColorLabel	[ 自動色] ボタンのラベルを定義します。 ColorTemplate の値がまたは `StandardColors`の`ThemeColors`場合にのみ有効です。	IUIFramework::GetUICommandProperty と IUIFramework::SetUICommandProperty をサポートします。
UI_PKEY_Color	選択した色の値を COLORREF として定義します。 UI_PKEY_ColorTypeの値がの`UI_SWATCHCOLORTYPE_RGB`場合にのみ有効です。	IUIFramework::GetUICommandProperty と IUIFramework::SetUICommandProperty をサポートします。
UI_PKEY_ColorType	選択した色の種類を定義します。	IUIFramework::GetUICommandProperty と IUIFramework::SetUICommandProperty をサポートします。
UI_PKEY_Enabled	コントロールがユーザーの操作に応答する機能を定義します。	IUIFramework::GetUICommandProperty と IUIFramework::SetUICommandProperty をサポートします。
UI_PKEY_Keytip	無効化によってのみ更新できます。
UI_PKEY_Label	コントロールラベルの文字列を定義します。	無効化によってのみ更新できます。
UI_PKEY_LargeHighContrastImage	コントロールに表示する大きなハイコントラストイメージを定義します。	無効化によってのみ更新できます。イメージ形式の詳細については、「リボンイメージリソースの指定」を参照してください。
UI_PKEY_LargeImage	コントロールに表示する大きなイメージを定義します。	無効化によってのみ更新できます。イメージ形式の詳細については、「リボンイメージリソースの指定」を参照してください。
UI_PKEY_MoreColorsLabel	[ その他の色]ボタンのラベルを定義します。 ColorTemplate の値がまたは `StandardColors`の`ThemeColors`場合にのみ有効です。	IUIFramework::GetUICommandProperty と IUIFramework::SetUICommandProperty をサポートします。
UI_PKEY_NoColorLabel	[ 色なし ] ボタンのラベルを定義します。すべての ColorTemplate 値に対して有効です。	IUIFramework::GetUICommandProperty と IUIFramework::SetUICommandProperty をサポートします。
UI_PKEY_RecentColorsCategoryLabel	[最近使用した色] カテゴリのラベルを定義します。 ColorTemplate の値がの`ThemeColors`場合にのみ有効です。これは、ラベル付けされたカテゴリを含む唯一のテンプレートです。	IUIFramework::GetUICommandProperty と IUIFramework::SetUICommandProperty をサポートします。
UI_PKEY_SmallHighContrastImage	コントロールに表示する小さなハイコントラストイメージを定義します。	無効化によってのみ更新できます。イメージ形式の詳細については、「リボンイメージリソースの指定」を参照してください。
UI_PKEY_SmallImage	コントロールに表示する小さなイメージを定義します。	無効化によってのみ更新できます。イメージ形式の詳細については、「リボンイメージリソースの指定」を参照してください。
UI_PKEY_StandardColors	Drop-Down カラーピッカーの見本の COLORREF 値の配列を定義します。各 Drop-Down カラーピッカー ColorTemplate にはグリッドが `StandardColors` 含まれています。メモ：配列の最初の StandardColorGridRows x Columns の COLORREF 値が表示されます。配列で定義されている色がマークアップで宣言されている見本の `StandardColors` 数よりも少ない場合は、欠落しているチップに空のスペースが表示されます。	IUIFramework::GetUICommandProperty と IUIFramework::SetUICommandProperty をサポートします。
UI_PKEY_StandardColorsCategoryLabel	[ 標準色 ] カテゴリのラベルを定義します。 ColorTemplate の値がの`ThemeColors`場合にのみ有効です。これは、ラベル付けされたカテゴリを含む唯一のテンプレートです。	IUIFramework::GetUICommandProperty と IUIFramework::SetUICommandProperty をサポートします。
UI_PKEY_StandardColorsTooltips	グリッドのカラー見本ヒントの文字列配列を `StandardColors` 定義します。各 Drop-Down カラーピッカー ColorTemplate にはグリッドが `StandardColors` 含まれています。メモ：グリッドに表示される `StandardColors` 色見本にラベルを付けるために必要なツールヒントのみが使用されます。グリッド内 `StandardColors` の見本の数よりも少ないラベルが指定されている場合は、残りの見本に既定値が指定されます。	IUIFramework::GetUICommandProperty と IUIFramework::SetUICommandProperty をサポートします。
UI_PKEY_ThemeColors	Drop-Down カラーピッカーの見本の COLORREF 値の配列を定義します。 ColorTemplate の値がの`ThemeColors`場合にのみ有効です。メモ：配列の初期 ThemeColorGridRows x Columns の COLORREF 値が表示されます。配列で定義されている色がマークアップで宣言されている見本の `ThemeColors` 数よりも少ない場合は、欠落しているチップに空のスペースが表示されます。	IUIFramework::GetUICommandProperty と IUIFramework::SetUICommandProperty をサポートします。
UI_PKEY_ThemeColorsTooltips	グリッドのカラー見本ヒントの文字列配列を `ThemeColors` 定義します。 ColorTemplate の値がの`ThemeColors`場合にのみ有効です。メモ：グリッドに表示される `ThemeColors` 色見本にラベルを付けるために必要なツールヒントのみが使用されます。グリッド内 `ThemeColors` の見本の数よりも少ないラベルが指定されている場合は、残りの見本に既定値が指定されます。	IUIFramework::GetUICommandProperty と IUIFramework::SetUICommandProperty をサポートします。
UI_PKEY_ThemeColorsCategoryLabel	[テーマの色] カテゴリのラベルを定義します。 ColorTemplate の値がの`ThemeColors`場合にのみ有効です。これは、ラベル付けされたカテゴリを含む唯一のテンプレートです。	IUIFramework::GetUICommandProperty と IUIFramework::SetUICommandProperty をサポートします。
UI_PKEY_TooltipDescription	UI_PKEY_TooltipTitleに関連付けられたツールヒントの説明の文字列を定義します。	無効化によってのみ更新できます。
UI_PKEY_TooltipTitle	コマンドヒントの文字列を定義します。	無効化によってのみ更新できます。

コマンドハンドラー

IUICommandHandler::UpdateProperty メソッドは、上記のプロパティキーを使用して Drop-Down カラーピッカーをカスタマイズするために使用されます。次の例では、カスタムスタイル設定またはマークアップで宣言されているカスタム見本グリッドに基づいて、Drop-Down カラーピッカーの色見本を設定する方法を示します。

STDMETHODIMP DropDownColorPickerHandler::UpdateProperty(
              UINT nCmdID,
              __in REFPROPERTYKEY key,
              __in_opt const PROPVARIANT* ppropvarCurrentValue,
              __out PROPVARIANT* ppropvarNewValue)
{
  HRESULT hr = E_NOTIMPL;
  if (key == UI_PKEY_ThemeColors)
  {
    COLORREF rThemeColors[TOT_THEME_COLORS];
    for (LONG i = 0; i < ARRAYSIZE(rThemeColors); i++)
    {
      // any COLORREF
      rThemeColors[i] = RGB(0, 255, 0); 
    }
    hr = InitPropVariantFromUInt32Vector(
           &rThemeColors, ARRAYSIZE(rThemeColors), ppropvarNewValue);
  }

  else if (key == UI_PKEY_StandardColors)
  {
    ULONG rStandardColors[TOT_STANDARD_COLORS];
    for (LONG i = 0; i < ARRAYSIZE(rStandardColors); i++)
    {
      // any COLORREF
      rStandardColors[i] = RGB(255, 0, 0); 
    }
    hr = InitPropVariantFromUInt32Vector(
           &rStandardColors, ARRAYSIZE(rStandardColors),ppropvarNewValue);
  }

  else if (key == UI_PKEY_ThemeColorsTooltips)
  {
    BSTR rThemeTooltips[TOT_THEME_COLORS];
    for (LONG i = 0; i < ARRAYSIZE(rThemeTooltips); i++)
    {
      // any constant character string
      rThemeTooltips[i] = L"Green"; 
    }
    hr = InitPropVariantFromStringVector((PCWSTR *)&rThemeTooltips, 50, ppropvarNewValue);
  }
  else if (key == UI_PKEY_StandardColorsTooltips)
  {
    static BSTR rStandardTooltips[TOT_STANDARD_COLORS];
    for (LONG i = 0; i < ARRAYSize(rStandardTooltips); i++)
    {
      // any constant character string
      rStandardTooltips[i] = L"Red"; 
    }
    hr = InitPropVariantFromStringVector(
           (PCWSTR *)&rStandardTooltips, 20, ppropvarNewValue);
  }
  return hr;
}

次の例では、Drop-Down カラーピッカーの見本の色をリボンアプリケーションに公開する IUICommandHandler::Execute メソッドの実装を示します。

STDMETHODIMP DropDownColorPickerHandler::Execute(
                 UINT nCmdID,
                 UI_EXECUTIONVERB verb,
                 __in_opt const PROPERTYKEY* key,
                 __in_opt const PROPVARIANT* ppropvarValue,
                 __in_opt IUISimplePropertySet* pCommandExecutionProperties)
{
  HRESULT hr = E_NOTIMPL;
  if (*key == UI_PKEY_ColorType)
  {
    UI_SWATCHCOLORTYPE uType = 
      (UI_SWATCHCOLORTYPE)PropVariantToUInt32WithDefault(
        *ppropvarValue, 
        UI_SWATCHCOLORTYPE_NOCOLOR);

    COLORREF color;
    switch(uType)
    {
      case UI_SWATCHCOLORTYPE_RGB:
        PROPVARIANT var;
        pCommandExecutionProperties->GetValue(UI_PKEY_Color, &var);
        color = PropVariantToUInt32WithDefault(var, 0);
        break;
      case UI_SWATCHCOLORTYPE_AUTOMATIC:
        color = COLOR_WINDOWTEXT;
        break;
      case UI_SWATCHCOLORTYPE_NOCOLOR:
        color = MSONoFill;
        break;
    }

    // do with your color what you will...
    gInternalColor = color;
    hr = S_OK;
  }
  return hr;
}

Windows リボンフレームワークコントロールライブラリ
DropDownColorPicker マークアップ要素
カラーピッカーのプロパティ
サイズ定義とスケーリングポリシーを使用したリボンのカスタマイズ
DropDownColorPicker サンプル

Drop-Down カラーピッカー

はじめに

マークアップ

コード

Properties

コマンドハンドラー

フィードバック

フィードバック

その他のリソース

Drop-Down カラー ピッカー

はじめに

マークアップ

コード

Properties

コマンド ハンドラー

関連トピック

フィードバック

フィードバック

その他のリソース

Drop-Down カラーピッカー

コマンドハンドラー