Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
Os ícones fornecem uma abreviação visual para uma ação, conceito ou produto. Ao comprimir o significado numa imagem simbólica, os ícones podem ultrapassar as barreiras linguísticas e ajudar a conservar um recurso valioso: o espaço no ecrã. Bons ícones harmonizam-se com a tipografia e com o resto da linguagem de design. Não misturam metáforas e comunicam apenas o que é necessário, da forma mais rápida e simples possível.
Os ícones podem aparecer dentro e fora dos aplicativos. Dentro do seu aplicativo, você usa ícones para representar uma ação, como copiar texto ou ir para a página de configurações.
Este artigo descreve ícones na interface do usuário do aplicativo. Para saber mais sobre os ícones que representam a sua aplicação no Windows (ícones de aplicações), consulte Ícones de aplicações.
Saiba quando usar ícones
Os ícones podem economizar espaço, mas quando você deve usá-los?
Use um ícone para ações, como cortar, copiar, colar e salvar, ou para itens em um menu de navegação. Use um ícone se for fácil para o usuário entender o que o ícone significa e for simples o suficiente para ser claro em tamanhos pequenos.
Não use um ícone se o seu significado não estiver claro ou se torná-lo claro exigir uma forma complexa.
Use o tipo certo de ícone
Há muitas maneiras de criar um ícone. Você pode usar uma fonte de símbolo como a fonte Segoe Fluent Icons. Você pode criar sua própria imagem baseada em vetor. Você pode até usar uma imagem bitmap, embora não a recomendemos. Eis um resumo das formas como pode adicionar um ícone à sua aplicação.
Para adicionar um ícone no seu aplicativo XAML, utilize um IconElement ou um IconSource.
Esta tabela mostra os diferentes tipos de ícones derivados de IconElement e IconSource.
| IconElement | Fonte de Ícones | Descrição |
|---|---|---|
| AnimatedIcon | FonteDeÍconeAnimado | Representa um ícone que exibe e controla um visual que pode ser animado em resposta à interação do usuário e às alterações de estado visual. |
| BitmapIcon | BitmapIconSource | Representa um ícone que usa um bitmap como seu conteúdo. |
| FontIcon | FontIconSource | Representa um ícone que usa um glifo da fonte especificada. |
| IconSourceElement | N/A | Representa um ícone que usa um IconSource como seu conteúdo. |
| ImageIcon | ImageIconSource | Representa um ícone que usa uma imagem como conteúdo. |
| PathIcon | PathIconSource | Representa um ícone que usa um caminho de vetor como seu conteúdo. |
| SymbolIcon | SymbolIconSource | Representa um ícone que usa um glifo do recurso SymbolThemeFontFamily como seu conteúdo. |
IconElement vs. IconSource
IconElement é um FrameworkElement, portanto, pode ser adicionado à árvore de objetos XAML como qualquer outro elemento da interface do usuário do seu aplicativo. No entanto, ele não pode ser adicionado a um ResourceDictionary e reutilizado como um recurso compartilhado.
IconSource é semelhante ao IconElement; no entanto, como não é um FrameworkElement, ele não pode ser usado como um elemento autônomo em sua interface do usuário, mas pode ser compartilhado como um recurso. IconSourceElement é um elemento de ícone especial que envolve um IconSource para que você possa usá-lo em qualquer lugar que precise de um IconElement. Um exemplo desses recursos é mostrado na próxima seção.
Exemplos de IconElement
Você pode usar uma classe derivada de IconElementcomo um componente da interface do usuário autónomo.
Este exemplo mostra como definir um glifo de ícone como o conteúdo de um Button. Defina o FontFamily do botão como SymbolThemeFontFamily e sua propriedade content como o valor Unicode do glifo que você deseja usar.
<Button FontFamily="{ThemeResource SymbolThemeFontFamily}"
Content=""/>
Você também pode adicionar explicitamente um dos objetos de elemento de ícone listados anteriormente, como SymbolIcon. Isso lhe dá mais tipos de ícones para escolher. Ele também permite combinar ícones e outros tipos de conteúdo, como texto, se desejar.
<Button>
<StackPanel>
<SymbolIcon Symbol="Play"/>
<TextBlock Text="Play" HorizontalAlignment="Center"/>
</StackPanel>
</Button>
Este exemplo mostra como você pode definir um FontIconSource em um ResourceDictionary e, em seguida, usar um IconSourceElement para reutilizar o recurso em diferentes locais do seu aplicativo.
<!--App.xaml-->
<Application
...>
<Application.Resources>
<ResourceDictionary>
...
<!-- Other app resources here -->
<FontIconSource x:Key="CertIconSource" Glyph=""/>
</ResourceDictionary>
</Application.Resources>
</Application>
<StackPanel Orientation="Horizontal">
<IconSourceElement IconSource="{StaticResource CertIconSource}"/>
<TextBlock Text="Certificate is expired" Margin="4,0,0,0"/>
</StackPanel>
<Button>
<StackPanel>
<IconSourceElement IconSource="{StaticResource CertIconSource}"/>
<TextBlock Text="View certificate" HorizontalAlignment="Center"/>
</StackPanel>
</Button>
O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub
Propriedades do ícone
Você geralmente coloca ícones em sua interface do usuário atribuindo um a uma propriedade icon de outro elemento XAML. As propriedades Icon que incluem Source no nome usam um IconSource; caso contrário, a propriedade usa um IconElement.
Esta lista mostra alguns elementos comuns que têm uma propriedade icon.
Dica
Você pode exibir esses controles no aplicativo WinUI 3 Gallery para ver exemplos de como os ícones são usados com eles.
Os exemplos restantes nesta página mostram como atribuir um ícone à propriedade icon de um controle.
Ícone de Fonte e Ícone de Símbolo
A maneira mais comum de adicionar ícones ao seu aplicativo é usar os ícones do sistema fornecidos pelas fontes de ícone no Windows. O Windows 11 apresenta uma nova fonte de ícone do sistema, Segoe Fluent Icons, que fornece mais de 1.000 ícones projetados para a linguagem Fluent Design. Pode não ser intuitivo obter um ícone de uma fonte, mas a tecnologia de exibição de fontes do Windows significa que esses ícones terão uma aparência nítida e clara em qualquer ecrã, em qualquer resolução e em qualquer tamanho.
Importante
Família de fontes padrão
Em vez de especificar um FontFamily diretamente, FontIcon e SymbolIcon usam a família de fontes definida pelo recurso de tema XAML SymbolThemeFontFamily. Por padrão, esse recurso usa a família de fontes Segoe Fluent Icon. Se o seu aplicativo for executado no Windows 10, versão 20H2 ou anterior, a família de fontes Segoe Fluent Icon não estará disponível e o recurso SymbolThemeFontFamily retornará para a família de fontes Segoe MDL2 Assets .
Enumeração de símbolos
Muitos glifos comuns do SymbolThemeFontFamily estão incluídos na enumeração Symbol. Se o glifo que você precisa estiver disponível como um símbolo, você pode usar um SymbolIcon qualquer lugar que você usaria um FontIcon com a família de fontes padrão.
Você também usa nomes de símbolos para definir uma propriedade icon em XAML, usando a sintaxe de atributo , como este
<AppBarButton Icon="Send" Label="Send"/>
Dica
Você só pode usar nomes de símbolos para definir uma propriedade icon usando a sintaxe de atributo abreviada. Todos os outros tipos de ícones devem ser definidos usando a sintaxe mais longa do elemento de propriedade , conforme mostrado em outros exemplos nesta página.
Ícones de fonte
Apenas um pequeno subconjunto de glifos Segoe Fluent Icon está disponível na enumeração Symbol. Para usar qualquer um dos outros glifos disponíveis, use um FontIcon. Este exemplo mostra como criar um AppBarButton com o ícone SendFill.
<AppBarButton Label="Send">
<AppBarButton.Icon>
<FontIcon Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>
Se você não especificar um FontFamilyou especificar um FontFamily que não esteja disponível no sistema em tempo de execução, o FontIcon retornará à família de fontes padrão definida pelo recurso de tema SymbolThemeFontFamily.
Você também pode especificar um ícone usando um valor de Glifo de qualquer fonte disponível. Este exemplo mostra como usar um glifo da fonte Segoe UI Emoji.
<AppBarToggleButton Label="FontIcon">
<AppBarToggleButton.Icon>
<FontIcon FontFamily="Segoe UI Emoji" Glyph="▶"/>
</AppBarToggleButton.Icon>
</AppBarToggleButton>
Para obter mais informações e exemplos, consulte a documentação da classe FontIcon e SymbolIcon.
Dica
Use a página Iconografia no aplicativo WinUI 3 Gallery para visualizar, pesquisar e copiar código para todos os ícones disponíveis no Segoe Fluent Icons.
Ícone Animado
O movimento é uma parte importante da linguagem Fluent Design. Os ícones animados chamam a atenção para pontos de entrada específicos, fornecem feedback de estado para estado e dão prazer a uma interação.
Você pode usar ícones animados para implementar ícones leves baseados em vetores com movimento usando Lottie animações.
Para obter mais informações e exemplos, consulte ícones animados e a documentação da classe AnimatedIcon.
Ícone de caminho
Você pode usar um PathIcon para criar ícones personalizados que usam formas baseadas em vetor, para que tenham sempre uma aparência nítida. No entanto, criar uma forma usando um de Geometria XAML é complicado porque precisa-se especificar individualmente cada ponto e curva.
Este exemplo mostra duas maneiras diferentes de definir a geometria usada em um PathIcon.
<AppBarButton Label="PathIcon">
<AppBarButton.Icon>
<PathIcon Data="F1 M 16,12 20,2L 20,16 1,16"/>
</AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Circles">
<AppBarButton.Icon>
<PathIcon>
<PathIcon.Data>
<GeometryGroup>
<EllipseGeometry RadiusX="15" RadiusY="15" Center="90,90" />
<EllipseGeometry RadiusX="50" RadiusY="50" Center="90,90" />
<EllipseGeometry RadiusX="70" RadiusY="70" Center="90,90" />
<EllipseGeometry RadiusX="100" RadiusY="100" Center="90,90" />
<EllipseGeometry RadiusX="120" RadiusY="120" Center="90,90" />
</GeometryGroup>
</PathIcon.Data>
</PathIcon>
</AppBarButton.Icon>
</AppBarButton>
Para saber mais sobre como usar classes Geometria para criar formas personalizadas, consulte a documentação da classe e comandos Mover e desenhar para geometrias. Consulte também a documentação WPF Geometry. A classe WinUI Geometry não tem todos os mesmos recursos que a classe WPF, mas a criação de formas é a mesma para ambos.
Para obter mais informações e exemplos, consulte a documentação da classe PathIcon.
BitmapIcon e ImageIcon
Você pode usar um BitmapIcon ou ImageIcon para criar um ícone a partir de um arquivo de imagem (como PNG, GIF ou JPEG), embora não o recomendemos se outra opção estiver disponível. As imagens bitmap são criadas em um tamanho específico, portanto, elas precisam ser dimensionadas para cima ou para baixo, dependendo do tamanho desejado do ícone e da resolução da tela. Quando a imagem é reduzida (encolhida), pode parecer desfocada. Quando é ampliado, pode parecer bloqueado e pixelizado.
Ícone Bitmap
Por padrão, um BitmapIcon remove todas as informações de cor da imagem e renderiza todos os pixels não transparentes na cor de primeiro plano. Para criar um ícone monocromático, use uma imagem sólida em um fundo transparente no formato PNG. Outros formatos de imagem serão carregados aparentemente sem erros, mas resultarão em um bloco sólido da cor de primeiro plano.
<AppBarButton Label="ImageIcon">
<AppBarButton.Icon>
<ImageIcon Source="ms-appx:///Assets/slices3.png"/>
</AppBarButton.Icon>
</AppBarButton>
Você pode substituir o comportamento padrão definindo a propriedade ShowAsMonochrome como false. Nesse caso, o BitmapIcon se comporta da mesma forma que um ImageIcon para tipos de arquivo bitmap suportados (arquivos SVG não são suportados).
<BitmapIcon UriSource="ms-appx:///Assets/slices3.jpg"
ShowAsMonochrome="False"/>
Para obter mais informações e exemplos, consulte o BitmapIcon documentação da classe.
Dica
O uso de BitmapIcon é semelhante ao uso de BitmapImage; consulte a classe BitmapImage para obter mais informações aplicáveis a BitmapIcon, como definir a propriedade UriSource no código.
ImageIcon
A ImageIcon exibe a imagem fornecida por uma das classes derivadas de ImageSource. O mais comum é BitmapSource, mas, como mencionado anteriormente, não recomendamos imagens bitmap para ícones devido a possíveis problemas de dimensionamento.
Os recursos SVG (Scalable Vetor Graphics) são ideais para ícones, porque eles sempre parecem nítidos em qualquer tamanho ou resolução. Você pode usar um SVGImageSource com um ImageIcon, que suporta o modo estático seguro da especificação SVG, mas não suporta animações ou interações. Para obter mais informações, consulte SVGImageSource e suporte de SVG.
Um ImageIcon ignora a propriedade Foreground, portanto, sempre mostra a imagem em sua cor original. Como a cor de primeiro plano é ignorada, o ícone não responde a alterações de estado visual quando usado em um botão ou outro controle semelhante.
<AppBarButton Label="ImageIcon">
<AppBarButton.Icon>
<ImageIcon Source="ms-appx:///Assets/slices3.svg"/>
</AppBarButton.Icon>
</AppBarButton>
Para obter mais informações e exemplos, consulte a documentação da classe ImageIcon.
Dica
O uso de ImageIcon é semelhante ao controle Image; consulte a classe Image para obter mais informações aplicáveis a ImageIcon. Uma diferença notável é que, com o ImageIcon, apenas o primeiro quadro de uma imagem com vários quadros (como um GIF animado) é usado. Para usar ícones animados, consulte AnimatedIcon.
Artigos relacionados
Colabore connosco no GitHub
A origem deste conteúdo pode ser encontrada no GitHub, onde também pode criar e rever problemas e pedidos Pull. Para mais informações, consulte o nosso guia do contribuidor.
Windows developer