Especificación de recursos de imagen de cinta
Como sistema de presentación de comandos enriquecido, el marco de la cinta de opciones de Windows está diseñado para admitir recursos de imagen ampliamente en toda la interfaz de usuario (UI) de la cinta de opciones. Todos los recursos de imagen se declaran en el marcado de la cinta o se consultan desde una aplicación host de cinta de opciones.
Para Windows 8 y versiones posteriores, el marco de la cinta de opciones admite los siguientes formatos gráficos: archivos de mapa de bits ARGB (BMP) de 32 bits y archivos portables de gráficos de red (PNG) con transparencia.
Para Windows 7 y versiones anteriores, los recursos de imagen deben cumplir el formato de gráficos BMP estándar que se usa en Windows.
Nota
Puede producirse un error de compilación si se proporciona un formato de imagen no compatible al marco de trabajo.
Tamaños de imagen
Para proporcionar mayor flexibilidad para los diseños de control de cinta al cambiar el tamaño de una ventana de aplicación, el marco de la cinta acepta y representa imágenes en uno de dos tamaños: grande o pequeño.
En las imágenes siguientes se muestra una aplicación ribbon que admite varios tamaños de cinta a través de diseños de control flexibles y la sustitución de imágenes grandes con imágenes pequeñas donde estén disponibles.
En la captura de pantalla siguiente se muestra la cinta de opciones con imágenes grandes para los controles Zoom.
En la captura de pantalla siguiente se muestra el mismo tamaño de la cinta de opciones con imágenes pequeñas para los controles Zoom.
En la captura de pantalla siguiente se muestra la cinta de opciones en estado oculto. La cinta de opciones está oculta cuando se han agotado todos los diseños de control potenciales y la cinta de opciones no se puede representar con un área de trabajo de aplicación utilizable.
Para cualquier imagen, el tamaño exacto de píxel depende de la resolución de pantalla, o puntos por pulgada (ppp) del monitor que se usa. A 96 ppp, las imágenes grandes tienen un tamaño de 32 x 32 píxeles y las imágenes pequeñas tienen un tamaño de 16 x 16 píxeles. Los tamaños de imagen aumentan de forma lineal con respecto a ppp, como se muestra en la tabla siguiente.
| ppp | Imagen pequeña | Imagen grande |
|---|---|---|
| 96 ppp | 16 x 16 píxeles | 32 x 32 píxeles |
| 120 ppp | 20 x 20 píxeles | 40 x 40 píxeles |
| 144 ppp | 24 x 24 píxeles | 48 x 48 píxeles |
| 192 ppp | 32 x 32 píxeles | 64 x 64 píxeles |
El marco de la cinta escala los recursos de imagen según sea necesario. Sin embargo, dado que el cambio de tamaño puede producir artefactos no deseados y degradación de imágenes, se recomienda encarecidamente que la aplicación proporcione un pequeño conjunto de recursos de imagen que abarquen varias configuraciones de ppp usadas habitualmente. Si no se encuentra una coincidencia exacta, la imagen más cercana se escalará o reducirá verticalmente.
Para facilitar esto, los recursos de imagen se pueden declarar en el marcado de cinta mediante un conjunto de elementos Image para cada elemento Command . En tiempo de ejecución, el marco selecciona la imagen que se va a mostrar en función del atributo MinDPI de cada elemento Image .
Importante
Cuando se proporciona una colección de recursos de imagen diseñados para admitir una configuración específica de ppp de pantalla en el marco de la cinta mediante un conjunto de elementos Image , el marco usa el valor de atributo Image con un valor de atributo MinDPI que coincide con la configuración actual de ppp de pantalla.
Si no se declara ningún elemento Image con un valor MinDPI que coincida con la configuración actual de ppp de pantalla, el marco selecciona la imagen que tiene el valor minDPI más cercano menor que el valor de ppp de pantalla actual y escala verticalmente el recurso de imagen. De lo contrario, si no se declara ningún elemento Image con un valor de atributo MinDPI menor que la configuración actual de ppp de pantalla, el marco elige el valor MinDPI más cercano que el valor de ppp de pantalla actual y reduce verticalmente el recurso de imagen.
En el ejemplo siguiente se muestra cómo declarar un conjunto de imágenes para dar cabida a varios tamaños de cinta y configuración del sistema.
<Command.LargeImages>
<Image Source="res/CutLargeImage32.bmp" Id="116" Symbol="ID_CUT_LARGEIMAGE1" MinDPI="96" />
<Image Source="res/CutLargeImage40.bmp" Id="117" Symbol="ID_CUT_LARGEIMAGE2" MinDPI="120" />
<Image Source="res/CutLargeImage48.bmp" Id="118" Symbol="ID_CUT_LARGEIMAGE3" MinDPI="144" />
<Image Source="res/CutLargeImage64.bmp" Id="119" Symbol="ID_CUT_LARGEIMAGE4" MinDPI="192" />
</Command.LargeImages>
<Command.SmallImages>
<Image Source="res/CutSmallImage16.bmp" Id="122" Symbol="ID_CUT_SMALLIMAGE1" MinDPI="96" />
<Image Source="res/CutSmallImage20.bmp" Id="123" Symbol="ID_CUT_SMALLIMAGE2" MinDPI="120" />
<Image Source="res/CutSmallImage24.bmp" Id="124" Symbol="ID_CUT_SMALLIMAGE3" MinDPI="144" />
<Image Source="res/CutSmallImage32.bmp" Id="125" Symbol="ID_CUT_SMALLIMAGE4" MinDPI="192" />
</Command.SmallImages>
<Command.LargeHighContrastImages>
<Image Source="res/CutLargeImage32HC.bmp" Id="130" Symbol="ID_CUT_LARGEIMAGE1HC" MinDPI="96" />
<Image Source="res/CutLargeImage40HC.bmp" Id="131" Symbol="ID_CUT_LARGEIMAGE2HC" MinDPI="120" />
<Image Source="res/CutLargeImage48HC.bmp" Id="132" Symbol="ID_CUT_LARGEIMAGE3HC" MinDPI="144" />
<Image Source="res/CutLargeImage64HC.bmp" Id="133" Symbol="ID_CUT_LARGEIMAGE4HC" MinDPI="192" />
</Command.LargeHighContrastImages>
<Command.SmallHighContrastImages>
<Image Source="res/CutSmallImage16HC.bmp" Id="135" Symbol="ID_CUT_SMALLIMAGE1HC" MinDPI="96" />
<Image Source="res/CutSmallImage20HC.bmp" Id="136" Symbol="ID_CUT_SMALLIMAGE2HC" MinDPI="120" />
<Image Source="res/CutSmallImage24HC.bmp" Id="137" Symbol="ID_CUT_SMALLIMAGE3HC" MinDPI="144" />
<Image Source="res/CutSmallImage32HC.bmp" Id="138" Symbol="ID_CUT_SMALLIMAGE4HC" MinDPI="192" />
</Command.SmallHighContrastImages>
Si las imágenes declaradas en marcado se invalidan en tiempo de ejecución por cualquier motivo, se consulta la aplicación host para obtener nuevas imágenes. Cuando estas imágenes se generan y cargan mediante programación, la aplicación debe intentar devolver imágenes que tienen el tamaño según los tamaños predeterminados del icono del sistema determinados por la métrica del sistema de SM_CXICON.
Nota
Las imágenes grandes tienen un tamaño de SM_CXICON por SM_CXICON y pequeñas imágenes tienen un tamaño de SM_CXICON/2 por SM_CXICON/2.
Profundidad de color, transparencia y contraste
Se espera que las imágenes normales estén en formato de píxeles ARGB de 32 bits por píxel (BPP) y se escalan al tamaño predeterminado del icono del sistema. Este formato admite transparencia y suavizado de contorno (con 8 bits por canal).
Advertencia
Muchas herramientas de edición de imágenes no conservan el canal alfa de 8 bits de mayor orden al cargar o guardar imágenes BPP de 32.
Para que una imagen se muestre correctamente en modo de contraste alto, debe tener un formato de píxel paletizado de 4 BPP. Cuando se representa la imagen, el marco de la cinta de opciones reasigna colores específicos en función del contexto de contraste alto de la imagen.
En la tabla siguiente se muestra el comportamiento de representación de color de contraste alto del marco.
Color de píxel
Valor RGB
Comportamiento
Fondo blanco
Fondo oscuro
MAGENTA
800080
Transparente
Transparente
NEGRO
000000
COLOR_WINDOWTEXT
BLANCO
BLANCO
FFFFFF
COLOR_WINDOW
NEGRO
GRIS OSCURO
808080
COLOR_3DSHADOW
COLOR_3DSHADOW
GRIS
C0C0C0
COLOR_3DFACE
COLOR_3DFACE
GRIS CLARO
DFDFDF
COLOR_3DLIGHT
COLOR_3DLIGHT
AZUL OSCURO
000080
N/D
BLANCO
Para obtener más información sobre los formatos de imagen admitidos por el marco de la cinta de opciones, consulte lo siguiente:
- Estructura BITMAPINFOHEADER : describe el formato de píxel ARGB de 32 BPP.
- Función CreateDIBSection : describe cómo crear una imagen de formato de píxel ARGB de 32 BPP.
- Función LoadImage : describe cómo cargar una imagen de formato de píxel ARGB de 32 BPP.
Accesibilidad
Confiar en los recursos de imagen para proporcionar información, transmitir la funcionalidad de control y exponer el estado de la aplicación, aumenta la necesidad de requisitos de accesibilidad durante el diseño y el desarrollo de aplicaciones.
Para obtener compatibilidad básica con contraste alto, la cinta de opciones permite mostrar un conjunto independiente de archivos de imagen cuando un tema de contraste alto está activo. Estas imágenes pueden ser 32 BPP o 4 BPP, con colores asignados a una paleta especial donde los colores oscuros y claros se invierten en función de los colores de primer plano y de fondo del tema activo de contraste alto.
En el ejemplo siguiente se muestra cómo se declaran los recursos de imagen de contraste alto en el marcado de la cinta de opciones:
<Command Name="cmdNew" Id="0xE100" Symbol="ID_CMD_NEW" LabelTitle="New document" Keytip="N" >
<Command.TooltipTitle>New (Ctrl+N)</Command.TooltipTitle>
<Command.TooltipDescription>Create a new document.</Command.TooltipDescription>
<Command.LargeImages>
<Image Source="cmdNew-32px.bmp" MinDPI="96" />
<Image Source="cmdNew-40px.bmp" MinDPI="120" />
<Image Source="cmdNew-48px.bmp" MinDPI="144" />
<Image Source="cmdNew-64px.bmp" MinDPI="192" />
</Command.LargeImages>
<Command.LargeHighContrastImages>
<Image Source="cmdNew-32px-HC.bmp" MinDPI="96" />
<Image Source="cmdNew-40px-HC.bmp" MinDPI="120" />
<Image Source="cmdNew-48px-HC.bmp" MinDPI="144" />
<Image Source="cmdNew-64px-HC.bmp" MinDPI="192" />
</Command.LargeHighContrastImages>
<Command.SmallImages>
<Image Source="cmdNew-16px.bmp" MinDPI="96" />
<Image Source="cmdNew-20px.bmp" MinDPI="120" />
<Image Source="cmdNew-24px.bmp" MinDPI="144" />
<Image Source="cmdNew-32px.bmp" MinDPI="192" />
</Command.SmallImages>
<Command.SmallHighContrastImages>
<Image Source="cmdNew-16px-HC.bmp" MinDPI="96" />
<Image Source="cmdNew-20px-HC.bmp" MinDPI="120" />
<Image Source="cmdNew-24px-HC.bmp" MinDPI="144" />
<Image Source="cmdNew-32px-HC.bmp" MinDPI="192" />
</Command.SmallHighContrastImages>
</Command>
Temas relacionados
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de