Patrones compuestos para Visual StudioComposite Patterns for Visual Studio

Patrones compuestos combinan elementos de interacción y diseño de configuraciones distintas.Composite patterns combine interaction and design elements in distinct configurations. Algunos de los patrones compuestos más importantes en Visual Studio con respecto a la coherencia incluyen:Some of the most important composite patterns in Visual Studio with regard to consistency include:

Visualización de datosData visualization

Información generalOverview

Los gráficos son una forma visual para agregar y visualizar datos con el fin de mejorar la toma de decisiones.Charts are a visual way to aggregate and visualize data in order to enhance decision-making. Pueden ayudar a los usuarios que se enfrentan con una gran cantidad de datos, pero poco lo que significa que vea lo que merece atención y lo que podría necesitar una acción.They can help users faced with a lot of data but little meaning see what deserves attention and what might need an action.

El usuario se beneficiará de un gráfico si se cumple alguna de las condiciones siguientes:The user will benefit from a chart if any of the following conditions are true:

  • ¿El gráfico ayudará a los usuarios identificar tareas que pueden actuar en?Will the chart help users identify tasks they can act on?

  • ¿El gráfico permite que los usuarios prever las consecuencias de posibles cambios?Will the chart enable users to forecast consequences of potential changes?

  • ¿El gráfico ayudará a los usuarios descubrir tendencias e identificar patrones?Will the chart help users discover trends and identify patterns?

  • ¿El gráfico permite a los usuarios tomar decisiones mejor?Will the chart allow users to make better decisions?

  • ¿El gráfico ayudará a responder una pregunta específica que los usuarios pueden tener en el contexto especificado?Will the chart help answer a specific question that users may have in the given context?

Reglas generales para gráficosGeneral rules for charts

  • Claramente los datos de etiqueta.Clearly label data. Ilustraciones sin explicación simplemente son prácticamente imágenes.Illustrations without explanation are just pretty pictures.

  • Inicie los ejes en cero para evitar sesgar proporciones.Start axes at zero to avoid skewing proportions. Tamaño de longitud y la barra de la línea son importantes indicaciones visuales para entender las relaciones entre los puntos de datos.Line length and bar size are important visual cues to understanding the relationships between data points.

  • Crear gráficos, no infografías.Create charts, not infographics. Infografías son artísticas representaciones de datos y su objetivo principal es contar historias visual.Infographics are artistic representations of data, and their primary goal is visual storytelling. Los gráficos pueden (y deben) resultar atractiva visualmente, pero deje que los datos hablen por sí mismos.Charts can (and should) be visually appealing, but let the data speak for itself.

  • Evite skeumorphism, gráficos de barras gráficos, almohadillas contraste y otros toques infografía.Avoid skeumorphism, pictorial bar graphs, contrast hashmarks, and other infographic touches.

  • No utilice efectos 3D como elemento decorativo.Do not use 3D effects as a decorative element. Usarlas si solo se realmente parte integral de la capacidad del usuario para comprender la información.Use them only if they truly integral to the user's ability to comprehend the information.

  • Evite el uso de varias líneas y rellenos, como más de dos colores pueden realizar este tipo de gráfico difícil de leer e interpretar correctamente.Avoid using multiple lines and fills, as more than two colors can make this type of chart difficult to read and interpret correctly.

  • No use un gráfico (o cualquier ilustración) como el único medio de comprender un concepto o interactuar con los datos.Do not use a chart (or any illustration) as the sole means of understanding a concept or interacting with data. Esto presenta dificultades para los usuarios con discapacidades visuales.This presents difficulties for users with visual impairments.

  • No use gráficos como elementos decorativos o innecesarias en una página.Do not use charts as gratuitous or decorative elements on a page. En otras palabras, si no se agrega un gráfico de que cualquier valor o ayuda usuarios resolución un problema, no usarlo.In other words, if a chart doesn't add any value or help users solve a problem, don't use it.

Tipos de gráficosChart types

Tipos de gráficos que se usan en Visual Studio incluyen gráficos de barras, gráficos de líneas, un gráfico circular modificado que se conoce como un gráfico de anillos o "gráfico de anillos," escalas de tiempo, los trazados (también denominados "gráficos de clúster") y gráficos de Gantt de dispersión.Types of charts used in Visual Studio include bar charts, line charts, a modified pie chart known as a ring chart or "donut chart," timelines, scatter plots (also called "cluster charts"), and Gantt charts. Cada tipo de gráfico es útil para la comunicación de un tipo diferente de información.Each type of chart is useful for communicating a different type of information.

Otras consideraciones sobre la creación de gráficosOther charting considerations

ColorColor

Hay una paleta específica de los gráficos de colores definidos para su uso en Visual Studio.There is a specific palette of charting colors defined for use in Visual Studio. La paleta es accesible para los tipos principales de color rojo, y los colores se pueden diferenciar incluso cuando se usa como segmentos muy estrechos de color.The palette is accessible for the major types of color blindness, and the colors can be differentiated even when used as very narrow slices of color. Puede usar estos colores en cualquier combinación de cualquier tipo de gráfico o en la interfaz de usuario.You can use these colors in any combination for any type of chart or graph in your UI. No es necesario usar todos los colores de siete si no es necesario que muchos colores distintos.You do not need to use all seven colors if you do not need that many distinct colors. Estos colores no se diseñaron para usarse con los elementos de primer plano, por lo que no coloque texto o glifos encima de estos colores.These colors were not designed to be used with any foreground elements, so do not place text or glyphs on top of these colors. Deben ser modificable y expuestos a la personalización del usuario en estos matices Herramientas > opciones (consulte exponer los colores para los usuarios finales).These hues should be hard-coded and exposed to user customization under Tools > Options (see Exposing colors for end users).

MuestrarioSwatch hexHex RGBRGB
Muestra 71B252Swatch 71B252 #71B252#71B252 113,178,82113,178,82
Muestra BF3F00Swatch BF3F00 #BF3F00#BF3F00 191,63,0191,63,0
Muestra FCB714Swatch FCB714 #FCB714#FCB714 252,183,20252,183,20
Muestra 903F8BSwatch 903F8B #903F8B#903F8B 144,63,139144,63,139
Muestra 117AD1Swatch 117AD1 #117AD1#117AD1 17,122,20917,122,209
Muestra 79D7F2Swatch 79D7F2 #79D7F2#79D7F2 121,215,242121,215,242
Muestra B5B5B5Swatch B5B5B5 #B5B5B5#B5B5B5 181,181,181181,181,181

Interfaz de usuario y leerlo de objetoOn-object UI and peeking

En esta sección se proporciona contexto a leerlo, también conocido como vista de inspección de código, un tipo de interfaz de usuario del objeto exclusivo de Visual Studio.This section gives context to peeking, also known as code peek view, a type of on-object UI unique to Visual Studio.

Información generalOverview

  • La interfaz de usuario en el objeto debe conceder al usuario obtener más información o interactividad sin apartarse de su tarea principal.On-object UI should give the user more information or interactivity without detracting from their main task.

  • El modelo principal para la interfaz de usuario del objeto en Visual Studio se conoce como "información en el punto de atención".The main pattern for on-object UI in Visual Studio is known as "information at the point of attention."

  • Interfaz de usuario del objeto en Visual Studio es ya sea en línea o flotante y durable o transitorio.On-object UI in Visual Studio is either inline or floating and either durable or transient.

    • Vista de inspección de código, un tipo de interfaz de usuario del objeto en Visual Studio, es duradero y en línea.Code peek view, a type of on-object UI in Visual Studio, is inline and durable.

    • CodeLens, un tipo de interfaz de usuario del objeto en Visual Studio, es transitorio y flotantesCodeLens, a type of on-object UI in Visual Studio, is floating and transient

    Comprender cómo funciona un fragmento de código o buscar detalles sobre ese código, a menudo requiere un programador cambiar el contexto y vaya a otro tipo de contenido o en otra ventana.Understanding how a piece of code works, or finding details about that code, often requires a developer to switch context and go to other content or another window. Estos cambios de contexto pueden ser problemático, ya que los usuarios pueden perder el foco en su tarea original si dejan su ventana principal.These context shifts can be disruptive, because users can lose focus on their original task if they leave their main window. Además, la obtención de que copia original de contexto puede ser difícil, especialmente si cambio entre ventanas causa su código original para estar ocultado por otras interfaces de usuario.Furthermore, getting that original context back can be difficult, especially if switching windows caused their original code to be obscured by other UI.

    La interfaz de usuario en el objeto sigue un patrón llamado "información en el punto de atención".On-object UI follows a pattern called "information at the point of attention." Estos mensajes, las ventanas emergentes y cuadros de diálogo proporcionar información adicional relevante que agrega alguna aclaración o interactividad sin perder el foco en su tarea principal a los usuarios.These messages, pop-up windows, and dialog boxes give users additional, relevant information that adds clarification or interactivity without losing focus on their main task. Algunos ejemplos de la interfaz de usuario del objeto son ventanas emergentes que aparecen cuando un usuario mantiene el puntero sobre un icono en el área de notificación, el subrayado ondulado de color rojo debajo de una palabra mal escrita y la vista de inspección introducido en Visual Studio 2013.Examples of on-object UI include pop-up windows that appear when a user hovers their pointer over an icon in the notification area, the red squiggle under a misspelled word, and the peek view introduced in Visual Studio 2013.

Puntos de decisiónDecision points

Dentro de Visual Studio, hay varias formas de usar este patrón de información en el punto de atención.Within Visual Studio, there are several ways to use this pattern of information at the point of attention. Elegir el mecanismo adecuado y su implementación de una manera coherente y predecible son esencial para la experiencia general.Choosing the right mechanism and implementing it in a consistent, predictable way is essential to the overall experience. En caso contrario, podrían presentarse a los usuarios con una experiencia incoherente o confusa que resienta el foco desde el propio contenido.Otherwise, users might be presented with a confusing or inconsistent experience that detracts focus from the content itself.

Relaciones entre maestro y detalles de contenidoRelationships between master and detail content

Información en el momento de la atención se usa para mostrar una relación entre el contenido que el usuario está centrado en (el contenido "maestro") y adicionales relacionados con el contenido (el contenido de "Detalles").Information at the point of attention is used to display a relationship between content that the user is focused on (the "master" content) and additional related content (the "detail" content). En este patrón, el contenido de detalle está claramente relacionado con el contenido que el usuario está trabajando con y se puede mostrar el contenido principal cerca de.In this pattern, the detail content is clearly related to the content the user is working with and can be displayed close to the master content. Información adicional o información que no se pueden resumir sin sobrecargar el contenido principal debe seguir otro patrón, como una ventana de herramientas.Supplemental information or information that cannot be summarized without overwhelming the master content should follow another pattern, such as a tool window.

  • Siempre mostrar el contenido de detalle cerca al contenido principal.Always display the detail content in close proximity to the master content.

  • Siempre asegurarse de que el contenido de detalle aún permite que un usuario permanece centrado en el contenido principal.Always ensure that the detail content still enables a user to remain focused on the master content. A menudo, la mejor manera de lograr esto es representar el contenido de detalle como cerca el contenido principal como sea posible.Often, the best way to achieve this is to render the detail content as close to the master content as possible. Esto puede hacerse al representar el contenido de detalle en una ventana emergente junto al contenido principal o al representar el detalle contenido en línea debajo el contenido principal.This can be done by rendering the detail content in a pop-up window next to the master content, or by rendering the detail content inline underneath the master content.

  • Nunca usar información en el momento de la atención que lleva al usuario fuera el contenido principal.Never use information at the point of attention that takes the user away from the master content. Si los usuarios necesitan ver el contenido de detalle por separado, exponer una acción explícita que permite al usuario hacer esto.If users need to view the detail content separately, expose an explicit action that enables the user to do this.

Detalles de diseñoDesign details

Cuando haya determinado que la interfaz de usuario en el objeto es la elección correcta, hay cuatro consideraciones de diseño principal:Once you have determined that on-object UI is the right choice, there are four main design considerations:

  1. Persistencia: se espera el contenido sea duradero o transitorio?Persistence: is the content expected to be durable or transient?
    ¿Los usuarios querrán que sean visibles para hacer referencia a o para interactuar con la información?Will users want to keep the information visible to refer to or interact with? ¿O bien, los usuarios desearán rápidamente Eche un vistazo a la información y, a continuación, continuar con su tarea principal?Or will users want to quickly glance at the information and then continue with their main task?

  2. ¿Tipo de contenido: el contenido será informativo, útiles o navegación?Content type: will the content be informational, actionable, or navigational?
    ¿El usuario necesita información adicional sobre el contenido principal?Does the user need additional detail about the master content? ¿El usuario necesita completar una tarea que afecta al contenido principal?Does the user need to complete a task that affects the master content? ¿O el usuario deberá dirigirse a otro recurso?Or does the user need to be directed to another resource?

  3. ¿Tipo de indicador: tiene un indicador de ambiente sentido?Indicator type: does an ambient indicator make sense?
    ¿Puede la información de resumen de una manera útil y mostrar sin sobrecargar el contenido principal?Can the information be summarized in a useful way and displayed without overwhelming the master content?

  4. Movimientos: gestos de lo que se usará para invocar y descartar la interfaz de usuario?Gestures: what gestures will be used to invoke and dismiss the UI?
    ¿Cómo mostrar el contenido de detalle y enviarlo fuera el usuario?How will the user bring up the detail content and send it away? ¿Existe valor agregando un gesto, como anclado para cambiar entre estados transitorios y durable?Is there value in adding a gesture such as pinning to switch between transient and durable states?

    Cada uno de estos puntos de cuatro decisión tendrá un impacto en los principales componentes de interfaz de usuario del objeto.Each of these four decision points will have an impact on the major components of on-object UI.

Componentes de interfaz de usuario del objetoOn-object UI components

  1. Tipo de contenedor (ranura de contenido)Container (content presenter) type

    • FlotanteFloating

    • AlineadoInline

  2. Tipo de contenidoContent type

    • Informativo: datos que podrían ser estática o dinámicaInformational: data that might be static or dynamic

    • Que requieren acción: los comandos que cambian el contenido principalActionable: commands that change the master content

    • Navegación: vínculos que llevan al usuario a otra ventana o aplicación, como MSDNNavigational: links that take the user to another window or application, such as MSDN

  3. GestosGestures

    • InvocaciónInvocation

    • DespidoDismissal

    • AnclarPinning

    • Otras interaccionesOther interactions

  4. Modelo de persistencia y confirmaciónPersistence and commit model

    • TransitorioTransient

    • DurableDurable

    • AutomáticoAutomatic

    • Y a peticiónOn-demand

  5. Indicadores de ambientales (opcionales)Ambient indicators (optional)

    • Subrayado de subrayado ondulado de colorSquiggle underline

    • Icono de etiqueta inteligenteSmart tag icon

    • Otros indicadores de ambientalesOther ambient indicators

Tipo de contenedor (ranura de contenido)Container (content presenter) type

Hay dos opciones principales presentar contenido en el punto de atención:There are two major options available to present content at the point of attention:

  1. Insertado: espacio para el nuevo contenido hace que un moderador en línea, como la vista de inspección que se introdujo en el Editor de código de Visual Studio 2013, trasladando el contenido existente.Inline: an inline presenter, such as the peek view that was introduced in the Visual Studio 2013 Code Editor, makes space for new content by shifting existing content.

    • Prefiere insertada presentadores si espera que los usuarios desearán dedicar una cantidad considerable de tiempo que hace referencia a o interactuar con el contenido presente.Prefer inline presenters if you expect users will want to spend a significant amount of time referring to or interacting with the content you present.

    • Evitar insertada presentadores si espera que los usuarios desearán Eche un vistazo a la información que presenta y luego continuar con su tarea principal con una interrupción mínima.Avoid inline presenters if you expect users will want to glance at the information you present, then continue with their main task with minimal disruption.

  2. Flotante: un presentador flotante se coloca lo más cerca del contenido seleccionado como sea posible, pero no modifica el diseño del contenido existente.Floating: a floating presenter is positioned as close to the selected content as possible but does not alter the layout of the existing content. Se pueden emplear diversas estrategias, como mostrar un panel flotante contenido a través de la más cercana disponible espacio en blanco en el símbolo seleccionado.Various strategies can be employed, such as displaying a floating content panel over the nearest available white space to the selected symbol.

    • Prefiere flotante presentadores si espera que los usuarios desearán Eche un vistazo a la información que presenta y luego continuar con su tarea principal con una interrupción mínima.Prefer floating presenters if you expect users will want to glance at the information you present, then continue with their main task with minimal disruption.

    • Evitar flotante presentadores si espera que los usuarios querrán que dedicar una cantidad considerable de tiempo que hace referencia a o interactuar con el contenido se presente.Avoid floating presenters if you expect users will want to spend a significant amount of time referring to or interacting with the content you present.

Tipo de contenidoContent type

Hay tres tipos principales de contenido que se pueden mostrar dentro de cualquier contenedor de interfaz de usuario del objeto.There are three main types of content that can be displayed inside any on-object UI container. Se puede mostrar cualquier combinación de estos tipos de información.Any combination of these types of information can be shown. Los tres tipos son:The three types are:

  1. Informativo: contenedores de la interfaz de usuario mostrará algún tipo de contenido informativo del objeto de la mayoría.Informational: most on-object UI containers will display some kind of informational content. El contenido puede representar la información sobre el estado actual del entorno o puede representar información sobre un estado futura potencial del entorno.The content can represent information about the present state of the environment or it may represent information about a potential future state of the environment. Por ejemplo, podría usarse para mostrar el efecto de un comando concreto, como una refactorización en el código existente.For example, it could be used to show the effect of a particular command, such as a refactoring, on the existing code.

    • Siempre usar la representación canónica de la información que mostrar.Always use the canonical representation of the information that you display. Por ejemplo, el código debería ser similar a código, junto con el resaltado de sintaxis y debe respetar la fuente y otras opciones de entorno que el usuario ha establecido.For example, code should look like code, complete with syntax highlighting, and should respect whatever font and other environment settings the user has set.

    • Siempre considere la posibilidad de admitir las acciones sobre el contenido informativo que sería posible si esa misma información se presenta como contenido principal.Always consider supporting any actions over the informational content that would be possible if that same information is presented as master content. Por ejemplo, si el código existente dentro de un contenedor de interfaz de usuario del objeto a presentar, fuertemente considere la posibilidad de admitir la capacidad de examinar y modificar ese código.For example, if presenting existing code inside an on-object UI container, strongly consider supporting the ability to browse and modify that code.

    • Siempre considere el uso de un color de fondo diferente si presentar el contenido informativo que representa un estado futuro potencial.Always consider using a different background color if presenting informational content that represents a potential future state.

  2. Procesables: algunos contenedores de la interfaz de usuario del objeto proporcionará la capacidad de realizar alguna acción sobre el contenido principal, como realizar una operación de refactorización.Actionable: some on-object UI containers will provide the ability to perform some action over the master content, such as performing a refactoring operation.

    • Siempre colocar comandos procesables por separado desde el contenido informativo.Always position actionable commands separately from the informational content.

    • Siempre habilitar y deshabilitar las acciones cuando corresponda.Always enable and disable actions when appropriate.

    • Siempre hacen referencia a las directrices estándar para representar comandos dentro de los cuadros de diálogo.Always refer to the standard guidelines for representing commands inside dialog boxes.

    • Siempre mantener el número de acciones que se exponen en absoluto de un contenedor de objeto la interfaz de usuario mínima.Always keep the number of actions that are exposed in an on-object UI container to an absolute minimum. Interactuar con la interfaz de usuario del objeto debe ser una experiencia ligera y rápida.Interacting with on-object UI should be a lightweight, fast experience. El usuario no debe tener que gastar energía acerca de cómo administrar el contenedor del objeto de interfaz de usuario.The user should not have to expend energy on managing the on-object UI container itself.

    • Siempre considerar cómo y cuándo se cierra o descartar un contenedor de la interfaz de usuario del objeto.Always consider how and when an on-object UI container will be closed or dismissed. Como práctica recomendada, cualquier acción que concluye el cuadro de diálogo entre el maestro y detalles de contenido también debe cerrar el contenedor de la interfaz de usuario del objeto cuando se invoca esa acción.As a best practice, any action that concludes the dialog between the master and detail content should also close the on-object UI container when that action is invoked.

  3. Navegación: algunos en objetos contenedores de la interfaz de usuario incluyen vínculos que llevan al usuario a otra ventana o aplicación, como la apertura de un artículo MSDN en el explorador web del usuario.Navigational: some on-object UI containers include links that take the user to another window or application, such as opening an MSDN article in the user's web browser.

    • Siempre anteponer cualquier vínculo de navegación con "Abrir" para que los usuarios no sorprenderá por algún otro contenido que se navega.Always prepend any navigational link with "Open" so that users will not be surprised by being navigated to some other content.

    • Siempre separar los vínculos de navegación de vínculos útiles.Always separate navigational links from actionable links.

Indicadores de ambientales (opcionales)Ambient indicators (optional)

Indicadores de ambientales pueden ser sutil, incluido el texto presentado en un color de contraste del resto del código, u obvio, incluidos los símbolos tickler como subrayados subrayado ondulado de color e iconos de etiqueta inteligente.Ambient indicators can be subtle, including text presented in a contrasting color from the rest of the code, or obvious, including tickler symbols such as squiggle underlines and smart tag icons. Indicadores de ambientales comunican la disponibilidad de información adicional relevante.Ambient indicators communicate the availability of additional, relevant information. Lo ideal es que, incluso sin solicitar al usuario interactuar con ellos proporcionan información útil.Ideally, they provide useful information even without requiring the user to interact with them.

  • Siempre colocar un indicador de ambiente para que no distraer o sobrecargando el usuario.Always position an ambient indicator so that it does not distract or overwhelm the user. Si no es posible colocar un indicador de ambiente de tal manera, considere la posibilidad de otra solución.If it is impossible to position an ambient indicator in such a way, consider another solution.

  • Siempre colocar lo antes posible para el contenido que está relacionado con el indicador de ambiente.Always position the ambient indicator as close as possible to the content that it's related to.

  • Siempre intenta crear un indicador que resume la información hace que estén disponible.Always try to create an indicator that summarizes the information it makes available. Considere proporcionar un recuento del número de elementos de datos disponibles (por ejemplo, "3 referencias" en lugar de simplemente "Referencias") o pensar en alguna otra forma de resumir los datos.Consider providing a count of the number of data items available (for example, "3 references" instead of simply "References") or think of some other way to summarize the data.

    • En casos donde los datos de un indicador no siempre se calcula y muestra, considere inmediatamente comentarios progresiva tal como se calculan los valores.In cases where the data for an indicator cannot always be computed and displayed, immediately consider providing progressive feedback as the values are computed. Por ejemplo, considere la posibilidad de animar los cambios que reflejan las actualizaciones de los datos disponibles, similares a la manera en que se actualiza el icono dinámico de correo electrónico en Windows Phone como el número de correos electrónicos no leídos aumenta.For example, consider animating changes that reflect updates to the available data, similar to the way the email live tile on Windows Phone refreshes as the number of unread emails increases.
  • Nunca agregar indicadores más que un usuario puede tardar bastante para una parte determinada del contenido.Never add more indicators than a user can reasonably take in for a given piece of content. Indicadores de ambientales deben ser útiles sin necesidad de ninguna interacción del usuario.Ambient indicators should be useful without requiring any interaction from the user. Indicadores de perderán su ambiente si requieren desbordamiento y otros controles de administración para ponerlos en la vista.Indicators lose their ambience if they require overflow and other management controls to bring them into view.

GestosGestures

Un aspecto clave de permitir que el usuario mantener el foco en el contenido principal está proporcionando los gestos derechos para abrir y descartar el contenido de detalles adicionales.A key aspect of allowing the user to maintain focus on the master content is by supporting the right gestures to open and dismiss the additional detail content.

  • Siempre requieren que el usuario realizar algunas gesto explícito para abrir el contenido adicional.Always require the user to perform some explicit gesture to open the additional content. Gestos abiertos comunes incluyen:Common open gestures include:

    • Al mantener el mouse: información sobre herramientas o contenido informativo no interactivoHover: tooltips or non-interactive informational content

    • Comando explícito: moderador en líneaExplicit command: inline presenter

    • Haga doble clic en el indicador de ambiente: ventana emergente de CodeLensDouble-click the ambient indicator: CodeLens pop-up window

  • Siempre descartar el contenido de detalle siempre que el usuario presiona la tecla Esc.Always dismiss the detail content whenever the user presses the Esc key.

  • Siempre tenga en cuenta el contexto de la interfaz de usuario del objeto.Always consider the context of the on-object UI. Moderadores de contenido que permiten la interacción dentro del contenedor, prestar si se debe mostrar información adicional al mantener el mouse, que suele ser perjudiciales para el flujo de trabajo del usuario.For content presenters that allow for interaction within the container, carefully consider whether to show additional information on hover, which is likely to be disruptive to the user's workflow.

  • Nunca mostrar contenido al mantener el mouse que parece ser editable o invitaciones a la interacción del usuario.Never display content on hover that appears to be editable or invites user interaction. Este comportamiento puede frustrar a los usuarios si intenta mover el cursor sobre el contenido de detalle, como es el comportamiento estándar para una información sobre herramientas descartar inmediatamente cuando el cursor ya no está sobre el patrón de contenido que lo generó.This behavior can frustrate users if they try to move the cursor over the detail content, as the standard behavior for a tooltip is to immediately dismiss when the cursor is no longer over the master content that produced it.

Modelos de selecciónSelection models

Información generalOverview

Un modelo de selección es el mecanismo utilizado para indicar y confirmar las operaciones en uno o más objetos de interés dentro de la interfaz de usuario.A selection model is the mechanism used to indicate and confirm operations on one or more objects of interest within the user interface. Este tema describen los patrones de interacción de selección en los editores de documento de Visual Studio: las superficies de modelado, superficies de diseño y editores de texto.This topic discusses selection interaction patterns within Visual Studio document editors: text editors, design surfaces, and modeling surfaces.

Los usuarios deben tener una forma de indicar a Visual Studio, lo que están trabajando, y Visual Studio debe responder de forma predecible con comentarios a los usuarios sobre lo que se está ejecutando en.Users must have a way of indicating to Visual Studio what they are working on, and Visual Studio must respond predictably with feedback to users about what it is operating on. Puede dar lugar a una falta de comunicación entre el usuario y la interfaz de usuario o de diferencias en el usuario no advertir una acción, que puede tener consecuencias no deseadas.Differences or a miscommunication between the user and the user interface can result in the user not noticing an action, which can have unintended consequences. A menudo, el error pasa desapercibido hasta que el usuario ve que falta algo o ha cambiado.Often, the error goes unnoticed until the user sees that something is missing or has changed. Los modelos de selección son, por tanto, una de las partes más importantes del diseño de la interfaz de usuario.Selection models are therefore one of the most critical pieces of user interface design. Aunque los modelos de selección en Visual Studio son coherentes con Windows, hay pequeñas variaciones.Although selection models in Visual Studio are consistent with Windows, there are slight variations.

En Visual Studio, como en Windows, los modelos de selección varían según el contexto en el que se produce la interacción.In Visual Studio, as in Windows, selection models differ depending on the context in which the interaction occurs. Selecciones pueden producirse en cuatro tipos de objetos:Selections can occur in four types of objects:

  • TextoText

  • Objetos gráficosGraphical objects

  • Listas y árbolesLists and trees

  • CuadrículasGrids

    Dentro de estos objetos, hay tres tipos de selecciones:Within these objects, there are three types of selections:

  • ContiguosContiguous

  • No contiguoDisjoint

  • RegiónRegion

ÁmbitoScope

El componente más importante de selección es asegurarse de que el usuario sabe en qué ventana funcionan (activación) y dónde el foco se encuentra (selección).The most important component of selection is ensuring that the user knows in which window they are working (activation) and where the focus is located (selection). Visual Studio extiende la funcionalidad de administración de la ventana de Windows, pero el esquema de activación es el mismo: interactuar con una ventana trae el foco a la ventana.Visual Studio extends the window management functionality in Windows, but the activation scheme is the same: interacting with a window brings focus to the window. Visual Studio tiene dos indicadores para la activación: uno para las ventanas de documento y otro para las ventanas de herramientas.Visual Studio has two indicators for activation: one for document windows, and one for tool windows.

Para las ventanas de documento, la ventana activa se indica mediante una ficha de ventana de documento llega a la parte delantera y cambiar su color de fondo:For document windows, the active window is indicated by a document window tab coming to the front and changing its background color:

Selección de pestaña activa en Visual StudioActive tab selection in Visual Studio

Selección de pestaña activaActive tab selection

Ventanas de herramientas, la ventana activa se indica mediante un cambio en el color del área de la barra de título de la ventana de herramientas:For tool windows, the active window is indicated by a change in the color of the title bar area of the tool window:

Selección de la ventana de herramientas activa en Visual StudioActive tool window selection in Visual Studio

Ventana de herramientas activa, se muestra la selección principal de un nodoActive tool window showing primary selection of a node

Selección de la ventana de herramientas inactiva en Visual StudioInactive tool window selection in Visual Studio

Ventana de herramientas inactiva, se muestra la selección latente del nodoInactive tool window, showing latent selection of node

Una vez que una ventana está activa, se indica la importancia según los modelos de selección que se describen en esta sección de las instrucciones.Once a window is active, its focus is indicated according to the selection models outlined in this section of the guidelines.

ContextoContext

Visual Studio fue diseñado para conservar un fuerte concepto de contexto, realizando un seguimiento de donde el usuario está trabajando.Visual Studio was designed to retain a strong concept of context, keeping track of where the user is working. Sólo una ventana está activa, ya sea una ventana de herramientas o documento.Only one window is active, whether it is a tool or document window. Sin embargo, la ventana de documento superior siempre conserva una selección latente.However, the topmost document window always retains a latent selection. Aunque el foco esté en una ventana de herramientas, la ventana de documento que estuvo activo muestra una selección, incluso en un estado inactivo.Although the focus might be in a tool window, the document window that was last active displays a selection, even in an inactive state. Esto sirve para conservar el contexto del usuario en el documento que estaba editando, que se muestra que Visual Studio conserva su estado para que puede devolver- and -shift sin problemas entre las ventanas de herramientas y ventanas de documento.This is done to retain the user's context in the document they were editing, showing them that Visual Studio has retained their state so that they can return and shift seamlessly between tool windows and document windows.

Selección de textoText selection

Los editores de Visual Studio que son estrictamente textuales, como el editor de texto integrado, usan el mismo modelo de selección de texto y aspecto se describe en el Mouse y punteros página de Windows User Experience Interaction Guidelines en MSDN.Visual Studio editors that are strictly textual, such as the built-in text editor, use the same text selection model and appearance described in the Mouse and Pointers page of the Windows User Experience Interaction Guidelines on MSDN. El foco de entrada en el editor de texto se indica mediante una barra vertical que llama el punto de inserción.The input focus in the text editor is indicated by a vertical bar called the insertion point. El punto de inserción es un solo píxel grueso y color como el inverso de todo lo que aparece detrás de él.The insertion point is a single pixel thick and colored as the inverse of whatever appears behind it. Parpadeará según la frecuencia establecida el velocidad de intermitencia del Cursor en el velocidad pestaña de la teclado applet del Panel de Control.It blinks according to the rate set by the Cursor blink rate setting in the Speed tab of the Keyboard applet in Control Panel.

Selección contigua y separadaContiguous and disjoint selection

Solo es contiguo selección dentro del editor de texto.Selection within the text editor is contiguous only. No se permiten selecciones, pero se deben solucionar en el Editor de gráficos de objeto de texto inconexos.Disjoint text selections are not permitted, but should be addressed in graphical object editors. Cuando el puntero del mouse está sobre un área de texto, el cursor cambia a un cursor en i.When the user's mouse pointer is over a text area, the cursor changes to an I-beam. Un solo clic coloca el punto de inserción en el editor de texto en la posición del clic.A single click places the insertion point in the text editor at the click location. Manteniendo presionado el botón del mouse se inicia un área resaltada de selección y soltar el botón del mouse finaliza el resalte de la selección.Holding the mouse button down starts a selection highlight and releasing the mouse button ends the selection highlight.

Selección de región (selección del cuadro)Region selection (box selection)

Visual Studio admite selecciones de la región en el editor de texto, y esto se conoce como selección del cuadro.Visual Studio supports region selections in the text editor, and this is called box selection. Selección del cuadro permite al usuario seleccionar un área de texto que no sigue la secuencia de texto normal.Box selection allows the user to select a region of text that does not follow the regular text stream. Al igual que con la selección de texto estándar, la selección debe ser contigua.As with standard text selection, the selection must be contiguous. Selección del cuadro inicia manteniendo presionada la tecla Alt mientras arrastra el mouse.Box selection is initiated by holding down the Alt key while dragging with the mouse. También se puede iniciar la selección del cuadro manteniendo presionadas las teclas de MAYÚS y Alt mientras usa las teclas de flecha para indicar la región de selección.Box selection can also be initiated by holding down the Alt and Shift keys while using the arrow keys to indicate the region of selection. Selección del cuadro usa el resaltado de selección normal y muestra el cursor parpadea al final del área de selección del punto de inserción.Box selection uses the normal selection highlight and shows the insertion point cursor blinking at the end of the selection area.

Regional (cuadro) selección en Visual StudioRegional (box) selection in Visual Studio

Selección de región (cuadro) en Visual StudioRegion (box) selection in Visual Studio

Apariencia de la selección de textoText selection appearance

Se pueden personalizar los colores utilizados para la selección activa e inactiva en el editor.The colors used for active and inactive selection in the editor can be customized. Para personalizar la apariencia visual del editor, un usuario puede ir a Herramientas > opcionesy, a continuación, busque en entorno > fuentes y colores > Editor de texto.To customize the visual appearance of the editor, a user can go to Tools > Options, and then look under Environment > Fonts and Colors > Text Editor.

Selección gráficoGraphical selection

InteracciónInteraction

Selección de objetos gráficos puede ser compleja y depende de una serie de factores:Graphical object selection can be complex and depends upon a number of factors:

  • Modelo de selección principal del editor.The editor's primary selection model. Los editores que contienen objetos gráficos también pueden utilizarse para editar texto o cuadrículas.Editors that contain graphical objects can also be used to edit text or grids. Por ejemplo, el editor podría ser un editor de texto que también admite la colocación de objetos gráficos, como el Diseñador XAML de Visual Studio.For example, the editor might be a text-based editor that also supports the placement of graphical objects, such as the Visual Studio XAML designer. Compatibilidad con varios tipos de objeto puede afectar a cómo el usuario selecciona grupos consta de diferentes tipos de objetos.Supporting multiple object types can affect how the user selects groups made up of different types of objects.

  • Compatibilidad con los Estados de selección principal y secundaria.Support for primary and secondary selection states. Un editor puede proporcionar la selección primaria y secundaria, los Estados para que se pueden editar los objetos al unísono, están alineados entre sí, cambiar de tamaño juntos, y así sucesivamente.An editor can provide primary and secondary selection states so that objects can be edited in unison, aligned with each other, resized together, and so on.

  • Compatibilidad con la edición en contexto.In-place editing support. Los editores también pueden permitir que el contenido de sus objetos gráficos que se va a editar.Editors can also allow the contents of their graphical objects to be edited. Por ejemplo, una forma de rectángulo también podría contener texto en el interior que puede cambiarse por el usuario.For example, a rectangle shape might also contain text on the inside that can be changed by the user. Además, que el texto se podría centrado o justificado.In addition, that text could be centered or justified. Edición en contexto implica un nivel más detallado de la interacción del usuario y, por tanto, requiere un conjunto apropiado de indicaciones visuales para presentar información de estado al usuario.In-place editing involves a more detailed level of user interaction and therefore requires an appropriate set of visual cues for presenting state information to the user.

Interacción con el mouseMouse interaction

EntradaInput ResultadoResult
Haga clic en un objeto no seleccionadoClick an unselected object Selecciona el objeto y muestra una línea discontinua y controladores de selección, si el objeto es de tamaño ajustable.Selects the object and displays a dashed line and selection handles, if the object is resizable.
Haga clic en un objeto seleccionadoClick a selected object Activa la edición en contexto, si lo admite el objeto.Activates in-place editing if the object supports it. Se hace clic fuera del objeto, desactiva el modo de edición en contexto.Clicking outside the object deactivates the in-place editing mode.
Haga doble clic en un objetoDouble-click an object Se abre el código detrás del objeto para su edición y podría insertar un controlador de eventos de forma predeterminada, si procede.Opens the code behind the object for editing, and might insert a default event handler, if appropriate.
Seleccione un objetoPoint to an object Cambia el puntero hasta el cursor de movimiento.Changes the pointer to the move cursor. Puede cambiar la apariencia del objeto, como su luminosidad o un color.The object's appearance, such as its luminosity or color, might change.
Elija un controlador de selecciónPoint to a selection handle Cambia el puntero hasta el cursor de cambio de tamaño.Changes the pointer to the resize cursor. Para los objetos que admiten el giro, algunos controladores de selección pueden cambiar el puntero a un cursor Girar tal como se sitúa el puntero diferente (por ejemplo, si se mueve más lejos) en relación con el controlador de selección.For objects that support rotation, some selection handles might change the pointer to a rotate cursor as the pointer is positioned differently (for example, moved farther away) with respect to the selection handle.
ArrastreDrag Incluso si el objeto no se ha seleccionado anteriormente, cambia el puntero hasta el cursor de movimiento y mueve el objeto.Even if the object is not previously selected, changes the pointer to the move cursor and moves the object.
Editor pierde el focoEditor loses focus Desactiva el modo de edición en contexto, aunque el objeto conserva el contenido y el aspecto que tenía durante su último estado de operación o selección.Deactivates in-place editing mode, although the object retains the content and appearance it had during its last operation/selection state.
Selección de objetosObject selection Indicado por un borde, línea de puntos u otro tratamiento distingan visualmente para resaltar el límite del objeto.Indicated by a border, dotted line, or other visually distinct treatment to highlight the boundary of the object.
Cambiar el tamaño de un objeto seleccionadoResize a selected object Indicado por controladores de selección.Indicated by selection handles.

Un objeto redimensionable tiene ocho controladores, que representa cada dirección en la que puede cambiarse.A resizable object has eight handles, representing each direction in which it can be resized. Si el objeto sólo se puede cambiar el tamaño en determinadas direcciones, se pueden usar menos identificadores.Fewer handles may be used if the object can only be resized in certain directions. Cuando el usuario cambia el tamaño de un objeto hasta donde ocho controladores no ser interactivas, se pueden usar cuatro identificadores.When the user sizes an object down to where eight handles would not be interactive, then four handles may be used. Tamaños de identificador deben asociarse a las métricas de borde y el borde de ventana con el GetSystemMetrics función al tamaño proporcional a la resolución de pantalla de la API.Handle sizes should be tied to the window border and edge metrics with the GetSystemMetrics API function to size in proportion to the display resolution.

Controladores de tamañoResize handles
Girar un objeto seleccionadoRotate a selected object Controladores de giroRotate handles

Interacción con el tecladoKeyboard interaction

EntradaInput ResultadoResult
TabTab Mueve el indicador de foco entre el orden lógico de objetos en el editor.Moves the focus indicator among the logical order of objects in the editor. Esto puede ser de izquierda a derecha o arriba a abajo según TabIndex (o equivalentes) el valor de propiedad, orden de creación de objetos y el propósito general del editor.This may be left-to-right or top-to-bottom depending on TabIndex (or equivalent) property value, order of object creation, and the overall purpose of the editor. Mayús + Tab invierte la dirección del indicador de foco.Shift+Tab reverses the direction of the focus indicator.
Barra espaciadoraSpacebar Activa el modo de panorámica mientras se mantiene la pulsación de tecla.Activates panning mode while keystroke is maintained. Entrada de mouse adicional es necesario para realizar una panorámica de la posición de la ventanilla.Additional mouse input is required to pan the viewport position.
Ctrl+Barra espaciadoraCtrl+Spacebar Activa el modo de zoom mientras se mantiene la pulsación de tecla.Activates zoom mode while keystroke is maintained. Se requiere entrada de mouse adicionales para aumentar y disminuir el factor de zoom.Additional mouse input is required to increase and decrease the zoom factor.
Ctrl + Alt + signo menosCtrl+Alt+Minus Sign Disminuye el factor de zoom en un nivel.Decreases the zoom factor by one level.
Ctrl + Alt + signo másCtrl+Alt+Plus Sign Aumenta el factor de zoom en un nivel.Increases the zoom factor by one level.
Tecla MAYÚS o CtrlShift OR Ctrl Agrega el objeto al grupo de selección.Adds the object to the selection group. CTRL también permite quitar los objetos por separado desde el grupo de selección.Ctrl also allows you to remove objects individually from the selection group.
EntrarEnter Realiza el comando predeterminado del objeto (normalmente se abre o editar).Performs the default command for the object (usually Open or Edit).
F2F2 Activa la edición en contexto para el objeto.Activates in-place editing for the object.
Teclas de direcciónArrow keys Mueve los objetos seleccionados en la dirección de la tecla presionada, en incrementos pequeños (por ejemplo, de 1 píxel en un momento)Moves the selected object(s) in the direction of the arrow key pressed, in small increments (for example, 1 pixel at a time)
CTRL + las teclas de direcciónCtrl+arrow keys Mueve los objetos seleccionados en la dirección de la tecla presionada, en incrementos mayores (por ejemplo, 10 píxeles a la vez)Moves the selected object(s) in the direction of the arrow key pressed, in larger increments (for example, 10 pixels at a time)
Mayús + flecha clavesShift+arrow keys Cambia el tamaño de los objetos seleccionados en la dirección correspondiente, en incrementos pequeños (por ejemplo, de 1 píxel en un momento)Resizes the selected object(s) in the respective direction, in small increments (for example, 1 pixel at a time)
Ctrl + Mayús + teclas de direcciónCtrl+Shift+arrow keys Cambia el tamaño de los objetos seleccionados en la dirección correspondiente, en incrementos mayores (por ejemplo, 10 píxeles a la vez)Resizes the selected object(s) in the respective direction, in larger increments (for example, 10 pixels at a time)

Cuando los usuarios modificar controles en su lugar, tendría sentido para los objetos cambiar el tamaño automáticamente con la entrada del usuario.When users edit controls in place, it might make sense for objects to automatically resize with user input. Por ejemplo, si el usuario edita un control de etiqueta, la etiqueta debe crecer para mostrar el texto que escribió el usuario.For example, if the user edits a label control, then the label should grow to display the text that the user just typed. Si no se hace esto, el usuario debe cambiar el tamaño del control manualmente después de editar el texto.If this is not done, the user must resize the control manually after editing the text. Si el usuario tiene una gran cantidad de controles, esto se convierte en una tarea improductivo y básicas.If the user has a lot of controls, this becomes a rote and unproductive task.

Contenedores de gráficosGraphical containers

En algunos casos, editores gráficos proporcionan contenedores para otros objetos gráficos, como el control de Panel de formularios Windows Forms o el control de diseño de cuadrícula en el Diseñador HTML.In some cases, graphical editors provide containers for other graphical objects, such as the Windows Forms Panel control or the Grid Layout control in the HTML designer. Si el editor proporciona contenedores para otros objetos gráficos, debe utilizarse el siguiente modelo de selección para el contenedor solo (objetos en el seguimiento de contenedor del modelo estándar como se ha descrito anteriormente):If your editor provides containers for other graphical objects, then the following selection model should be used for the container only (objects within the container follow the standard model as described above):

EntradaInput ResultadoResult
Hacer clic en el contenedorSingle-click on the container Selecciona el objeto contenedor sin directamente la selección de cualquiera de los objetos contenidos.Selects the container object without directly selecting any of the contained objects. El contenedor se puede mover o cambiar de tamaño con estándar mouse y teclado (como se describió anteriormente).The container may be moved and/or resized with standard mouse and keyboard input (as described above). Los objetos contenidos se mueven en relación al contenedor, pero no cambian de tamaño los objetos contenidos a menos que se seleccionan directamente.Contained objects are moved in relation to the container, but contained objects are not resized unless they are also directly selected.
Mantenga el mouse sobre la región de límites del contenedorHover over the container's boundary region El mouse se convierte en el cursor de movimiento, que indica que se puede mover el contenedor.Turns the mouse into the move cursor, indicating that the container can be moved.
Arrastre la región de límites del contenedorDrag the container's boundary region Cambia el mouse hasta el cursor de movimiento y mueve el contenedor (y los objetos contenidos dentro de).Changes the mouse to the move cursor and moves the container (and the contained objects within). El contenedor no se pueden mover sin primero seleccionado con un solo clic.The container cannot be moved without first being selected with a single click.
Hacer clic en un objeto dentro del contenedorSingle-click on an object within the container Anula el contenedor (si ha seleccionado) y selecciona sólo el objeto hace clic en él.Deselects the container (if selected) and selects only the clicked object.
Mayús + clic o Ctrl + clic en un contenedor o un objeto contenidoShift+click OR Ctrl+click on a contained object and/or container Agrega el objeto donde ha hecho clic en un grupo de selección o la selección existente.Adds the clicked object to an existing selection or selection group. Si el objeto que se hace clic en él ya es miembro del grupo de selección, se quita el grupo de selección.If the clicked object is already a member of the selection group, it is removed from the selection group.

El modelo de selección básica deben cumplir los objetos contenidos como se describe en la sección anterior.The contained objects should adhere to the basic selection model as described in the previous section. Pruebas de facilidad de uso del Diseñador de Windows Forms, espera que los usuarios un acceso ininterrumpido a los objetos contenidos sin intervención de pasos (impuestas por el objeto de contención).From usability testing of the Windows Forms designer, users expected seamless access to the contained objects without intervening steps (imposed by the containment object).

No contiguo y las selecciones de regiónDisjoint and region selections

Editores de objeto gráfico deben admitir selecciones discontinuas.Graphical object editors should support disjoint selections. Tenga en cuenta que este gráfico no muestra la apariencia del control para Visual Studio.Please note that this graphic does not show the control appearance for Visual Studio. Consulte apariencia de la selección de objeto gráfico para obtener especificaciones detalladas visuales.See Graphical object selection appearance for detailed visual specifications.

No contiguo y selectores de regiónDisjoint and region selectors

Selección no contiguoDisjoint selection

Editores gráficos también deben proporcionar las selecciones de la región con un indicador de selección de tipo marquesina.Graphical editors should also provide region selections with a marquee-type selection indicator. Si el editor gráfico admite otros tipos de objeto (por ejemplo, texto), a continuación, las selecciones de la región es posible que no sea posibles según las restricciones de esos otros tipos de objeto.If the graphical editor supports other object types (such as text), then region selections might not be possible depending on the constraints of those other object types.

Selección de recuadroMarquee selection

Selección de recuadroMarquee selection

Selecciones principal y secundariaPrimary and secondary selections

Algunos editores de objeto gráfico permiten al usuario editar o alinear objetos en grupos.Some graphical object editors allow the user to edit or align objects in groups. En este caso, debe introducir el concepto de selecciones principal y secundaria.In this case, the concept of primary and secondary selections needs to be introduced. La selección principal es el objeto al que todos los demás objetos responden para las operaciones de grupo.The primary selection is the object to which all other objects respond for group operations. El objeto que el usuario selecciona el primero se convierte en el control principal y las selecciones subsiguientes se convierten en las selecciones secundaria.The object that the user selects first becomes the primary control, and subsequent selections become the secondary selections. La selección primaria tiene un tratamiento distinto visual de las selecciones para indicar que el objeto que es el principal secundarios:The primary selection has a distinct visual treatment from the secondary selection(s) to indicate which object is primary:

Selección primaria y secundariaPrimary and secondary selection

Selección primaria con dos selecciones secundariasPrimary selection with two secondary selections

Apariencia de la selección de objeto gráficoGraphical object selection appearance

Los controladores de selección son cuadrados dibujadas en un patrón rectangular alrededor del rectángulo del objeto.The selection handles are squares drawn in a rectangular pattern around the bounding box of the object. El gráfico siguiente muestra ejemplos de los diferentes Estados que puede tener un objeto gráfico con el identificador, ajuste de tamaño y apariencia de edición en contexto.The chart below shows examples of the various states that a graphical object can have with handle, sizing, and in-place editing appearance. El tamaño de los identificadores debe asociarse al borde de ventana y el uso de las métricas de edge el GetSystemMetrics API.The size of the handles should be tied to window border and edge metrics using the GetSystemMetrics API.

EstadoState AparienciaAppearance Detalles de VisualVisual details
No seleccionadoUnselected DefaultDefault Estado del botón predeterminadoDefault button state
Selección primariaPrimary selection Puede cambiar el tamañoResizable Selección primaria con controladores de tamañoPrimary selection with resize handles
Selección primariaPrimary selection No puede cambiar el tamañoNot resizable Selección primaria sin controladores de tamañoPrimary selection without resize handles
Selección primariaPrimary selection BloqueadoLocked Selección primaria bloqueadaPrimary selection locked
Selección secundariaSecondary selection Puede cambiar el tamañoResizable Selección secundaria con controladores de tamañoSecondary selection with resize handles
Selección secundariaSecondary selection No puede cambiar el tamañoNot resizable Selección secundaria sin controladores de tamañoSecondary selection without resize handles
Selección secundariaSecondary selection BloqueadoLocked Selección secundaria bloqueadaSecondary selection locked
Interfaz de usuario activoUI active DefaultDefault Estado de IU activeUI active state

Modelos de selección de vistaView selection models

Vista de árbolTree view

Se muestra la selección en una vista de árbol con un simple resaltado.Selection in a tree view is shown with a simple highlight. Si el usuario hace clic en un nombre de nodo o un icono de nodo, se selecciona el nodo.If the user clicks on a node name or a node icon, the node becomes selected. Los glifos triangulares a la izquierda del nodo expanda o el control de árbol de contrato, pero no afectan a la selección del usuario, con una excepción: tras contraer un nodo primario cuando la selección está en un elemento secundario de ese nodo, la selección se desplaza al elemento primario.The triangular glyphs to the left of the node expand or contract the tree control but do not affect the user's selection, with one exception: upon collapsing a parent node when the selection is on a child of that node, the selection moves to the parent.

Vista de árbol típica en Visual StudioTypical tree view in Visual Studio

Vista de árbol típica en Visual StudioTypical tree view in Visual Studio

Vistas de árbol pueden admitir selecciones contiguas y no contiguas, incluso a través de varios niveles del árbol.Tree views can support contiguous and disjoint selections, even across multiple levels in the tree. Contiguos o no contiguos se deben realizar varias selecciones en los nodos de árbol visible.Contiguous or disjoint multiple selections must be made on visible tree nodes. Si un nodo está contraído, se pierde la selección separada y el nodo que se contrajo Obtiene la selección.If a node is collapsed, the disjoint selection is lost and the node that was collapsed obtains the selection. De este modo, el usuario puede ver los nodos que se verán afectados por una operación.In this way, the user can see the nodes that will be affected by an operation. Cuando se contraen los nodos, sea poco claro qué nodos pueden verse afectados.When nodes are collapsed, it becomes unclear which nodes might be affected.

Cuando se selecciona un nodo primario, debe aplicar la operación con el elemento primario, aunque puede haber casos donde tenga sentido para una operación aplicar el elemento primario y todos sus elementos secundarios.When a parent node is selected, the operation should apply to the parent, though there may be cases where it makes sense for an operation to apply to the parent and all of its children. En este caso, proporcionan la interfaz de usuario adicional durante la operación, como una casilla o un cuadro de diálogo de confirmación para que la opción "aplicar a todos los elementos secundarios" explícita para el usuario.In this case, provide additional UI during the operation, such as a check box or confirmation dialog to make the "apply to all children" option explicit to the user.

Cambiar nombreRenaming

Si los nodos del árbol admiten el cambio de nombre, cambiar el nombre debe realizarse en su lugar.If nodes in the tree support renaming, renaming should be done in place. La operación local debe ser el estándar en todos los controles de árbol en Visual Studio.The in-place operation should be the standard across all tree controls in Visual Studio. Proporciona un comando de cambio de nombre que se activa inmediatamente el modo de edición en contexto, con la selección de texto que abarca el nombre completo del nodo, preparado para aceptar la entrada del usuario.Provide a rename command that immediately activates the in-place editing mode, with the text selection covering the entire name of the node, ready to accept user input. Si el nodo representa un archivo, el nombre de archivo debe contener la extensión.If the node represents a file, the filename should contain the extension. Resaltado de la selección debe incluir sólo el cuerpo del nombre de archivo y no la extensión.The selection highlight should include only the body of the filename and not the extension.

EntradaInput ResultadoResult
Entrar (tecla)Enter key Confirma la operación de cambio de nombreCommits the rename operation
Tecla ESCEsc key Cancela la operación de cambio de nombreCancels the rename operation
Hacer clic fuera de la región de edición en contextoClicking outside the in-place edit region Confirma la operación de cambio de nombreCommits the rename operation
DeshacerUndo Proporcionar la fácil deshacer para cancelar la operación de cambio de nombreProvide easy undo to cancel the rename operation

Selección de listas y los controles de cuadrículaSelection within lists and grid controls

El concepto clave en la selección de la lista es que está basado en la fila, lo que significa que cuando se realiza una selección toda la fila está seleccionada como una unidad.The key concept in list selection is that it is row-based, meaning that when a selection is made the whole row is selected as a unit. Por el contrario, las cuadrículas pueden permitir que determinadas celdas que se seleccionen sin que afecte a todos los demás aspectos de la fila.By contrast, grids can allow specific cells to be selected without affecting any other aspect of the row. Las cuadrículas también podrían contener una jerarquía de filas anidadas (como en un control TreeGrid) que permiten todas ramas de la jerarquía se seleccionen y se anula la selección mediante la interacción con las filas primarias.Grids might also contain a hierarchy of nested rows (such as in a TreeGrid) that allow entire branches of the hierarchy to be selected and deselected by interacting with the parent rows. Selección de listas se muestra mediante un color de resalte simple en toda la fila de datos.Selection in lists is shown by a simple highlight color on the entire row of data. El foco se muestra un borde de puntos solo píxel alrededor de la fila actual de editable o celda (fila si todas las celdas son de solo lectura).Focus is shown by a single-pixel dotted border around the current editable row or cell (row if all cells are read-only).

Note

Enfoque y selección son conceptos diferentes.Focus and selection are different concepts. Enfoque es una indicación de que la interfaz de usuario del elemento que se destina para recibir entrada dirigido no explícitamente a otro objeto, mientras que selección se refiere al estado de inclusión de un objeto en un conjunto de objetos de los cuales posteriores las operaciones pueden tener lugar.Focus is an indication of which UI element is targeted to receive input not explicitly directed at another object, while selection refers to the state of an object's inclusion in a set of objects on which subsequent operations may take place.

Las selecciones en las listas pueden ser contiguas, separado, o la región.Selections in lists may be contiguous, disjoint, or region. Cuando selecciones múltiples se permiten, contiguos y siempre debe ser compatible selección separado al soporte técnico para las selecciones de región (cuadro) son opcional.When multiple selections are allowed, contiguous and disjoint selection should always be supported, while support for region (box) selections is optional. Las selecciones de región se inician y arrastrándola en el espacio en blanco del cuerpo de la lista.Region selections are initiated by dragging in the white space of the list body.

ObjectObject SelecciónSelection
ListaList ContiguosContiguous
ListaList No contiguoDisjoint
ListaList RegiónRegion

Al hacer clic una vez en una lista, selecciona la fila donde se hizo clic.Clicking once on a list selects the row where the click occurred. Si el usuario haga clic en una celda de la lista que admite la edición en contexto, la celda se activa inmediatamente para su edición en contexto.If the user happens to click in a list cell that supports in-place editing, the cell is also immediately activated for in-place editing. En caso contrario, toda la fila se selecciona inmediatamente y muestra un área resaltada.Otherwise, the whole row is immediately selected and shows a highlight.

Arrastrar en el cuerpo de la lista, realiza una de estas tres cosas:Dragging in the list body does one of three things:

  • Inicia una selección de región si lo admite la lista y el mouse hacia abajo que se encuentra en un espacio en blancoInitiates a region selection if the list supports it and the mouse-down is in white space

  • Inicia una operación de arrastrar y colocar, si la fila o celda de la lista admite que se va a un origen de arrastreInitiates a drag/drop operation if the list cell or row supports being a drag source

  • Selecciona la fila actualSelects the current row

Edición en contextoIn-place editing

Cuando se permite la edición en contexto, hay dos modelos básicos: selector de control y la propiedad de edición sencilla.When in-place editing is allowed, there are two basic models: simple edit control and property picker. Con un control de edición sencilla, el contenido está resaltado y listo para la entrada, en cuanto se activa la edición en contexto del usuario.With a simple edit control, the content is highlighted and ready for user input as soon as in-place editing is activated. Cuando se implementa un selector de propiedad, se muestra el botón que invoca el selector de propiedad una vez que se activará el modo de edición en contexto y la selección actual no está resaltada.Where a property picker is implemented, the button that invokes the property picker is displayed once in-place editing mode is activated, and the current selection is not highlighted. El botón selector debe estar justificada a la derecha en la celda.The picker button should be right-justified in the cell. Para obtener ejemplos de edición en contexto, vea el ventana propiedades y lista de tareas en Visual Studio.For in-place editing examples, see the Properties Window and Task List in Visual Studio.

Compatibilidad con el tecladoKeyboard support

Compatibilidad con el teclado para la selección en las listas y cuadrículas sigue las convenciones estándar de Windows:Keyboard support for selection in lists and grids follows the standard Windows conventions:

  • Teclas de dirección vaya a la lista de selección de cada celda de fila se mueve el foco.Arrow keys navigate the list, selecting each row/cell as the focus is moved.

  • Mayús + flecha realiza una selección contigua en la dirección de las teclas de dirección.Shift + arrow performs a contiguous selection in the direction of the arrow keys.

  • Ctrl + flecha seguido por la barra espaciadora alterna entre agregar y quitar elementos de la lista de la selección, creación de una selección no contiguo.Ctrl + arrow followed by Spacebar toggles between adding and removing list items from the selection, creating a disjoint selection.

  • Para las cuadrículas que contienen las jerarquías anidadas, la tecla flecha derecha expande una fila primaria y la tecla flecha izquierda contrae uno.For grids that contain nested hierarchies, the Right Arrow key expands a parent row, and the Left Arrow key collapses one.

  • La tecla Tab mueve el foco entre las celdas de la fila actual si las celdas se pueden modificables.The Tab key moves focus among the cells in the current row if the cells are editable.

  • La tecla ENTRAR, realiza el comando predeterminado en el elemento en la lista (a menudo abierto).The Enter key performs the default command on the item in the list (often Open).

  • La tecla F2 activa la edición en contexto para la celda seleccionada actualmente.The F2 key activates in-place editing for the currently selected cell.

Persistencia y guardar la configuraciónPersistence and saving settings

Información generalOverview

Aunque cada componente de software en Visual Studio es suele ser responsable de su propio estado y la persistencia, Visual Studio guarda la configuración en algunos casos, como con las posiciones y tamaños de ventana.Although each software component in Visual Studio is usually responsible for its own state and persistence, Visual Studio automatically saves settings in some cases, such as with window sizes and positions. En la tabla siguiente es una combinación de configuración que se guardan automáticamente y configuración que requieren un usuario explícito o programa la acción que se realizará.The table below is a combination of settings saved automatically and settings that require an explicit user or programmed action to be taken.

ObjectObject Lo que se debe guardarWhat to save Cuándo se debe guardarWhen to save Dónde guardarWhere to save
Objeto seleccionable (por ejemplo, una línea de código)Selectable object (for example, a line of code) Un punto de interrupción en una línea de códigoA breakpoint on a line of code

Un acceso directo de usuario asociado con la línea de códigoA user shortcut associated with the line of code
Cuando se guarda el proyectoWhen the project is saved El opciones de usuario (.suo) archivo del proyectoThe user options (.suo) file for the project
Cuadro de diálogoDialog La ubicación del cuadro de diálogo, si se han movidoThe location of the dialog, if it had been moved

La vista que el usuario utilizó por última vez en el cuadro de diálogoThe view that the user last used in the dialog
Cuando se cierra el cuadro de diálogoWhen the dialog closes

Cuando finaliza la sesión de Visual StudioWhen the Visual Studio session ends
En la memoriaIn memory

Registro en HKEY_Current_UserRegistry in HKEY_Current_User
VentanaWindow El tamaño y la ubicación de la ventanaThe size and location of the window Cuando se cierra la ventanaWhen the window closes

Cuando se cambia el modo de Visual StudioWhen the Visual Studio mode changes

Cuando finaliza la sesión de Visual StudioWhen the Visual Studio session ends
El opciones de usuario (.suo) archivo del proyectoThe user options (.suo) file for the project

Archivo de opciones personalizadas para la configuración de la ventanaCustom options file for window settings
DocumentoDocument La selección actual en el documentoThe current selection in the document

La vista del documentoThe view of the document

El último varios lugares, el usuario ha visitadoThe last several places the user visited
Cuando se guarda el documentoWhen the document is saved El opciones de usuario (.suo) archivo del proyectoThe user options (.suo) file for the project
ProyectoProject Referencias a archivosReferences to files

Referencias a los directorios de discoReferences to directories on disk

Referencias a otro softwareReferences to other software

ComponentesComponents

Información de estado sobre el propio proyectoState information about the project itself
Cuando se guarda el proyectoWhen the project is saved El archivo de proyectoThe project file
SolucionesSolution Referencias a proyectosReferences to projects

Referencias a archivosReferences to files
Cuando se guarda el proyecto o soluciónWhen the project or solution is saved El solución (.sln) archivoThe solution (.sln) file
Configuración de Herramientas > OpcionesSettings in Tools > Options Personalizaciones del tecladoKeyboard customizations

Personalizaciones de la barra de herramientasToolbar customizations

Combinaciones de coloresColor schemes
Cuando el Herramientas > opciones cierra el cuadro de diálogoWhen the Tools > Options dialog closes

Cuando finaliza la sesión de Visual StudioWhen the Visual Studio session ends
Registro en HKEY_Current_UserRegistry in HKEY_Current_User

¿Qué está haciendo el usuario y al que hacen, determina si se guarda una configuración en memoria (durante la sesión), que se guardan en el disco (en las sesiones como una configuración del registro), como parte de la solución o proyecto propio archivo, como parte de la solución Opciones (.suo) de archivos o como una configuración personalizada de archivos ese componente de software que solo conoce.What the user is doing, and when they are doing it, dictates whether a setting is being saved in memory (during the session), saved to disk (across sessions as a registry setting), as part of the project or solution file itself, as a part of the solution options (.suo) file, or as a custom settings file that only that software component knows about. La tabla anterior muestra en el que se puede guardar la configuración de varios eventos.The table above shows several events at which settings can be saved. Sin embargo, existen otras ocasiones en que desea guardar el estado:However, there are other times in which you might want to save state:

  • Cuando el usuario cambia la ubicación dentro de un cuadro de diálogo o ventanaWhen the user changes location within a dialog or window

  • Cuando el usuario transfiere el foco a otra ventanaWhen the user transfers focus to another window

  • Cuando el usuario cambia de diseño a modo de depuraciónWhen the user switches from design to debug mode

  • Cuando el usuario cierra sesión su cuentaWhen the user logs off their account

  • Cuando se pasa a hibernación o se apaga el equipoWhen the computer goes into hibernation or shuts down

  • Cuando el disco duro o de equipo está a punto de ser volver a formatear y volver a configurarWhen the computer/hard drive is about to be reformatted and set up again

Configuraciones de ventanaWindow configurations

Una configuración de ventana es la presentación del entorno de desarrollo básica: un esquema que consta de la lista de ventanas de herramientas está presentes y la manera en que se organizan.A window configuration is the basic presentation of the development environment - it is a scheme consisting of the list of tool windows present and the way in which they are arranged. Para windows administrados por el IDE (windows IDE), información de diseño se conserva por usuario, por lo que cuando un usuario inicie el IDE, el diseño de ventana aparece igual que cuando últimos cerró Visual Studio.For windows managed by the IDE (IDE windows), layout information is persisted per user, so when a user launches the IDE, the window layout appears the same as when they last exited Visual Studio. El estado y la posición de las ventanas del IDE se almacenan en un archivo de opciones personalizada en formato XML.The state and position of IDE windows is persisted in a custom options file in XML format. Ventanas de herramientas que se crean mediante los paquetes que se cargan en el IDE de conservan su información de estado en el registro y pueden o no pueden ser por usuario.Tool windows that are created by packages loaded into the IDE persist their state information in the registry and may or may not be per user.

Diseños de perfil específicosProfile-specific layouts

Cada perfil incluye los diseños de ventana de herramienta, organizados en una manera familiar para las personas específicas para desarrolladores (los desarrolladores de Visual C++ esperan ver el el Explorador de soluciones en el lado izquierdo del IDE, mientras que los desarrolladores de C# esperan ver el El Explorador de soluciones a la derecha).Each profile includes tool window layouts, organized in a manner familiar to specific developer personas (Visual C++ developers expect to see the Solution Explorer on the left side of the IDE, while C# developers expect to see the Solution Explorer on the right). Después de que el usuario elija un perfil de inicio, se cargan los diseños de ventana específica del perfil.Profile-specific window layouts are loaded after the user chooses a profile on startup. Un autor del paquete debe determinar el diseño de ventana más adecuado para la experiencia del cliente, sabiendo que, a continuación, se conservarán los cambios que realiza el usuario a la configuración de la ventana.A package author should determine the window layout most suitable for their customer's experience, knowing that changes that the user makes to the window configuration will then be persisted.

Entrada táctilTouch input

Los usuarios utilizan cada vez más productos de desarrollo de Microsoft en los dispositivos táctiles.Users are increasingly using Microsoft development products on touch devices. Sin embargo, existen obstáculos que hacen que sea difícil utilizar herramientas de desarrollo en los dispositivos táctiles.However, there are barriers that make it difficult to use development tools on touch devices. Los usuarios esperan nuestros productos para ofrecer una experiencia táctil precisas y confiables.Users will expect our products to provide a reliable and precise touch experience. Es la intención de estas directrices informar a las decisiones sobre qué funciones táctiles para incorporar y animar a una experiencia táctil coherente a través de Visual Studio y otros productos relacionados.The intent of these guidelines is to inform decisions about which touch capabilities to incorporate and to encourage a consistent touch experience across Visual Studio and related products.

Niveles de experienciaLevels of experience

Los siguientes niveles de experiencia están diseñados para servir como guía para ayudar a los equipos a decidir qué funciones táctiles para ofrecer según su nivel deseado de interés de la inversión en contacto con usted.The following levels of experience are intended to serve as a guide to help teams decide which touch capabilities to offer based on their desired level of investment interest in touch.

  • El experiencia básica es para equipos que desean proporcionar touch capacidades, por lo que no hay ningún callejones a lo largo de su trabajo.The basic experience is for teams that want to provide touch capabilities so there are no dead ends throughout their work.

  • El optimizado experiencia es para equipos que desean proporcionar más capacidades de toque comunes (por ejemplo, los que suelen estar disponibles en las aplicaciones del explorador de internet).The optimized experience is for teams that want to provide the most common touch capabilities (for example, those typically available in internet browser applications).

  • El elevados experiencia es para los equipos que desean agregar capacidades tales como gestos u otras funcionalidades opcionales que pueden hacer que su aplicación táctiles descriptivo.The elevated experience is for teams that want to add capabilities such as gestures or other optional capabilities that can make their application touch-first friendly.

Experiencia básicaBasic experience Experiencia optimizadaOptimized experience Experiencia con privilegios elevadosElevated experience
Permite a los usuarios...Enables users to ... Corregir el código y solución/proyecto de nivel de lectura sin callejonesFix code and solution/project-level reading without dead ends Realizar tareas de mantenimiento, refactorizaciones y navegaciónPerform maintenance, refactors, and navigation tasks Trabajar en una experiencia coherente, fluida e intuitiva con confianzaOperate in a consistent, intuitive, and fluid experience with confidence
EditorEditor Movimiento panorámico y selecciónTouch panning and selection

Barra de desplazamiento táctil para saltar y presione + arrastrarScrollbar touch to jump and press+drag
Acercar el zoomPinch zoom

Desplazamiento rápidoFast scroll

SelecciónSelection

Fácil usar del menú contextualEasy use of context menu
Ventanas de herramientas superiorTop tool windows Movimiento panorámico de la listaList panning

Selección de elementosItem selection

Barra de desplazamiento táctil para saltar y presione + arrastrarScrollbar touch to jump and press+drag
Elemento fácil desplazamiento y la selecciónEasy item scrolling and selection
Basado en ventanasWindowing Cambiar el tamaño de ventanaResize window

Acceso rápidoQuick access
Cuadro de documentoDocument well Facilitan la navegación entre archivos abiertosEasy navigation between open files
GestosGestures Asegúrese de gestos comunes funcionan en el IDEEnsure common gestures work across the IDE Acciones de gestoGesture-based actions

Compatibilidad con arrastrar y colocar y diseñadoresSupport drag-and-drop and designers
Otras consideracionesOther considerations Teclado en pantalla personalizadoCustom onscreen keyboard

GestosGestures

Gestos de proporcionan a los usuarios un acceso directo a los comandos que en caso contrario, es posible que requieren una interacción más complicada.Gestures provide users a shortcut to commands that might otherwise require a more complicated interaction. Consulte las instrucciones de Windows en gestos de toque comunes para aplicaciones de escritorioy siga estas instrucciones para la mayoría los gestos, incluidos los movimientos simples como movimiento panorámico y zoom.Refer to the Windows guidelines on common touch gestures for Desktop Applications, and follow this guidance for most gestures, including simple gestures such as panning and zooming.