Partilhar via


Controlos para aplicações Windows

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.

Entrada básica

Imagem Controlo Descrição
Botões 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 Caixas de seleção Um controlo que o utilizador pode selecionar ou eliminar.
Caixas combinadas Caixas combinadas Uma lista suspensa de itens que o utilizador pode selecionar.
Hiperligações 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 rádio 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 Controlo de classificação Dá uma nota de 1 a 5 estrelas.
Sliders Deslizadores Um controlo que permite ao utilizador selecionar entre uma gama de valores movendo um controlo deslizante ao longo de uma pista.
Interruptores de alavanca Interruptores de comutação Um interruptor que pode ser alternado entre dois estados.

Collections

Imagem Controlo Descrição
Visualização de itens Visualização de itens Um controlo que apresenta uma coleção de itens usando vários layouts.
Vista de lista e vista em grelha Vista de lista e vista de grelha Controlos que apresentam uma coleção de itens numa lista vertical ou em linhas e colunas.
Vista alternada Alternar visão Apresenta uma coleção de itens que o utilizador pode folhear, um de cada vez.
Pager Pips 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 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 Repetidor de itens Um controlo flexível e primitivo para layouts orientados por dados.
Passar o dedo Deslizar Gesto de toque para ações rápidas no menu dos itens.
Puxar para atualizar 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 Diálogos Uma caixa de diálogo que pode ser personalizada para conter qualquer conteúdo XAML.
Flyouts Flyouts Mostra informação contextual e permite a interação do utilizador.
Dica de ensino Dica de ensino Um flyout rico em conteúdos para orientar os utilizadores e possibilitar momentos de aprendizagem.

Forms

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.

Mídia, gráficos e formas

Imagem Controlo Descrição
Ícones Ícones Representar controlos de ícones que usam diferentes tipos de imagem como conteúdo.
Ícones animados Í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 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 multimédia Reprodução de multimédia Um controlo para exibir conteúdo de vídeo e imagens.
Formas Formas Desenhe formas como elipses, retângulos e polígonos.
Imagem Controlo Descrição
Menus e menus de contexto Menus e menus de contexto Mostra uma lista contextual de comandos ou opções simples.
Barra de comando Barra de comandos Uma barra de ferramentas para mostrar comandos específicos da aplicação que trata do layout e redimensionamento do seu conteúdo.
Saída da barra de comando Flutuante da barra de comandos Uma mini-barra de ferramentas com comandos proativos e um menu opcional de comandos.
Menu flyout e barra de menu Menu suspenso e barra de menus Um menu clássico, permitindo a exibição de Itens do Menu contendo Itens de MenuFlyout.
Imagem Controlo Descrição
Barra de migalhas 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 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.
Captura de ecrã do controlo Pivot Pivô Apresenta, numa vista por separadores, informações de diferentes fontes.
Barra seletora Barra seletora Apresenta informação de um pequeno conjunto de fontes diferentes. O utilizador pode escolher um deles.
Vista de separador Visualização de tabulação Um controlo que mostra uma coleção de separadores que podem ser usados para mostrar vários documentos.

People

Imagem Controlo Descrição
Fotografia da pessoa Fotografia da pessoa Mostra a fotografia de uma pessoa/contacto.

Pickers

Imagem Controlo Descrição
Seletor de cores Seletor de cores Um controlo que mostra um espectro de cores selecionável.
Seletor de datas no calendário Seletor de data do calendário Um controlo que permite aos utilizadores escolher um valor de data através de um calendário.
Vista de calendário Visualização de calendário Um controlo que apresenta um calendário para o utilizador escolher uma data.
Selecionador de datas Seletor de data Um controlo que permite ao utilizador escolher um valor de data.
Seletor de tempo Seletor de tempo Um controlo configurável que permite ao utilizador escolher um valor temporal.

Rolagem e layout

Imagem Controlo Descrição
Captura de ecrã do controlo do Expander Expansor Um contentor com um cabeçalho que pode ser expandido para mostrar conteúdo adicional.
Controlos de scroll e panorâmica 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 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 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.
Visão dividida Vista dividida Um contentor que tem 2 áreas de conteúdo, com múltiplas opções de exibição para o painel.
Vista de dois painéis 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.

Estado e informações

Imagem Controlo Descrição
Progresso Progress Mostra o progresso da aplicação numa tarefa usando uma barra de progresso ou anel de progresso.
Captura de ecrã do controlo Tooltip Dica de ferramenta Apresenta informação de um elemento numa janela pop-up.
Barra de informações 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 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 Caixa de sugestão automática Um controlo para fornecer sugestões enquanto o utilizador está a escrever.
Bloco de texto Bloco de texto Um controlo leve para mostrar pequenas quantidades de texto.
Bloco de texto enriquecido Bloco de texto rico Um controlo que apresenta texto formatado, hiperligações, imagens inline e outros conteúdos ricos.
Caixa de texto Caixa de texto Um campo de texto simples de uma ou várias linhas.
Caixa de edição rica 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 caixa de palavra-passe Um controlo para introduzir palavras-passe.
Caixa numérica 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 Barra de título Personaliza a barra de título da janela da tua aplicação.

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.