Una pestaña de Windows es una página o documento que se muestra dentro de un control de pestañas y permite cambiar entre varios contenidos sin abrir necesariamente una ventana independiente. El control TabView es una manera de mostrar un conjunto de pestañas y su contenido correspondiente.
Los controles TabView son útiles para mostrar varias páginas o documentos del contenido, al tiempo que permiten al usuario reorganizar, cerrar o abrir nuevas pestañas. De forma predeterminada, TabView está configurado para proporcionar pestañas de documento.
Qué es una pestaña de Windows
En general, las interfaces de usuario con pestañas vienen en uno de los dos estilos distintos que difieren en función y apariencia: las pestañas estáticas y las pestañas de documento.
Las pestañas estáticas son el tipo de pestañas que a menudo se encuentran en las ventanas de configuración. Contienen un número establecido de páginas en un orden fijo que normalmente incluyen contenido predefinido.
Pestañas de documento son el tipo de pestañas que se encuentran en un explorador, como Microsoft Edge. Los usuarios pueden crear, quitar y reorganizar las pestañas, desplazar las pestañas entre ventanas y cambiar el contenido de las pestañas.
| Tipo de pestaña | Características principales |
|---|---|
| Pestaña estática | Contiene un número establecido de páginas en un orden fijo y con contenido predefinido. |
| Pestaña de documento | Permite crear, quitar, reorganizar y desplazar pestañas entre ventanas. |
Control TabView y control TabViewItem
La interfaz de usuario con pestañas se crea con un control TabView y uno o varios controles TabViewItem. TabView hospeda instancias de TabViewItem, que representa una sola pestaña y su contenido.
Cada pestaña de un control TabView se representa mediante un control TabViewItem, que incluye la pestaña que se muestra en la franja de pestañas y el contenido que se muestra debajo de la franja de pestañas.
Aunque el contenido se muestra dentro del control TabView, el contenido es realmente una parte del objeto TabViewItem.
TabViewItem es un ContentControl, por lo que puede agregar cualquier tipo de objeto como contenido. También puede aplicar un DataTemplate a la propiedad ContentTemplate.
Partes visibles de una pestaña
La franja de pestañas tiene un encabezado y pie de página, pero a diferencia de un documento, el encabezado y el pie de página de la franja de pestañas se encuentran en el extremo izquierdo y el extremo derecho de la franja, respectivamente.
Encabezado
Para cada TabViewItem, puede establecer un encabezado y un icono y especificar si el usuario puede cerrar la pestaña.
La propiedad Header se establece normalmente en un valor de cadena que proporciona una etiqueta descriptiva para la pestaña. Sin embargo, la Header propiedad puede ser cualquier objeto.
También puede usar la propiedad HeaderTemplate para especificar un DataTemplate que defina cómo se deben mostrar los datos de encabezado enlazados.
Icono
Establezca la propiedad IconSource para especificar un icono para la pestaña.
Botón de cierre
De forma predeterminada, la pestaña muestra un botón cerrar (X). Puede establecer la propiedad IsClosable en false para ocultar el botón cerrar y asegurarse de que un usuario no puede cerrar la pestaña.
Si cierra las pestañas en el código de la aplicación fuera de un evento solicitado de cierre, primero debe comprobar que IsClosable es true.
Contenido
Los elementos que se muestran en la pestaña seleccionada se agregan a la propiedad Content del objeto TabViewItem.
Los ejemplos de este artículo muestran un caso sencillo de agregar texto directamente al Content elemento en XAML. Sin embargo, la interfaz de usuario real suele ser más compleja.
Una manera común de agregar una interfaz de usuario compleja como el contenido de una pestaña es encapsularlo en un UserControl o en una página, y agregarlo como el contenido del objeto TabViewItem.
Opciones de tamaño de las pestañas
Para TabView, puede configurar varias opciones que se aplican a todas las pestañas. Puede establecer la propiedad TabWidthMode para cambiar el tamaño de las pestañas.
| Opción | Funcionamiento |
|---|---|
| Equal | Cada pestaña tiene el mismo ancho. Este es el valor predeterminado. |
| SizeToContent | Cada pestaña ajusta su ancho al contenido dentro de la pestaña. |
| Compact | Las pestañas no seleccionadas se contraen para mostrar solo su icono. La pestaña seleccionada se ajusta para mostrar el contenido dentro de la pestaña. |
De forma predeterminada, el botón Cerrar siempre se muestra para las pestañas que se pueden ocultar. Puede establecer la propiedad CloseButtonOverlayMode en OnPointerOver para cambiar este comportamiento.
En este caso, la pestaña seleccionada siempre muestra el botón Cerrar si es closable, pero las pestañas no seleccionadas muestran el botón cerrar solo cuando la pestaña es closable y el usuario tiene su puntero sobre él.
Selección de pestañas
Independientemente de cómo interactúe el usuario con un conjunto de pestañas de documento, siempre debe haber una pestaña activa.
Si el usuario cierra la pestaña seleccionada o divide la pestaña seleccionada en otra ventana, otra pestaña debe convertirse en la pestaña activa. TabView intenta hacerlo automáticamente seleccionando la pestaña siguiente.
Si tienes una buena razón por la que tu aplicación debe permitir una tabView con una pestaña no seleccionada, el área de contenido de TabView simplemente estará en blanco.
Abrir, cerrar y reorganizar pestañas
Se recomienda TabView cuando los usuarios puedan abrir, cerrar o reorganizar pestañas dinámicamente, abrir documentos o páginas web directamente en pestañas y arrastrar y colocar pestañas entre ventanas.
De forma predeterminada, TabView está configurado para las pestañas del documento. El usuario puede agregar nuevas pestañas, reorganizar pestañas y cerrar pestañas.
En esta configuración, debe controlar los eventos AddTabButtonClick y TabCloseRequested para habilitar la funcionalidad.
Cuando se agregan pestañas a un TabView, es posible que finalmente haya demasiadas pestañas para mostrar en la barra de pestañas. En este caso, aparecerán los indicadores de desplazamiento que permiten desplazarse hacia la izquierda y hacia la derecha para acceder a las pestañas ocultas.
Pestañas estáticas
Las pestañas estáticas se utilizan cuando el número de páginas es fijo y el usuario no necesita crear, cerrar ni reorganizar pestañas.
Para que un control TabView sea estático, use estas configuraciones:
- Establezca la propiedad IsAddTabButtonVisible en false para ocultar el botón agregar pestaña e impedir que se genere el evento AddTabButtonClick.
- Establezca la propiedad CanReorderTabs en false para evitar que el usuario arrastre pestañas a un orden diferente.
- En cada TabViewItem, establezca la propiedad IsClosable en false para ocultar el botón de cerrar pestaña e impedir que el usuario genere el evento TabCloseRequested.
Pestañas de documento
Las pestañas de documento se encuentran habitualmente en los exploradores y en las aplicaciones que permiten trabajar con varios documentos o páginas.
Los usuarios pueden crear, quitar y reorganizar las pestañas, desplazar las pestañas entre ventanas y cambiar el contenido de las pestañas.
El usuario puede agregar nuevas pestañas, reorganizar pestañas y cerrar pestañas. Para habilitar estas acciones, la aplicación debe controlar los eventos AddTabButtonClick y TabCloseRequested.
Cerrar una pestaña
De forma predeterminada, una pestaña que se puede cerrar muestra el botón cerrar. La aplicación puede ocultar este botón mediante la propiedad IsClosable.
Presione Ctrl + F4 para generar el evento TabCloseRequested. Controla dicho evento y cierra la pestaña si es necesario.
Si todas las pestañas de la aplicación se pueden cerrar y la ventana de la aplicación debe cerrarse cuando se cierre la última pestaña, también debe cerrar la ventana en el controlador de eventos TabCloseRequested.
Cambiar entre pestañas con el teclado
TabView admite muchos escenarios comunes de navegación por teclado de forma predeterminada. En esta sección se explica la funcionalidad integrada y se hacen recomendaciones sobre funcionalidades adicionales que pueden resultar útiles para algunas aplicaciones.
Movimiento del foco
Cuando el foco se mueve al área del TabStrip, el TabViewItem seleccionado obtiene el foco.
A continuación, el usuario puede usar las teclas de dirección Izquierda y Derecha para mover el foco, no la selección, a otras pestañas de la franja de pestañas.
El foco de las flechas queda atrapado en la franja de pestañas y el botón de agregar pestaña (+), si hay uno.
Para alejar el foco del área de la franja de pestañas, el usuario puede presionar la tecla Tab, que moverá el foco al siguiente elemento enfocado.
Seleccionar una pestaña
Cuando un TabViewItem tiene el foco, presione Espacio o Entrar para seleccionar ese TabViewItem.
Use las teclas de dirección para mover el foco y, a continuación, presione Espacio para seleccionar la pestaña.
Seleccionar pestañas adyacentes
Presione Ctrl+Tab para seleccionar el siguiente TabViewItem.
Presione Ctrl+Mayús+Tab para seleccionar el elemento TabViewItem anterior.
Para estos fines, la lista de pestañas está "en bucle", por lo que seleccionar la pestaña siguiente mientras se selecciona la última pestaña hará que se seleccione la primera pestaña.
Separar pestañas y moverlas entre ventanas
El desprendimiento de pestaña describe lo que sucede cuando un usuario arrastra una pestaña fuera de la barra de pestañas de TabView y la mueve a otro control TabView, generalmente en una nueva ventana.
A partir de SDK de Aplicaciones para Windows 1.6, TabView tiene una propiedad CanTearOutTabs que puede establecer para proporcionar una experiencia mejorada para arrastrar pestañas a una nueva ventana.
Cuando un usuario arrastra una pestaña fuera de la franja de pestañas con esta opción está habilitada, se crea inmediatamente una nueva ventana durante el arrastre, lo que permite al usuario arrastrarlo al borde de la pantalla para maximizar o ajustar la ventana en un movimiento suave.
Esta implementación tampoco utiliza las API de arrastrar y soltar, por lo que no se ve afectada por las limitaciones de dichas API.
Cuando establece la propiedad CanTearOutTabs en true, hace que se generen los eventos de desmontaje de tabulación en lugar de los eventos de arrastrar y colocar.
Eventos de desprendimiento
- TabTearOutWindowRequested: Este evento se produce cuando una pestaña se arrastra por primera vez fuera de la barra de pestañas. Contrólelo para crear una nueva ventana y TabView a la que se moverá la pestaña.
- TabTearOutRequested: Este evento se produce después de proporcionar una nueva ventana. Contrólelo para mover la pestaña desmontada de la TabView de origen a una TabView en la nueva ventana.
- ExternalTornOutTabsDropping: Este evento se produce cuando se arrastra una pestaña desmontada sobre un control TabView existente. Contrólelo en la TabView que recibe la pestaña desmontada para indicar si se debe aceptar o no la pestaña.
- ExternalTornOutTabsDropped.
Relación entre una pestaña y una ventana
Siempre que abre un programa, un archivo o una carpeta, aparece en la pantalla en un cuadro o marco denominado ventana.
Las ventanas son los elementos básicos con los que se trabaja en un entorno gráfico. Es un área rectangular de la pantalla que actúa como marco o límite y muestra en su interior una aplicación, carpeta o tarea que entra en ejecución.
Las ventanas proporcionan una interfaz que permite ejecutar varias aplicaciones de forma simultánea e intercambiar la información que en ellas se genera.
El lugar sobre el que se abren y cierran estas ventanas es el Escritorio.
Elementos de una ventana que contiene pestañas
Aunque el contenido de cada ventana es diferente, todas las ventanas tienen ciertos elementos en común. Por ejemplo, las ventanas siempre aparecen en el escritorio, el área de trabajo principal de la ventana.
Una ventana de aplicación incluye elementos como una barra de título, una barra de menús, el menú de ventana, el botón minimizar, el botón maximizar, el botón de restauración, el botón cerrar, un borde de tamaño, un área de cliente, una barra de desplazamiento horizontal y una barra de desplazamiento vertical.
Barra de título
La barra de título es la zona situada en la parte superior de la ventana que contiene el icono y el título de la ventana.
En ella se muestra el nombre de la aplicación y el nombre del documento con el cual se está trabajando.
La barra de título también permite al usuario mover la ventana mediante un mouse u otro dispositivo señalador.
Mediante doble clic, se puede cambiar entre el modo maximizado y tamaño normal.
Botón Minimizar
La caja de minimizar es una pequeña área cuadrada situada en la parte derecha de la barra de título que sirve para disminuir el tamaño de la ventana.
Este botón se utiliza para ocultar una ventana. Hace que desaparezca del escritorio manteniendo solamente su botón en la barra de tareas, no obstante la ventana permanece activa.
La ventana desaparece del escritorio y resulta visible sólo como un botón en la barra de tareas, la barra horizontal larga situada en la parte inferior de la pantalla.
Botón Maximizar
La caja de maximizar es una pequeña área cuadrada situada en la parte derecha de la barra de título que sirve para agrandar la ventana para que ocupe toda la pantalla.
Al hacer clic en el botón maximizar, el sistema amplía la ventana al tamaño de la pantalla y coloca la ventana, por lo que cubre todo el escritorio, menos la barra de tareas.
Cuando la ventana está maximizada, se sustituye por la caja de restaurar. Al hacer clic en el botón restaurar, el sistema restaura la ventana a su tamaño y posición anteriores.
Botón Cerrar
La caja de cerrar es una pequeña área cuadrada situada en la parte derecha de la barra de título que sirve para cerrar la ventana.
El botón de cerrar aparece a la derecha de los botones iconizar y maximizar en la barra de título y se utiliza para cerrar la aplicación o documento.
Al hacer clic en el botón Cerrar, se cierra la aplicación.
Botón de control
El botón de control es un menú disponible para la mayoría de las ventanas al que se puede acceder a través del icono situado en la esquina superior izquierda de la ventana.
Este menú permite ejecutar todas las operaciones de control de la ventana, tales como su cambio de tamaño y posición.
El sistema crea y administra el menú de la ventana. Contiene un conjunto estándar de elementos de menú que, cuando el usuario lo elige, establece el tamaño o la posición de una ventana, cierra la aplicación o realiza tareas.
Barra de menús
La barra de menús es la zona situada debajo de la barra de título y contiene los menús de la aplicación.
Permite el acceso a las diferentes opciones que integran la aplicación.
La mayoría de las aplicaciones incluyen una barra de menús que enumera los comandos admitidos por la aplicación.
Barra de herramientas
La barra de herramientas contiene iconos o botones que ejecutan alguna de las acciones equivalentes a los comandos de menú disponibles en la aplicación.
De esta forma, proporciona al usuario un acceso rápido a las operaciones de uso más frecuente.
Barra de estado
La barra de estado visualiza el estado de lo que se está viendo en la ventana y cualquier otra información relativa al contexto.
Barras de desplazamiento
La barra de desplazamiento horizontal está situada en la parte inferior de la ventana y permite desplazar horizontalmente la vista del área de cliente.
La barra de desplazamiento vertical está situada en la parte derecha de la ventana y permite desplazar verticalmente la vista del área de cliente.
Estas barras aparecen en los bordes inferior y derecho de las ventanas cuando la información que contiene no está toda visible, se usan para desplazarse en la ventana.
La barra de desplazamiento horizontal y la barra de desplazamiento vertical convierten la entrada del mouse o del teclado en valores que una aplicación usa para desplazar el contenido del área cliente de forma horizontal o vertical.
Área de cliente
El área de cliente es la zona donde el programador sitúa los controles, y los datos para el usuario.
Es la parte de una ventana en la que la aplicación muestra la salida, como texto o gráficos.
En general es toda la superficie de la ventana lo que no está ocupada por las zonas anteriores.
Borde y esquinas
El borde de la ventana es un área estrecha alrededor de la ventana que permite cambiar su tamaño.
El borde de ajuste de tamaño es un área alrededor del perímetro de la ventana que permite al usuario ajustar el tamaño de la ventana mediante un mouse u otro dispositivo señalador.
Arrastre el borde o la esquina de una ventana para cambiar su tamaño. No es posible cambiar el tamaño de una ventana que está maximizada.
Mover y cambiar el tamaño de una ventana
Mover una ventana
Para mover una ventana, señale su barra de título con el puntero del mouse. A continuación, arrastre la ventana hasta la ubicación deseada.
Pulsar el botón izquierdo del mouse sobre la barra de título, sin soltar mover la ventana a la posición deseada.
Cambiar el tamaño de una ventana
Situar el puntero del ratón sobre alguno de los ángulos de la ventana cuyo tamaño se quiere modificar.
Hacer clic con el botón izquierdo del mouse y mantener presionado mientras arrastramos el puntero en la dirección deseada. Soltar el botón del mouse para validar los cambios.
Aunque es posible maximizar y cambiar el tamaño de la mayoría de las ventanas, algunas tienen un tamaño fijo, como los cuadros de diálogo.
Área no cliente
La barra de título, la barra de menús, el menú de ventanas, minimizar y maximizar botones, el borde de tamaño y las barras de desplazamiento se conocen colectivamente como área no cliente de la ventana.
El sistema administra la mayoría de los aspectos del área no cliente; la aplicación administra la apariencia y el comportamiento de su área cliente.
Controles y cuadros de diálogo
Una aplicación puede crear varios tipos de ventanas además de su ventana principal, incluidos controles y cuadros de diálogo.
Un control es una ventana que una aplicación usa para obtener un fragmento de información específico del usuario, como el nombre de un archivo para abrir o el tamaño de punto deseado de una selección de texto.
Los controles siempre se usan junto con otra ventana, normalmente, un cuadro de diálogo.
Un cuadro de diálogo es una ventana que contiene uno o varios controles. Una aplicación usa un cuadro de diálogo para solicitar al usuario la entrada necesaria para completar un comando.
Normalmente, los cuadros de diálogo no usan el mismo conjunto de componentes de ventana que una ventana principal.
La mayoría tiene una barra de título, un menú de ventanas, un borde sin ajuste de tamaño y un área de cliente, pero normalmente no tienen una barra de menús, minimizar y maximizar botones o barras de desplazamiento.
Crear y configurar pestañas
Para cada TabViewItem, puede establecer un encabezado y un icono y especificar si el usuario puede cerrar la pestaña.
Los elementos que se muestran en la pestaña seleccionada se agregan a la propiedad Content del objeto TabViewItem.
También puede aplicar un DataTemplate a la propiedad ContentTemplate.
Una manera común de agregar una interfaz de usuario compleja como el contenido de una pestaña es encapsularlo en un UserControl o en una página, y agregarlo como el contenido del objeto TabViewItem.
Gestión de ventanas y pestañas
Si todas las pestañas de la aplicación se pueden cerrar y la ventana de la aplicación debe cerrarse cuando se cierre la última pestaña, también debe cerrar la ventana en el controlador de eventos TabCloseRequested.
Este ejemplo funciona para una aplicación con una sola ventana (MainWindow). Si la aplicación tiene varias ventanas o ha habilitado la eliminación de pestañas, debe realizar un seguimiento de las ventanas y, a continuación, buscar la correcta para cerrarla.
En una aplicación gráfica basada en Windows, cada aplicación crea al menos una ventana, denominada ventana principal, que actúa como interfaz principal entre el usuario y la aplicación.
La mayoría de las aplicaciones también crean otras ventanas, ya sea directa o indirectamente, para realizar tareas relacionadas con la ventana principal.
Elementos técnicos de una ventana
Una aplicación debe proporcionar la siguiente información al crear una ventana, con la excepción del identificador de ventana, que la función de creación devuelve para identificar de forma única la nueva ventana.
- Nombre de la clase.
- Nombre de la ventana.
- Estilo de ventana.
- Estilo de ventana extendida.
- Posición.
- Tamaño.
- Identificador de ventana primario o propietario.
- Identificador de menú o identificador de Child-Window.
- Identificador de instancia de aplicación.
- Datos de creación.
- Identificador de ventana.
Nombre de clase
Cada ventana pertenece a una clase de ventana. Una aplicación debe registrar una clase de ventana antes de crear las ventanas de esa clase.
La clase de ventana define la mayoría de los aspectos de la apariencia y el comportamiento de una ventana.
El componente principal de una clase de ventana es el procedimiento de ventana, una función que recibe y procesa todas las entradas y solicitudes enviadas a la ventana.
Nombre de la ventana
Un nombre de ventana es una cadena de texto que identifica una ventana para el usuario.
Normalmente, una ventana principal, un cuadro de diálogo o un cuadro de mensaje muestra su nombre de ventana en su barra de título, si está presente.
Para cambiar el nombre de la ventana después de crear una ventana, use la función SetWindowText.
Estilo de ventana
Cada ventana tiene uno o varios estilos de ventana. Un estilo de ventana es una constante con nombre que define un aspecto de la apariencia y el comportamiento de la ventana que no se especifica en la clase de la ventana.
Normalmente, una aplicación establece estilos de ventana al crear ventanas. También puede establecer los estilos después de crear una ventana mediante la función SetWindowLong.
Los estilos de ventana generales se representan mediante constantes que comienzan por el prefijo WS_; se pueden combinar con el operador OR para formar diferentes tipos de ventanas, incluidas las ventanas principales, los cuadros de diálogo y las ventanas secundarias.
Estilo de ventana extendida
Cada ventana puede tener opcionalmente uno o varios estilos de ventana extendidos.
Un estilo de ventana extendida es una constante con nombre que define un aspecto de la apariencia y el comportamiento de la ventana que no especifica la clase de ventana o los demás estilos de ventana.
Posición
La posición de una ventana se define como coordenadas de su esquina superior izquierda.
Estas coordenadas, a veces llamadas coordenadas de ventana, siempre son relativas a la esquina superior izquierda de la pantalla o, para una ventana secundaria, la esquina superior izquierda del área cliente de la ventana primaria.
Tamaño
El tamaño de una ventana, ancho y alto, se asigna en píxeles.
Una ventana puede tener un ancho o alto cero. Si una aplicación establece el ancho y el alto de una ventana en cero, el sistema establece el tamaño en el tamaño mínimo predeterminado de la ventana.
Una aplicación puede ajustar el tamaño de una ventana para que sea extremadamente grande; sin embargo, no debe cambiar el tamaño de una ventana para que sea mayor que la pantalla.
