Os controlos são os elementos da interface que compõem a sua aplicação Windows — botões, campos de texto, listas, seletores e muito mais. Um controlo mostra conteúdo ou permite que os utilizadores interajam com a sua aplicação. Um padrão combina múltiplos controlos numa receita reutilizável para cenários comuns, como formulários ou layouts de listas detalhadas.
Windows fornece mais de 45 controlos prontos a usar, todos construídos com base no Fluent Design System. Desde simples alternâncias a visualizações ricas de dados como grelha e lista, estes controlos ajudam-no a construir interfaces visualmente polidas, acessíveis e responsivas em todos os dispositivos.
Consulte os artigos desta secção para orientações de design, exemplos de código e boas práticas para cada controlo e padrão.
Introdução
Para aprender a adicionar controlos à sua aplicação e ligar os gestores de eventos, veja Adicionar controlos e gerir eventos. Para personalizar a aparência dos controlos com estilos XAML reutilizáveis, veja Controlos de Estilo.
Controlos
A tabela seguinte lista os controlos da aplicação Windows disponíveis no WinUI, com ligações para a sua documentação.
| Imagem |
Controlo |
Descrição |
|
Botões |
Um controle que responde à entrada do utilizador e aciona um evento de clique. Inclui botão, botão suspenso, botão dividido, botão de alternar e muito mais. |
|
Caixas de seleção |
Um controlo que o utilizador pode selecionar ou eliminar. |
|
Caixas combinadas |
Uma lista suspensa de itens que o utilizador pode selecionar. |
|
Hiperligações |
Um botão que aparece como texto de hiperligação e que pode navegar até um URI ou gerir um evento de clique. |
|
Botões de opção |
Um controlo que permite ao utilizador selecionar uma única opção de um grupo de opções. |
|
Controlo de classificação |
Dá uma nota de 1 a 5 estrelas. |
|
Deslizadores |
Um controlo que permite ao utilizador selecionar entre uma gama de valores movendo um controlo deslizante ao longo de uma pista. |
|
Interruptores de comutação |
Um interruptor que pode ser alternado entre dois estados. |
Collections
| Imagem |
Controlo |
Descrição |
|
Visualização de itens |
Um controlo que apresenta uma coleção de itens usando vários layouts. |
|
Vista de lista e vista de grelha |
Controlos que apresentam uma coleção de itens numa lista vertical ou em linhas e colunas. |
|
Alternar visão |
Apresenta uma coleção de itens que o utilizador pode folhear, um de cada vez. |
|
Pips Pager |
Um controlo que permite ao utilizador navegar por uma coleção paginada quando os números de página não precisam de ser conhecidos visualmente. |
|
Vista em árvore |
Um padrão de lista hierárquica com nós expansíveis e colapsáveis que contêm itens aninhados. |
|
Repetidor de itens |
Um controlo flexível e primitivo para layouts orientados por dados. |
|
Deslizar |
Gesto de toque para ações rápidas no menu dos itens. |
|
Deslizar para atualizar |
Permite puxar uma coleção de itens numa lista/grelha para atualizar o conteúdo da coleção. |
Caixas de diálogo e janelas deslizantes
| Imagem |
Controlo |
Descrição |
|
Diálogos |
Uma caixa de diálogo que pode ser personalizada para conter qualquer conteúdo XAML. |
|
Flyouts |
Mostra informação contextual e permite a interação do utilizador. |
|
Dica de ensino |
Um flyout rico em conteúdos para orientar os utilizadores e possibilitar momentos de aprendizagem. |
| Imagem |
Controlo |
Descrição |
|
Formulários |
Um padrão para recolher e submeter entradas do utilizador usando uma combinação de controlos de entrada e etiquetas. |
| Imagem |
Controlo |
Descrição |
|
Ícones |
Representar controlos de ícones que usam diferentes tipos de imagem como conteúdo. |
|
Ícones animados |
Um elemento que exibe e controla um ícone que se anima quando o utilizador interage com o controlo. |
|
Imagens e pincéis de imagem |
Um controlo para mostrar o conteúdo das imagens. |
|
Tinta |
Controlos para tinta digital, incluindo tela de tinta e barra de tinta. |
|
Reprodução de multimédia |
Um controlo para exibir conteúdo de vídeo e imagens. |
|
Formas |
Desenhe formas como elipses, retângulos e polígonos. |
Navegação
| Imagem |
Controlo |
Descrição |
|
Barra de migalhas |
Mostra o trilho de navegação percorrido até ao local atual. |
|
Lista/detalhes |
Um padrão que apresenta uma lista de itens juntamente com os detalhes do item atualmente selecionado. |
|
Vista de navegação |
Layout vertical comum para as áreas superiores da sua aplicação através de um menu de navegação dobrável. |
|
Pivô |
Apresenta, numa vista por separadores, informações de diferentes fontes. |
|
Barra seletora |
Apresenta informação de um pequeno conjunto de fontes diferentes. O utilizador pode escolher um deles. |
|
Visualização de tabulação |
Um controlo que mostra uma coleção de separadores que podem ser usados para mostrar vários documentos. |
People
Pickers
| Imagem |
Controlo |
Descrição |
|
Expansor |
Um contentor com um cabeçalho que pode ser expandido para mostrar conteúdo adicional. |
|
Controlos de deslocamento e navegação |
Um controlo de contentores que permite ao utilizador deslocar e ampliar o seu conteúdo. |
|
Barra de rolagem anotada |
Um controlo que estende a funcionalidade de uma barra vertical normal para uma navegação fácil por grandes coleções. |
|
Zoom semântico |
Permite ao utilizador fazer zoom entre duas vistas diferentes de uma coleção, facilitando a navegação por grandes coleções de itens. |
|
Vista dividida |
Um contentor que tem 2 áreas de conteúdo, com múltiplas opções de exibição para o painel. |
|
Vista de duas áreas |
Um controlo com duas áreas de conteúdo que ocupam o espaço disponível, lado a lado ou de cima para baixo. |
| Imagem |
Controlo |
Descrição |
|
Progress |
Mostra o progresso da aplicação numa tarefa usando uma barra de progresso ou anel de progresso. |
|
Dica de ferramenta |
Apresenta informação de um elemento numa janela pop-up. |
|
Barra de informações |
Uma mensagem inline para mostrar informação de alteração de estado em toda a aplicação. |
|
Distintivo de informação |
Uma interface não intrusiva para mostrar notificações ou focar numa área. |
Texto
| Imagem |
Controlo |
Descrição |
|
Caixa de sugestão automática |
Um controlo para fornecer sugestões enquanto o utilizador está a escrever. |
|
Bloco de texto |
Um controlo leve para mostrar pequenas quantidades de texto. |
|
Bloco de texto rico |
Um controlo que apresenta texto formatado, hiperligações, imagens inline e outros conteúdos ricos. |
|
Caixa de texto |
Um campo de texto simples de uma ou várias linhas. |
|
Caixa de edição rica |
Um controlo de edição de texto enriquecido que suporta texto formatado, hiperligações e outros conteúdos ricos. |
|
caixa de palavra-passe |
Um controlo para introduzir palavras-passe. |
|
Caixa numérica |
Um controlo de texto usado para introdução numérica e avaliação de equações algébricas. |
|
Etiquetas |
Orientação para adicionar etiquetas acessíveis aos controlos de entrada. |
Barra de título
| Imagem |
Controlo |
Descrição |
|
Barra de título |
Personaliza a barra de título da janela da tua aplicação. |
WinUI 3 Galeria
A aplicação WinUI 3 Gallery é a melhor forma de explorar estes controlos manualmente. Fornece demonstrações interativas da maioria dos controlos, funcionalidades e padrões Fluent Design do WinUI — tornando-o um complemento ideal para esta documentação. Instala-o para experimentar controlos em tempo real e liga diretamente a partir de páginas de controlo individuais.
Controlos e recursos adicionais
O Windows Community Toolkit é uma coleção de ajudantes, extensões e controlos adicionais de interface que complementam os controlos integrados do WinUI. É orientado pela comunidade e mantido pela Microsoft, abrangendo cenários comuns como layouts avançados, conversores e animações.
Para acesso antecipado a controlos e funcionalidades experimentais, consulte Windows Community Toolkit Labs, onde novos componentes são desenvolvidos e testados antes de passarem para o kit principal de ferramentas.