Criar kits de ferramentas e exemplos para aplicativos do Windows

Este tópico fornece uma variedade de recursos relacionados a design e interface do usuário para criar aplicativos do Windows visualmente atraentes e fáceis de usar. Para mais downloads, incluindo ferramentas de desenvolvimento como o Visual Studio, consulte Downloads e ferramentas para desenvolvimento do Windows.

Kits de ferramentas e bibliotecas

Figma Toolkit
Windows Design Kit, novembro de 2024
Abra o do kit de ferramentas

WinUI
Controles e outros elementos da interface do usuário para aplicativos do Windows.
Instruções de instalação

do Kit de Ferramentas da Comunidade do Windows
Funções auxiliares, controles personalizados e serviços de aplicativo.
Instruções de instalação

Estúdio de Modelos
Acelere a criação de novos aplicativos WinUI, WPF e UWP usando uma experiência guiada por assistente.
Instruções de instalação

Aplicativo WinUI Gallery

Obtenha os aplicativos Galeria WinUI da Microsoft Store para ver em ação os controles XAML e o Fluent Design System . As aplicações WinUI 3 Gallery e WinUI 2 Gallery incluem exemplos interativos da maioria dos controlos, recursos e funcionalidades do WinUI 3 e do WinUI 2. As aplicações são um complemento interativo para este site. Depois de instalá-los, você pode usar links em páginas de controle individuais para iniciar o aplicativo e ver o controle em ação.

• Obtenha o Galeria WinUI 3 e o Galeria WinUI 2 na Microsoft Store.
• Obtenha o código-fonte de ambos no GitHub (use o ramo principal para WinUI 3 e o ramo winui2 para WinUI 2).

Fontes

O sistema de tipos do Windows ajuda você a criar estrutura e hierarquia em seu conteúdo para maximizar a legibilidade e legibilidade em sua interface do usuário (para obter mais detalhes, consulte família de fontes Segoe UI).

As seguintes fontes são recomendadas:

• Segoe UI Variable (consulte Tipografia no Windows)
• Segoe Fluent Icons (veja Segoe Fluent Icons fonte)
• Segoe UI
• Segoe MDL2 (consulte ícones Segoe MDL2 Assets)

Ferramentas

Você pode usar o Tile and Icon Generator for Adobe Photoshop Actions para gerar os 68 ativos de bloco e ícone recomendados a partir de apenas 7 arquivos (consulte a Demonstração do Tile and Icon Generator).

Descarregue as ações do gerador de azulejos e ícones

Amostras

Os exemplos a seguir incluem uma variedade de interfaces visualmente atraentes e fáceis de usar.

Editor de temas XAML fluente

O Editor de Temas XAML Fluente é uma ferramenta que ajuda a demonstrar a flexibilidade do Fluent Design System e dá suporte ao processo de desenvolvimento de aplicações gerando marcação XAML para a nossa estrutura ResourceDictionary usada em aplicações Windows.

Baixe o exemplo de ferramenta

Confira a ferramenta no GitHub

VanArsdel

O aplicativo de exemplo completo do Windows Van Arsdel, Ltd. foi criado para mostrar a próxima onda do Fluent Design System. Faz uso extensivo da densidade aprimorada e dos novos controlos no WinUI, bem como das poderosas funcionalidades subjacentes do quadro de UX e da composição. O exemplo mostra como você pode criar uma experiência rica e produtiva para gerenciar e comprar dispositivos IoT (neste caso, lâmpadas).

Faça o download do exemplo VanArsdel

Confira o exemplo de VanArsdel no GitHub

BuildCast

O BuildCast é um exemplo completo criado para demonstrar o Fluent Design System e o Windows. Ele permite a navegação, download e reprodução de podcasts de vídeo selecionados, incluindo alguns feeds de entusiastas de tecnologia do Windows. Também oferece notas manuscritas, marcadores e execução remota. Este exemplo foi inicialmente mostrado na conferência Build de 2017 durante a palestra Build Amazing Apps with Fluent Design.

Descarregue o exemplo BuildCast

Confira o exemplo BuildCast no GitHub

Horário de almoço

Um exemplo de aplicativo do Windows que agenda almoços com seus amigos e colegas de trabalho. Você cria uma reserva de almoço, convida amigos para um restaurante de interesse e o aplicativo cuida da gestão do almoço para todos. Este aplicativo incorpora elementos do Fluent Design System, incluindo acrílico, revelação e animações conectadas.

Faça o download do de exemplo do Lunch Scheduler

Confira o exemplo do Lunch Scheduler no GitHub

Quer mais código?

Confira a página de exemplo do Windows para obter a lista completa de todos os nossos exemplos de aplicativos do Windows.