Patrones de control comunes para Visual Studio

Controles comunes

Los controles comunes constituyen la mayoría de la interfaz de usuario en Visual Studio. Los controles más comunes que se usan en la interfaz de Visual Studio deben seguir las directrices de interacción del escritorio de Windows. Este tema es específico de Visual Studio y trata situaciones o detalles especiales que aumentan esas directrices de Windows.

Controles comunes de este tema

• Barras de desplazamiento

• Campos de entrada

• Cuadros combinados y listas desplegables

• Casillas

• Botones de radio

• Marcos de grupo

• Controles de texto

• Botones e hipervínculos

• Vistas de árbol

Estilo visual

Lo primero que hay que tener en cuenta al aplicar estilos a los controles es si los controles se usarán en la interfaz de usuario temática. Los controles de la interfaz de usuario estándar son interfaz de usuario sin temática y deben seguir el estilo normal de escritorio de Windows, lo que significa que no se vuelven a crear plantillas y deben aparecer en su apariencia de control predeterminada.

• Cuadros de diálogo estándar (utilidad): no con temática. No vuelvas a plantilla. Use los valores predeterminados de estilo de control básico.

• Ventanas de herramientas, editores de documentos, superficies de diseño y cuadros de diálogo con temas: use la apariencia temática especializada mediante el servicio de color.

Barras de desplazamiento

Las barras de desplazamiento deben seguir patrones de interacción comunes para las barras de desplazamiento de Windows a menos que se aumenten con información de contenido, como en el editor de código.

Campos de entrada

Para un comportamiento de interacción típico, siga las instrucciones de escritorio de Windows para los cuadros de texto.

Estilo visual

• Los campos de entrada no deben tener un estilo en los cuadros de diálogo de utilidad. Use el estilo básico intrínseco al control.

• Los campos de entrada con temática solo deben usarse en cuadros de diálogos con temática y ventanas de herramientas.

Interacciones especializadas

• Los campos de solo lectura tendrán un fondo gris (deshabilitado), pero el primer plano predeterminado (activo).

• Los campos obligatorios deben tener <Obligatorio> como marcas de agua dentro de ellos. No debe cambiar el color del fondo, excepto en situaciones poco frecuentes.

• Validación de errores: consulte Notificaciones y progreso de Visual Studio.

• Los campos de entrada deben tener el tamaño para ajustarse al contenido, no ajustarse al ancho de la ventana en la que se muestran, ni para que coincida arbitrariamente con la longitud de un campo largo, como una ruta de acceso. La longitud puede ser una indicación para el usuario de las limitaciones en cuanto al número de caracteres permitidos en el campo.

  
  Longitud incorrecta del campo de entrada: es poco probable que el nombre sea este largo.

  
  Longitud correcta del campo de entrada: el campo de entrada es un ancho razonable para el contenido esperado.

Cuadros combinados y listas desplegables

Para el comportamiento típico de la interacción, siga las instrucciones de escritorio de Windows para listas desplegables y cuadros combinados.

Estilo visual

• En los cuadros de diálogo de utilidad, no vuelva a crear una plantilla del control. Use el estilo básico intrínseco al control.

• En la interfaz de usuario con temática, los cuadros combinados y las listas desplegables siguen las temáticas estándar de los controles.

Layout

Los cuadros combinados y las listas desplegables deben tener el tamaño para ajustarse al contenido, no ajustarse al ancho de la ventana en la que se muestran, ni a coincidir arbitrariamente con la longitud de un campo largo, como una ruta de acceso.

Incorrecto: el ancho desplegable es demasiado largo para el contenido que se mostrará.

Correcto: el tamaño de la lista desplegable es para permitir el crecimiento de la traducción, pero no es innecesariamente largo.

Casillas

Para ver el comportamiento típico de la interacción, siga las instrucciones de escritorio de Windows para las casillas.

Estilo visual

• En los cuadros de diálogo de utilidad, no vuelva a crear una plantilla del control. Use el estilo básico intrínseco al control.

• En la interfaz de usuario con temática, las casillas siguen las temáticas estándar de los controles.

Interacciones especializadas

• La interacción con una casilla nunca debe abrir un cuadro de diálogo o navegar a otra área.

• Alinee las casillas con la línea base de la primera línea de texto.

  
  Incorrecto: la casilla se centra en el texto.

  
  Correcto: la casilla está alineada con la primera línea del texto.

Botones de radio

Para un comportamiento de interacción típico, siga las directrices de escritorio de Windows para los botones de radio.

Estilo visual

En los cuadros de diálogo de utilidad, no se aplica estilo a los botones de radio. Use el estilo básico intrínseco al control.

Interacciones especializadas

No es necesario usar un marco de grupo para incluir opciones de radio, a menos que necesite mantener la distinción de grupo en un diseño ajustado.

Marcos de grupo

Para un comportamiento de interacción típico, siga las instrucciones de escritorio de Windows para los marcos de grupo.

Estilo visual

En los cuadros de diálogo de utilidad, no estilo marcos de grupo. Use el estilo básico intrínseco al control.

Layout

• No es necesario usar un marco de grupo para incluir opciones de radio, a menos que necesite mantener la distinción de grupo en un diseño ajustado.

• Nunca use un marco de grupo para un solo control.

• A veces es aceptable usar una regla horizontal en lugar de un contenedor de marcos de grupo.

Controles de texto

Campos de texto estático

Un campo de texto estático presenta información de solo lectura y el usuario no puede seleccionarlo. Evite usarlo para cualquier texto que el usuario quiera copiar en el Portapapeles. Sin embargo, el texto estático de solo lectura puede cambiar para reflejar un cambio en el estado. En el ejemplo siguiente, el texto estático Nombre de salida en el grupo información cambia para reflejar los cambios realizados en el cuadro de texto Espacio de nombres raíz situado encima de él.

Hay dos maneras de mostrar información de texto estático.

El texto estático puede ser propio en un cuadro de diálogo sin contención cuando no hay ningún conflicto de agrupación. Decida si las líneas adicionales de una caja son realmente necesarias. Un ejemplo es la presentación de una ruta de acceso de directorio en una sección creada por una línea de grupo, como se muestra a continuación:

Información de texto estático en controles de texto

En un cuadro de diálogo en el que existen otras áreas agrupadas y la contención de la información, ayudaría a la legibilidad y, cuando una sección se puede ocultar o mostrar (como en el panel de descripción de ventana Propiedades) o desea ser coherente con una interfaz de usuario similar, coloque el texto estático dentro de un cuadro. Este cuadro de grupo debe ser una sola regla y colorear con :ButtonShadow

Texto estático en el ventana Propiedades

Cuadro de texto de solo lectura

Esto permite al usuario seleccionar el texto dentro del campo, pero no editarlo. Estos cuadros de texto están bordeados por el chisel 3D habitual con un ButtonShadow relleno.

Un cuadro de texto puede activarse (editable) cuando un usuario modifica un control asociado, como activar o desactivar una casilla o seleccionar o desactivar un botón de radio. Por ejemplo, en la página Opciones de herramientas > que se muestra a continuación, el cuadro de texto Página principal se activa cuando la casilla Usar valor predeterminado está desactivada.

Cuadro de texto de solo lectura, que muestra estados inactivos y activos

Uso de texto en diálogos

Instrucciones clave para el texto en diálogos:

• Las etiquetas de los cuadros de texto, los cuadros de lista y los marcos de los diálogos no marcados comienzan con un verbo, tienen un capital inicial solo en la primera palabra y terminan con dos puntos.

  Los controles de texto de los cuadros de diálogo con tema siguen las directrices de la experiencia de usuario del escritorio de Windows y no toman puntuación final, con la excepción de signos de interrogación en los vínculos de Ayuda.

• Las etiquetas para casillas y botones de opción comienzan con un verbo, un capital inicial solo en la primera palabra y no tienen puntuación final.

• Las etiquetas de botones, menús, elementos de menú y pestañas tienen mayúsculas iniciales en cada palabra (mayúsculas de título).

• La terminología de etiquetas debe ser coherente con etiquetas similares en otros cuadros de diálogo.

• Si es posible, escriba un escritor o editor o apruebe el texto antes de ir al desarrollador para su implementación.

• Todos los controles deben tener etiquetas excepto en circunstancias especiales en las que el tabulador es suficiente. Use el texto auxiliar cuando corresponda.

Texto del asistente

Se incluye en diálogos para ayudar al usuario a comprender el propósito del diálogo o para indicar qué acción realizar. El texto auxiliar solo se debe usar cuando sea necesario para evitar desordenar cuadros de diálogo simples. Las dos variaciones del texto auxiliar son el cuadro de diálogo y la marca de agua.

Siga las ubicaciones comunes para el texto auxiliar y sea selectivo en la introducción de nuevas áreas. Los escenarios comunes para el texto del asistente son:

• Texto auxiliar en diálogos, para dar una dirección adicional sobre cómo interactuar con un diálogo complejo.

• Texto de marca de agua en cuadros de diálogo o ventanas de herramientas vacías para explicar por qué no hay contenido visible.

• Un panel de descripción, como en la parte inferior del ventana Propiedades.

• Texto de marca de agua en un editor vacío para explicar qué acción debe realizar el usuario para empezar.

Texto del asistente del cuadro de diálogo

Un diseñador de experiencia de usuario puede ayudar a determinar cuándo es adecuado el texto auxiliar. El diseñador puede definir dónde aparece el texto del asistente, así como su contenido general. La asistencia al usuario puede escribir o editar el texto real.

Marcas de agua

Los diálogos se benefician de directrices de marca de agua ligeramente diferentes. Dado que un cuadro de diálogo puede aparecer ocupado con muchos elementos de la interfaz de usuario (etiquetas, texto de sugerencia, botones y otros controles de contenedor con texto), especialmente cuando aparecen en negro, las marcas de agua destacan mejor en gris oscuro (VSColor: ButtonShadow). Normalmente, una marca de agua aparece dentro de un control como un cuadro de lista con un fondo blanco (VSColor: Window).

• El texto aparece en gris oscuro (VSColor: ButtonShadow). Sin embargo, si la marca de agua aparece en un fondo gris medio u otro color (VSColor: ButtonFace) y hay preocupación por su legibilidad, vaya con texto negro (VSColor: WindowText).

• Las marcas de agua pueden centrarse o vaciarse a la izquierda. Aplique reglas de diseño estándar al tomar decisiones de alineación. No se puede seleccionar la marca de agua en segundo plano.

Ejemplo de texto de marca de agua

Texto específico del contexto (dinámico)

El texto dinámico se puede usar de dos maneras en un cuadro de diálogo o una interfaz de usuario modeless: ya sea como una etiqueta dinámica o como contenido dinámico.

• Etiqueta dinámica: un uso común del texto dinámico se encuentra en paneles descriptivos que ofrecen más información para el elemento seleccionado, como en un cuadro de diálogo que contiene una lista de elementos y propiedades para esos elementos mostrados en una cuadrícula a la derecha. La etiqueta de la cuadrícula de propiedades puede ser dinámica para que cuando se seleccione un elemento a la izquierda, la cuadrícula a la derecha muestra información de ese elemento específico.

• Texto dinámico: puede ser útil en instancias en las que necesita mostrar información específica y no información general de esta manera, pero se debe tener cuidado para no usar demasiado.

Si desea que los usuarios tengan la capacidad de copiar la información, el texto dinámico debe estar en un campo de texto de solo lectura.

Botones e hipervínculos

Los botones y los controles de vínculo (hipervínculos) deben seguir las instrucciones básicas del escritorio de Windows sobre los hipervínculos para su uso, redacción, ajuste de tamaño y espaciado.

Elegir entre botones y vínculos

Tradicionalmente, los botones se han usado para acciones e hipervínculos se han reservado para la navegación. Los botones se pueden usar en todos los casos, pero el rol de vínculos se ha expandido en Visual Studio para que los botones y vínculos sean más intercambiables en algunas condiciones.

Cuándo usar botones de comando:

• Comandos principales

• Mostrar ventanas usadas para recopilar entradas o tomar decisiones, incluso si son comandos secundarios

• Acciones destructivas o irreversibles

• Botones de compromiso dentro de asistentes y flujos de página

Evite los botones de comando en las ventanas de herramientas o si necesita más de dos palabras para la etiqueta. Los vínculos pueden tener etiquetas más largas.

Cuándo usar vínculos:

• Navegación a otra ventana, documento o página web

• Situaciones que requieren una etiqueta más larga o una frase corta para describir la intención de la acción

• Espacios estrechos en los que un botón sobrecargaría la interfaz de usuario, siempre que la acción no sea destructiva o irreversible.

• Desacentar los comandos secundarios en situaciones en las que hay muchos comandos

Ejemplos

Vínculos de comandos usados en infoBar siguiendo un mensaje de estado

Vínculos que se usan en el menú emergente de CodeLens

Vínculos usados para comandos secundarios en los que los botones atraerían demasiada atención

Botones comunes

Texto

Siga las instrucciones de escritura en texto y terminología de la interfaz de usuario.

Estilo visual

Estándar (no bloqueado)

La mayoría de los botones de Visual Studio aparecerán en cuadros de diálogo de utilidad y no deben tener estilo. Deben reflejar la apariencia estándar de los botones según lo dictado por el sistema operativo.

Temática

En algunos casos, los botones se pueden usar dentro de la interfaz de usuario con estilo y estos botones deben tener un estilo adecuado. Consulte Cuadros de diálogo para obtener información sobre los controles con temas.

Botones especiales

Navega... Botones

[Examinar...] Los botones se usan en cuadrículas, cuadros de diálogo y ventanas de herramientas y otros elementos de la interfaz de usuario de modelos. Muestran un selector que ayuda al usuario a rellenar un valor en un control. Hay dos variaciones de este botón, long y short.

El botón largo [Examinar...]

El botón de solo puntos suspensivos corto [...]

Cuándo usar el botón corto de solo puntos suspensivos:

• Si hay más de un botón largo [Examinar...] en un cuadro de diálogo, como cuando varios campos permiten la exploración. Utilice el botón [...] corto para cada uno para evitar las confusas teclas de acceso creadas por esta situación (&Examinar y B&rowse en el mismo cuadro de diálogo).

• En un cuadro de diálogo estrecho o cuando no hay ningún lugar razonable para colocar el botón largo.

• Si el botón aparecerá en un control de cuadrícula.

Instrucciones para usar el botón:

• No use una clave de acceso. Para acceder a él mediante el teclado, el usuario debe tabular desde el control adyacente. Asegúrese de que el orden de tabulación sea tal que cualquier botón examinar cae inmediatamente después del campo que se rellenará. Nunca use un carácter de subrayado por debajo del primer período.

• Establezca la propiedad Microsoft Active Accessibility (MSAA) Name en Browse... (incluidos los puntos suspensivos) para que los lectores de pantalla lo lean como "Examinar" y no "dot-dot-dot" o "period-period-period". Para los controles administrados, esto significa establecer la propiedad AccessibleName.

• Nunca use un botón de puntos suspensivos [...] para nada excepto una acción de exploración. Por ejemplo, si necesita un botón [Nuevo...], pero no tiene suficiente espacio para el texto, el cuadro de diálogo debe rediseñarse.

Ajuste de tamaño y espaciado

Tamaño de los botones [Examinar...]

Espaciado de los botones [Examinar...]

Botones gráficos

Algunos botones siempre deben usar una imagen gráfica y nunca incluir texto para ahorrar espacio y evitar problemas de localización. A menudo se usan en selectores de campos y otras listas ordenables.

Nota:

Los usuarios tienen que tabular estos botones (no hay claves de acceso), así que colóquelos en un orden razonable. Asigne la name propiedad del botón a la acción que realiza para que los lectores de pantalla interpreten correctamente la acción del botón.

Función	Button
Sumar
Quitar
Agregar todo
Quitar todo
Subir
Bajar
Eliminar

Ajuste de tamaño y espaciado

El ajuste de tamaño de los botones gráficos es el mismo que para la versión corta del botón [Examinar...] (26 x 23 píxeles):

Apariencia de una imagen gráfica en el botón, con y sin color transparente que muestra

Hipervínculos

Los hipervínculos son adecuados para acciones basadas en navegación, como abrir un tema de Ayuda, un cuadro de diálogo modal o un asistente. Si se usa un hipervínculo para un comando, siempre debe mostrar un cambio visible y notable en la interfaz de usuario. En general, las acciones que se confirman en una acción (como Guardar, Cancelar y Eliminar) se comunican mejor mediante un botón.

Estilo de escritura

Siga las instrucciones del escritorio de Windows para ver el texto de la interfaz de usuario. No use "Más información sobre", "Cuéntame más sobre" o "Obtener ayuda con esto". En su lugar, la frase Ayuda vincula texto en términos de la pregunta principal respondida por el contenido de la Ayuda. Por ejemplo, "Cómo agregar un servidor al Explorador de servidores?

Estilo visual

• Los hipervínculos siempre deben usar el servicio VSColor. Si un hipervínculo no tiene un estilo correcto, parpadea en rojo cuando está activo o muestra un color diferente después de ser visitado.

• No incluya subrayados en el estado de reposo del control a menos que el vínculo sea un fragmento de oración dentro de una oración completa, como en una marca de agua.

• Los subrayados no deben aparecer al mantener el puntero. En su lugar, los comentarios al usuario que el vínculo está activo son un ligero cambio de color y el cursor de vínculo adecuado.

Vistas de árbol

Las vistas de árbol proporcionan una manera de organizar listas complejas en grupos primarios y secundarios. Un usuario puede expandir o contraer grupos primarios para mostrar u ocultar elementos secundarios subyacentes. Cada elemento de una vista de árbol se puede seleccionar para proporcionar más acción.

Estilo visual de vista de árbol

Expansores

Los controles de vista de árbol deben ajustarse al diseño del expansador usado por Windows y Visual Studio. Cada nodo usa un control de expansor para mostrar u ocultar elementos subyacentes. El uso de un control de expansor proporciona coherencia para los usuarios que pueden encontrar diferentes vistas de árbol dentro de Windows y Visual Studio.

Correcto: estilo adecuado del nodo de vista de árbol mediante un control de expansión

Incorrecto: estilo incorrecto del nodo de vista de árbol

Número de selección

Cuando se selecciona un nodo dentro de la vista de árbol, el resaltado debe expandirse al ancho completo del control de vista de árbol. Esto ayuda a los usuarios a identificar claramente qué elemento han seleccionado. Los colores de selección deben reflejar el tema actual de Visual Studio.

Correcto: el resaltado del nodo seleccionado se ajusta al ancho completo del control de vista de árbol.

Incorrecto: el resaltado del nodo seleccionado no se ajusta al ancho completo del control de vista de árbol.

Iconos

Los iconos solo deben usarse en controles de vista de árbol si ayudan a identificar visualmente las diferencias entre los elementos. En general, los iconos solo se deben usar en listas heterogéneas en las que los iconos llevan información para diferenciar los tipos de elementos. En una lista homogénea mediante iconos se puede ver con frecuencia como ruido y se debe evitar. En ese caso, el icono de grupo (primario) puede transmitir el tipo de elementos dentro de él. La excepción a esta regla sería si el icono es dinámico y se usa para indicar el estado.

Barras de desplazamiento

Las barras de desplazamiento siempre deben ocultarse si el contenido se ajusta al control de vista de árbol. Es aceptable que las barras de desplazamiento estén ocultas o semitransparentes en una ventana desplazable y aparezcan cuando la ventana que contiene la vista de árbol tenga el foco o al mantener el puntero de la propia vista de árbol.

Las barras de desplazamiento vertical y horizontal se muestran porque el contenido ha superado los límites del control de vista de árbol.

Interacciones de la vista de árbol

Menús contextuales

Un nodo de vista de árbol puede mostrar las opciones de submenú en un menú contextual. Normalmente, esto ocurre cuando un usuario ha realizado clic con el botón derecho en un elemento o ha presionado la tecla Menú en un teclado de Windows con el elemento seleccionado. Es importante que el nodo obtenga el foco y esté seleccionado. Esto ayuda al usuario a identificar a qué elemento pertenece el submenú.

El elemento que genera el menú contextual obtiene el foco para notificar al usuario qué elemento se ha seleccionado.

Teclado

La vista de árbol debe proporcionar la capacidad de seleccionar elementos y expandir o contraer nodos mediante el teclado. Esto garantiza que la navegación cumpla nuestros requisitos de accesibilidad.

Control de vista de árbol

Los controles de árbol de Visual Studio deben seguir la navegación con el teclado común:

• Flecha arriba: seleccione elementos moviendo hacia arriba el árbol.

• Flecha abajo: seleccione los elementos moviendo hacia abajo el árbol

• Flecha derecha: expanda un nodo en el árbol.

• Flecha izquierda: contraer un nodo en el árbol

• Escriba la clave: Iniciar, cargar, ejecutar elemento seleccionado

Trid (vista de árbol y vista de cuadrícula)

Un control trid es un control complejo que contiene una vista de árbol dentro de una cuadrícula. Expandir, contraer y navegar por el árbol debe respetar los mismos comandos de teclado que una vista de árbol, con las siguientes adiciones:

• Flecha derecha: expanda un nodo. Una vez expandido el nodo, debe continuar navegando a la columna más cercana de la derecha. La navegación debe detenerse al final de la fila.

• Pestaña: navega a la celda más cercana de la derecha. Al final de la fila, la navegación continúa hasta la siguiente fila.

• Mayús + Pestaña: navega a la celda más cercana de la izquierda. Al principio de la fila, la navegación continúa hasta la celda situada más a la derecha de la fila anterior.

Un control trid en Visual Studio