Compartir a través de


Personalización de colores de la cinta

El marco de la cinta de opciones de Windows expone un conjunto de propiedades de color que permiten a una aplicación personalizar la apariencia de varios elementos de la interfaz de usuario de la cinta en tiempo de ejecución.

Introducción

Las claves de propiedad de marco enumeradas en la tabla siguiente se usan para establecer el color de varios elementos de la interfaz de usuario en una aplicación de cinta de opciones. Estas propiedades permiten que el marco de la cinta admita la personalización, los requisitos de identidad y las especificaciones de personalización de marca en todas las aplicaciones.

Color de la cinta de opciones Clave de propiedad framework
Color de fondo UI_PKEY_GlobalBackgroundColor
Color de resaltado (solo Windows 7) ** UI_PKEY_GlobalHighlightColor Introducido en Windows 8: ** UI_PKEY_GlobalHighlightColor no se puede establecer independientemente de UI_PKEY_GlobalBackgroundColor.

Color del texto UI_PKEY_GlobalTextColorintroducido en Windows 8: los cambios realizados en el valor predeterminado de UI_PKEY_GlobalBackgroundColor en Windows 8 pueden requerir un ajuste para UI_PKEY_GlobalTextColor en las aplicaciones de cinta diseñadas para Windows 7.

Especificar colores de la cinta

El marco ribbon usa un modelo de color Hue, Saturación, Brillo (HSB), que difiere del tono más común, la saturación, la luminosidad (HSL) o los espacios de color, saturación, valor (HSV). En concreto, B representa un nivel general de brillo o luminosidad en lugar de la ligereza de un color determinado.

Para especificar el color de los elementos de la interfaz de usuario en el marco de la cinta de opciones, una aplicación asigna valores HSB a cada una de las propiedades de color globales. Estos valores se aplican universalmente en todos los elementos de la cinta según lo requiera la aplicación Ribbon (el marco de trabajo no admite la asignación de valores HSB a elementos y controles individuales).

** Introducido en Windows 8: **UI_PKEY_GlobalHighlightColor se asigna el mismo valor que UI_PKEY_GlobalBackgroundColor.

En la tabla siguiente se describen los parámetros HSB del marco de cinta de opciones.

Componente

Descripción

Valores ajustados*

Hue (H)

El color, o real, se identifica normalmente como un valor de un intervalo circlular de 0 a 359 grados.

0 (rojo) a 255 (rojo)

Saturación (S)

La pureza, o saturación, del color medido como un porcentaje de 0 a 100%.

0 (gris) a 255 (totalmente saturado)

Brillo (B)

El brillo general o la oscuridad del color medido como un porcentaje de 0 a 100%.

0 (oscuro) a 255 (claro)

* El intervalo original de cada valor de parámetro se traduce en un intervalo de 0 a 255 para el marco.

Los valores de HSB no identifican colores específicos. En su lugar, la combinación de valores de propiedad HSB influye en cómo se ajustan los degradados de color en toda la interfaz de usuario en relación entre sí.

Al asignar valores HSB personalizados a UI_PKEY_GlobalTextColor y UI_PKEY_GlobalBackgroundColor, se recomienda que estos valores tengan un contraste lo suficientemente alto como para garantizar la legibilidad. En concreto, el color del texto debe ser más oscuro que el tono más claro de la interfaz de usuario de la cinta de opciones. Cuando sea necesario, el marco ajusta automáticamente el valor de UI_PKEY_GlobalTextColor HSB para proporcionar suficiente contraste con cualquier sombra de fondo o degradado derivado de UI_PKEY_GlobalBackgroundColor.

Nota

En Windows 7, UI_PKEY_GlobalHighlightColor se puede establecer independientemente de UI_PKEY_GlobalBackgroundColor.

En el ejemplo siguiente se muestra cómo especificar un color personalizado para las propiedades UI_PKEY_GlobalTextColor, UI_PKEY_GlobalBackgroundColor y UI_PKEY_GlobalHighlightColor .

CComPtr<IPropertyStore> spPropertyStore;

// _spFramework is a pointer to the IUIFramework interface that is assigned 
// when the Ribbon is initialized.
if (SUCCEEDED(_spFramework->QueryInterface(&spPropertyStore)))
{
  PROPVARIANT propvarBackground;
  PROPVARIANT propvarHighlight;
  PROPVARIANT propvarText;
 
  // UI_HSBCOLOR is a type defined in UIRibbon.h that is composed of 
  // three component values: hue, saturation and brightness, respectively.
  UI_HSBCOLOR BackgroundColor = UI_HSB(0x14, 0x38, 0x54);
  UI_HSBCOLOR HighlightColor = UI_HSB(0x00, 0x36, 0x87);
  UI_HSBCOLOR TextColor = UI_HSB(0x2B, 0xD6, 0x00);

  InitPropVariantFromUInt32(BackgroundColor, &propvarBackground);
  InitPropVariantFromUInt32(HighlightColor, &propvarHighlight);
  InitPropVariantFromUInt32(TextColor, &propvarText);
 
  spPropertyStore->SetValue(UI_PKEY_GlobalBackgroundColor, propvarBackground);
  spPropertyStore->SetValue(UI_PKEY_GlobalTextColor, propvarText);
 
  spPropertyStore->Commit();
}

Convertir RGB en HSB

En esta sección se describe la fórmula necesaria para hacer coincidir dinámicamente un valor HSB del marco de la cinta, el UI_PKEY_GlobalBackgroundColor en este ejemplo, a un color RGB específico en tiempo de ejecución.

El fondo de fila de tabulación se usa como punto de referencia porque se representa como una superficie de color plana en comparación con el degradado de brillo del fondo de la cinta.

Se necesita una conversión preliminar para obtener un valor HSL intermedio. Este valor HSL se puede convertir en un valor HSB.

Nota

La conversión de RGB a HSL se logra fácilmente con la mayoría del software de edición de fotos.

La conversión de HSL (con cada componente en el intervalo de 0,0 a 1,0) a una configuración de HSB de cinta se realiza mediante las siguientes fórmulas:

  • Hbackground = Round(255.0 H)
  • Sbackground = Round(255.0 S)
  • Bbackground = Round(257.7 + 149.9 ln(L)) if 0.1793 <= L <= 0.9821

Directrices de color

Propiedades del marco