Los controles son los elementos de la interfaz de usuario que componen la Windows app: botones, campos de texto, listas, selectores, etc. Un control muestra contenido o permite a los usuarios interactuar con la aplicación. Un patrón combina varios controles en una receta reutilizable para escenarios comunes, como formularios o diseños de detalles de lista.
Windows proporciona más de 45 controles listos para usar, todos basados en fluent Design System. Desde alternancias simples a vistas de datos enriquecidas, como cuadrícula y lista, estos controles le ayudan a crear interfaces visualmente pulidas, accesibles y con capacidad de respuesta en todos los dispositivos.
Examine los artículos de esta sección para obtener instrucciones de diseño, ejemplos de código y procedimientos recomendados para cada control y patrón.
Comenzar
Para obtener información sobre cómo agregar controles a la aplicación y conectar controladores de eventos, consulte Agregar controles y controlar eventos. Para personalizar la apariencia del control con estilos XAML reutilizables, consulta Aplicar estilos a los controles.
Controles
En la tabla siguiente se enumeran los controles Windows app disponibles en WinUI, con vínculos a su documentación.
|
Supervisión |
Descripción |
| Botones |
Botones |
Control que responde a la interacción del usuario y genera un evento Click. Incluye el botón, el botón desplegable, el botón dividido, el botón de alternancia, etc. |
| Casillas |
Casillas de verificación |
Control que un usuario puede seleccionar o borrar. |
| Cuadros combinados |
Cuadros combinados |
Una lista desplegable de elementos entre los que un usuario puede seleccionar. |
| Hipervínculos |
Hipervínculos |
Un botón que aparece como texto de hipervínculo y puede navegar a un URI o gestionar un evento de clic. |
| Botones de radio |
Botones de radio |
Control que permite a un usuario seleccionar una sola opción de un grupo de opciones. |
| Control de clasificación |
Control de clasificación |
Tasa algo de 1 a 5 estrellas. |
| Controles deslizantes |
controles deslizantes |
Control que permite al usuario seleccionar entre un intervalo de valores moviendo un control Thumb a lo largo de una pista. |
| Interruptores de palanca |
Interruptores de palanca |
Un interruptor que se puede cambiar entre 2 estados. |
Collections
|
Supervisión |
Descripción |
| Vista de elementos |
Vista Elementos |
Control que presenta una colección de elementos mediante varios diseños. |
| Vista de lista y vista de cuadrícula |
Vista de lista y vista de cuadrícula |
Controles que presentan una colección de elementos en una lista vertical o en filas y columnas. |
| Cambiar vista |
Vista alterna |
Presenta una colección de elementos que el usuario puede desplazar, un elemento a la vez. |
| Buscapersonas Pips |
Buscapersonas Pips |
Control para permitir que el usuario navegue por una colección paginada cuando no es necesario conocer visualmente los números de página. |
| Vista de árbol |
Vista de árbol |
Un patrón jerárquico de lista con nodos que se expanden y se contraen y contienen elementos anidados. |
| Repetidor de elementos |
Repetidor de elementos |
Control flexible y primitivo para diseños controlados por datos. |
| Deslizar |
Deslizar |
Gesto táctil para las acciones rápidas del menú en elementos. |
| Deslizar hacia abajo para actualizar |
Deslizar para actualizar |
Proporciona la capacidad de extraer una colección de elementos de una lista o cuadrícula para actualizar el contenido de la colección. |
Cuadros de diálogo y controles flotantes
|
Supervisión |
Descripción |
| Cuadros de diálogo |
Dialogs |
Cuadro de diálogo que se puede personalizar para contener cualquier contenido XAML. |
| Desplegables |
Menús desplegables |
Muestra información contextual y habilita la interacción del usuario. |
| Sugerencia de enseñanza |
Sugerencia de enseñanza |
Desplegable de contenido enriquecido para guiar a los usuarios y habilitar oportunidades de enseñanza. |
|
Supervisión |
Descripción |
|
Formularios |
Patrón para recopilar y enviar entradas de usuario mediante una combinación de controles y etiquetas de entrada. |
|
Supervisión |
Descripción |
| Iconos |
iconos |
Representa controles de icono que usan diferentes tipos de imagen como contenido. |
| Iconos animados |
Iconos animados |
Elemento que muestra y controla un icono que anima cuando el usuario interactúa con el control. |
| Imágenes e pinceles de imagen |
Imágenes y pinceles de imagen |
Control para mostrar el contenido de la imagen. |
|
Tinta |
Controles para la escritura digital, incluido el lienzo de tinta digital y la barra de herramientas de tinta digital. |
| Reproducción multimedia |
Reproducción de multimedia |
Control para mostrar contenido de vídeo e imagen. |
| Formas |
Formas |
Dibuje formas como elipses, rectángulos y polígonos. |
|
Supervisión |
Descripción |
| Menús y menús contextuales |
Menús y menús contextuales |
Muestra una lista contextual de comandos o opciones simples. |
| Barra de comandos |
Barra de comandos |
Barra de herramientas para mostrar comandos específicos de la aplicación que controlan el diseño y el cambio de tamaño de su contenido. |
| Barra de comandos flotante |
Barra de comandos flotante |
Una mini-barra de herramientas que muestra comandos proactivos y un menú opcional de comandos. |
| Menú flotante y barra de menús |
Control flotante de menú y barra de menús |
Un menú clásico, que permite la visualización de MenuItems que contienen MenuFlyoutItems. |
Navegación
|
Supervisión |
Descripción |
| Barra de ruta de navegación |
Barra de migas de pan |
Muestra el rastro de navegación seguido hasta la ubicación actual. |
|
Lista y detalles |
Patrón que muestra una lista de elementos junto con los detalles del elemento seleccionado actualmente. |
| Vista de navegación |
Vista de navegación |
Diseño vertical común para las áreas de nivel superior de la aplicación a través de un menú de navegación contraíble. |
| Eje |
Pivote |
Presenta información de diferentes orígenes en una vista con pestañas. |
| Barra de selección |
Barra de selección |
Presenta información de un pequeño conjunto de orígenes diferentes. El usuario puede elegir uno de ellos. |
| Vista de pestañas |
Vista de pestañas |
Control que muestra una colección de pestañas que se puede usar para mostrar varios documentos. |
People
|
Supervisión |
Descripción |
| Imagen de persona |
Imagen de persona |
Muestra la imagen de una persona o contacto. |
Pickers
|
Supervisión |
Descripción |
| Selector de colores |
Selector de colores |
Control que muestra un espectro de colores seleccionable. |
| Selector de fecha del calendario |
Selector de fecha del calendario |
Control que permite a los usuarios elegir un valor de fecha mediante un calendario. |
| Vista Calendario |
Vista Calendario |
Control que presenta un calendario para que un usuario elija una fecha. |
| Selector de fecha |
Selector de fecha |
Control que permite al usuario elegir un valor de fecha. |
| Selector de hora |
Selector de hora |
Control configurable que permite al usuario elegir un valor de hora. |
|
Supervisión |
Descripción |
| Expansador |
Expansador |
Contenedor con un encabezado que se puede expandir para mostrar un cuerpo con más contenido. |
| Controles de desplazamiento y movimiento panorámico |
Controles de desplazamiento y panorámica |
Control de contenedor que permite al usuario desplazar y acercar su contenido. |
| Barra de desplazamiento con anotaciones |
Barra de desplazamiento con anotaciones |
Control que extiende la funcionalidad de una barra de desplazamiento vertical normal para una navegación sencilla a través de colecciones grandes. |
| Zoom semántico |
Zoom semántico |
Permite al usuario ampliar entre dos vistas diferentes de una colección, lo que facilita la navegación por grandes colecciones de elementos. |
| Vista dividida |
Vista dividida |
Contenedor que tiene 2 áreas de contenido, con varias opciones de visualización para el panel. |
| Vista de dos paneles |
Vista de dos paneles |
Control con dos áreas de contenido que ocupan todo el espacio disponible, ya sea de lado a lado o de arriba a abajo. |
|
Supervisión |
Descripción |
| Progreso |
Progress |
Muestra el progreso de la aplicación en una tarea mediante una barra de progreso o un anillo de progreso. |
| Información sobre herramientas |
información sobre herramientas |
Muestra información de un elemento en una ventana emergente. |
| Barra de información |
Barra de información |
Mensaje en línea para mostrar información sobre el cambio de estado en toda la aplicación. |
| Distintivo de información |
Distintivo de información |
Una interfaz de usuario no intrusiva para mostrar notificaciones o poner el foco en un área. |
Text
|
Supervisión |
Descripción |
| Caja de sugerencias automáticas |
Cuadro de sugerencias automáticas |
Un control para proporcionar sugerencias a medida que un usuario escribe. |
| Bloque de texto |
Bloque de texto |
Control ligero para mostrar pequeñas cantidades de texto. |
| Bloque de texto enriquecido |
Bloque de texto enriquecido |
Control que muestra texto con formato, hipervínculos, imágenes insertadas y otro contenido enriquecido. |
| Cuadro de texto |
Cuadro de texto |
Campo de texto sin formato de una sola línea o de varias líneas. |
| Cuadro de edición enriquecido |
Cuadro de texto enriquecido |
Control de edición de texto enriquecido que admite texto con formato, hipervínculos y otro contenido enriquecido. |
| Cuadro Contraseña |
Cuadro de contraseña |
Control para escribir contraseñas. |
| Cuadro de número |
Caja de número |
Control de texto usado para la entrada numérica y evaluación de ecuaciones algebraicas. |
|
Etiquetas |
Guía para agregar etiquetas accesibles a los controles de entrada. |
Barra de título
|
Supervisión |
Descripción |
| Barra de título |
Barra de título |
Personalice la barra de título de la ventana de la aplicación. |
Galería de WinUI 3
La aplicación WinUI 3 Gallery es la mejor manera de explorar estos controles prácticos. Proporciona demostraciones interactivas de la mayoría de los controles, características y patrones de Fluent Design de WinUI, lo que lo convierte en un complemento ideal para esta documentación. Instálelo para probar controles en tiempo real y vincular directamente desde páginas de control individuales.
- Obtenga la Galería de WinUI 3 de Microsoft Store.
- Obtenga el código fuente de GitHub.
Controles y recursos adicionales
El Windows Community Toolkit es una colección de asistentes, extensiones y controles de interfaz de usuario adicionales que complementan los controles WinUI integrados. Está controlada por la comunidad y mantenida por Microsoft, que cubre escenarios comunes, como diseños avanzados, convertidores y animaciones.
Para tener acceso anticipado a los controles y características experimentales, consulte Windows Community Toolkit Labs, donde se desarrollan y prueban nuevos componentes antes de graduarse al kit de herramientas principal.
