Selector de colores de Drop-Down

Artículo
03/12/2025

El marco de la cinta de opciones de Windows proporciona un control especializado Drop-Down Selector de colores que expone una variedad de configuraciones de color a través de un botón de división y un selector de color desplegable personalizable.

introducción
de marcado
de código de
- propiedades de
- controladores de comandos
temas relacionados

Introducción

Al simular la apariencia y la funcionalidad del selector de colores de Microsoft Office, el marco de la cinta de opciones puede beneficiarse y contribuir a la coherencia y familiaridad en una amplia gama de aplicaciones.

Margen

Al igual que todos los controles de la cinta de opciones, el selector de colores de Drop-Down se implementa y personaliza fácilmente a través del marcado. El marco proporciona una serie de atributos de elemento para el selector de color de Drop-Down para exponer varios niveles de funcionalidad. En la tabla siguiente se enumeran los atributos Drop-Down Selector de colores.

Atributo	Descripción
ColorTemplate	Plantillas de diseño que especifican el tipo de selector de color de Drop-Down. Hay tres plantillas, cada una de las cuales especifica un diseño de control y valores predeterminados para los atributos asociados y las claves de propiedad. `ThemeColors` `StandardColors` `HighlightColors`
ChipSize	Tamaño de cada chip de color (o muestra). `Small` `Medium` `Large`
Columnas	Número de columnas de chip de color (o muestra).
CommandName	Nombre de la declaración Command asociada.
IsAutomaticColorButtonVisible	Muestra (u oculta) el botón Automático. Válido solo cuando ColorTemplate tiene un valor de `ThemeColors` o `StandardColors`.
IsNoColorButtonVisible	Muestra (u oculta) el botón Sin color. Válido para todos los valores de ColorTemplate.
RecentColorGridRows	Número de filas de chip de color (o muestra) del área Colores recientes. Válido solo cuando ColorTemplate tiene un valor de `ThemeColors`.
StandardColorGridRows	Número de filas de chip de color (o muestra) del área colores estándar.
ThemeColorGridRows	Número de filas de chip de color (o muestra) en el colores del tema área. Válido solo cuando ColorTemplate tiene un valor de `ThemeColors`.

Las capturas de pantalla siguientes muestran los diseños predeterminados del selector de colores de Drop-Down para las tres plantillas de color.


`ThemeColors`:[newline] [nueva línea]	`standardcolors`:[newline] [nueva línea]	`highlightcolors`:[newline]

El marcado básico necesario para cada tipo de selector de color de Drop-Down se muestra en los ejemplos siguientes:

Nota

El selector de color de Drop-Down es un control botón de válido en una plantillaSizeDefinition.

<!-- 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>

Código

Como control especializado que admite la personalización, cualquier implementación del selector de color de Drop-Down que aprovecha estas funcionalidades requiere código de aplicación especializado para administrar propiedades y controlar los comandos emitidos por el control.

Propiedades

El marco de la cinta define una colección de claves de propiedad para el control Selector de color de Drop-Down.

Normalmente, se actualiza una propiedad selector de color de Drop-Down en la interfaz de usuario de la cinta de opciones mediante la invalidación del comando asociado al control a través de una llamada al método IUIFramework::InvalidateUICommand. El evento de invalidación se controla y las actualizaciones de propiedades definidas por el IUICommandHandler::UpdateProperty método de devolución de llamada.

El IUICommandHandler::UpdateProperty método de devolución de llamada no se ejecuta y la aplicación consultada para un valor de propiedad actualizado, hasta que el marco requiera la propiedad. Por ejemplo, cuando se activa una pestaña y se muestra un control en la interfaz de usuario de la cinta de opciones, o cuando se muestra una información sobre herramientas.

Nota

En algunos casos, se puede recuperar una propiedad a través del método IUIFramework::GetUICommandProperty y establecer con el método IUIFramework::SetUICommandProperty.

En la tabla siguiente se enumeran las claves de propiedad asociadas al control selector de color de Drop-Down.

Clave de propiedad	Descripción	Notas
UI_PKEY_AutomaticColorLabel	Define la etiqueta del botón de color automático de. Solo es válido cuando ColorTemplate tiene un valor de `ThemeColors` o `StandardColors`.	Admite IUIFramework::GetUICommandProperty y IUIFramework::SetUICommandProperty.
UI_PKEY_Color	Define el valor de color seleccionado como COLORREF. Solo es válido cuando UI_PKEY_ColorType tiene un valor de `UI_SWATCHCOLORTYPE_RGB`.	Admite IUIFramework::GetUICommandProperty y IUIFramework::SetUICommandProperty.
UI_PKEY_ColorType	Define el tipo de color seleccionado.	Admite IUIFramework::GetUICommandProperty y IUIFramework::SetUICommandProperty.
UI_PKEY_Enabled	Define la capacidad de un control para responder a la interacción del usuario.	Admite IUIFramework::GetUICommandProperty y IUIFramework::SetUICommandProperty.
UI_PKEY_Keytip	Solo se puede actualizar a través de la invalidación.
UI_PKEY_Label	Define la cadena de caracteres para una etiqueta de control.	Solo se puede actualizar a través de la invalidación.
UI_PKEY_LargeHighContrastImage	Define la imagen de contraste alto grande que se va a mostrar para un control.	Solo se puede actualizar a través de la invalidación. Para obtener más información sobre los formatos de imagen, vea Especificar recursos de imagen de la cinta de opciones.
UI_PKEY_LargeImage	Define la imagen grande que se va a mostrar para un control.	Solo se puede actualizar a través de la invalidación. Para obtener más información sobre los formatos de imagen, vea Especificar recursos de imagen de la cinta de opciones.
UI_PKEY_MoreColorsLabel	Define la etiqueta del botón Más colores.... Solo es válido cuando ColorTemplate tiene un valor de `ThemeColors` o `StandardColors`.	Admite IUIFramework::GetUICommandProperty y IUIFramework::SetUICommandProperty.
UI_PKEY_NoColorLabel	Define la etiqueta del botón No color. Válido para todos los valores de ColorTemplate.	Admite IUIFramework::GetUICommandProperty y IUIFramework::SetUICommandProperty.
UI_PKEY_RecentColorsCategoryLabel	Define la etiqueta de la categoría Colores recientes. Solo es válido cuando ColorTemplate tiene un valor de `ThemeColors`. Esta es la única plantilla que contiene categorías etiquetadas.	Admite IUIFramework::GetUICommandProperty y IUIFramework::SetUICommandProperty.
UI_PKEY_SmallHighContrastImage	Define la imagen de contraste alto pequeña que se va a mostrar para un control.	Solo se puede actualizar a través de la invalidación. Para obtener más información sobre los formatos de imagen, vea Especificar recursos de imagen de la cinta de opciones.
UI_PKEY_SmallImage	Define la imagen pequeña que se va a mostrar para un control.	Solo se puede actualizar a través de la invalidación. Para obtener más información sobre los formatos de imagen, vea Especificar recursos de imagen de la cinta de opciones.
UI_PKEY_StandardColors	Define una matriz de valores COLORREF para las muestras de un selector de color de Drop-Down. Cada selector de color Drop-Down ColorTemplate contiene una cuadrícula de `StandardColors`. Nota: Se muestran los valores COLORREF de la inicial StandardColorGridRows x Columnas de la matriz. Si la matriz define menos colores que el número de muestras de `StandardColors` declaradas en marcado, se muestran espacios vacíos para los chips que faltan.	Admite IUIFramework::GetUICommandProperty y IUIFramework::SetUICommandProperty.
UI_PKEY_StandardColorsCategoryLabel	Define la etiqueta del categoría colores estándar. Solo es válido cuando ColorTemplate tiene un valor de `ThemeColors`. Esta es la única plantilla que contiene categorías etiquetadas.	Admite IUIFramework::GetUICommandProperty y IUIFramework::SetUICommandProperty.
UI_PKEY_StandardColorsTooltips	Define una matriz de cadenas de información sobre herramientas de muestra de color para la cuadrícula de `StandardColors`. Cada selector de color Drop-Down ColorTemplate contiene una cuadrícula de `StandardColors`. Nota: Solo se usan las sugerencias de herramientas necesarias para etiquetar las muestras de color mostradas en la cuadrícula de `StandardColors`. Si se proporcionan menos etiquetas que el número de muestras en la cuadrícula de `StandardColors`, se proporciona un valor predeterminado para las muestras que permanecen.	Admite IUIFramework::GetUICommandProperty y IUIFramework::SetUICommandProperty.
UI_PKEY_ThemeColors	Define una matriz de valores COLORREF para las muestras de un selector de color de Drop-Down. Solo es válido cuando ColorTemplate tiene un valor de `ThemeColors`. Nota: Se muestran los valores COLORREF del ThemeColorGridRows inicial x Columnas de la matriz. Si la matriz define menos colores que el número de muestras de `ThemeColors` declaradas en marcado, se muestran espacios vacíos para los chips que faltan.	Admite IUIFramework::GetUICommandProperty y IUIFramework::SetUICommandProperty.
UI_PKEY_ThemeColorsTooltips	Define la matriz de cadenas de información sobre herramientas de muestra de color para la cuadrícula de `ThemeColors`. Solo es válido cuando ColorTemplate tiene un valor de `ThemeColors`. Nota: Solo se usan las sugerencias de herramientas necesarias para etiquetar las muestras de color mostradas en la cuadrícula de `ThemeColors`. Si se proporcionan menos etiquetas que el número de muestras en la cuadrícula de `ThemeColors`, se proporciona un valor predeterminado para las muestras que permanecen.	Admite IUIFramework::GetUICommandProperty y IUIFramework::SetUICommandProperty.
UI_PKEY_ThemeColorsCategoryLabel	Define la etiqueta para la categoría colores del tema. Solo es válido cuando ColorTemplate tiene un valor de `ThemeColors`. Esta es la única plantilla que contiene categorías etiquetadas.	Admite IUIFramework::GetUICommandProperty y IUIFramework::SetUICommandProperty.
UI_PKEY_TooltipDescription	Define la cadena de caracteres de una descripción de información sobre herramientas asociada a un UI_PKEY_TooltipTitle.	Solo se puede actualizar a través de la invalidación.
UI_PKEY_TooltipTitle	Define la cadena de caracteres para una información sobre herramientas de comando.	Solo se puede actualizar a través de la invalidación.

Controladores de comandos

El método IUICommandHandler::UpdateProperty se usa para personalizar un selector de color Drop-Down a través de las claves de propiedad enumeradas anteriormente. En el ejemplo siguiente se muestra cómo establecer las muestras de color de un selector de color de Drop-Down, en función de una preferencia de estilo personalizada o una cuadrícula de muestra personalizada declarada en marcado.

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;
}

En el ejemplo siguiente se muestra una implementación del método IUICommandHandler::Execute que expone los colores de muestra del selector de colores de Drop-Down a la aplicación Ribbon.

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;
}

biblioteca de controles de Windows Ribbon Framework
elemento de marcado DropDownColorPicker
propiedades del selector de colores de
personalizar una cinta de opciones mediante definiciones de tamaño y directivas de escalado
de ejemplo DropDownColorPicker

Compartir a través de

Selector de colores de Drop-Down

Introducción

Margen

Código

Propiedades

Controladores de comandos

Comentarios

Recursos adicionales

Compartir a través de

Selector de colores de Drop-Down

Introducción

Margen

Código

Propiedades

Controladores de comandos

Temas relacionados

Comentarios

Recursos adicionales