Ícones em aplicativos do Windows
Os ícones fornecem uma abreviação visual para uma ação, um conceito ou um produto. Ao comprimir o significado em uma imagem simbólica, os ícones podem cruzar as barreiras linguísticas e ajudar a conservar um recurso valioso: o espaço na tela. Ícones bons se harmonizam com a tipografia e com o restante da linguagem do design. Eles 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 os ícones na interface do usuário do aplicativo. Para saber mais sobre ícones que representam seu aplicativo no Windows (ícones de aplicativos), consulte Ícones de aplicativos.
Saiba quando usar ícones
Ícones podem economizar espaço, mas quando você deve usá-los?
Use um ícone para ações, como recortar, 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 ele significa e se for simples o bastante para ser entendido em tamanhos pequenos.
Não use um ícone se o significado não está claro, ou se para que fique claro seja necessário usar uma forma complexa.
Use o tipo certo de ícone
Há muitas maneiras de criar um ícone. É possível: Você pode usar uma fonte de símbolo como a fonte Segoe Fluent Icons. Você pode criar sua própria imagem baseada em vetor. Usar uma imagem de bitmap, embora isso não seja recomendado. Aqui está um resumo das maneiras pelas quais você pode adicionar um ícone ao seu aplicativo.
Para adicionar um ícone em seu aplicativo XAML, use um IconElement ou um IconSource.
Esta tabela mostra os diferentes tipos de ícones derivados de IconElement e IconSource.
| Elemento Ícone | Fonte do ícone | Descrição |
|---|---|---|
| AnimatedIcon | Fonte do ícone animado | 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 conteúdo. |
| FontIcon | Fonte do ícone da fonte | Representa um ícone que usa um glifo da fonte especificada. |
| IconSourceElement | N/D | Representa um ícone que usa um IconSource como seu conteúdo. |
| ImageIcon | ImagemIconSource | Representa um ícone que usa uma imagem como conteúdo. |
| PathIcon | OrigemDo Ícone Do Caminho | Representa um ícone que usa um caminho vetorial como seu conteúdo. |
| SymbolIcon | SymbolIconSource | Representa um ícone que usa um glifo do SymbolThemeFontFamily recurso como seu conteúdo. |
IconElement vs. IconSource
IconElement é um FrameworkElement, portanto, ele 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 a 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 encapsula um IconSource para que você possa usá-lo em qualquer lugar que precisar de um IconElement. Um exemplo desses recursos é mostrado na próxima seção.
Exemplos de IconElement
Você pode usar uma classe derivada de IconElement como um componente de 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 Galeria da WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades da WinUI 3. Obtenha o aplicativo na Microsoft Store ou o código-fonte no GitHub
Propriedades do ícone
Você geralmente coloca ícones em sua interface do usuário atribuindo um a uma icon propriedade de outro elemento XAML. 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 icon propriedade.
| Comandos/Ações | Navegação | Status/Outro |
|---|---|---|
| AppBarButton.Icon AppBarToggleButton.Icon AutoSuggestBox.QueryIcon MenuFlyoutItem.Icon MenuFlyoutSubItem.Icon SwipeItem.IconSource XamlUICommand.IconSource | NavigationViewItem.Icon SelectorBarItem.Icon TabViewItem.IconSource | AnimatedIcon.FallbackIconSource AnimatedIconSource.FallbackIconSource IconSourceSourceElement.IconSource InfoBadge.IconSource InfoBar.IconSource TeachingTip.IconSource |
Dica
Você pode exibir esses controles no aplicativo Galeria do WinUI 3 para ver exemplos de como os ícones são usados com eles.
Os exemplos restantes nesta página mostram como atribuir um ícone à icon propriedade de um controle.
FontIcon e SymbolIcon
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 nítida em qualquer exibição, 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 SymbolThemeFontFamily recurso de tema XAML. Por padrão, esse recurso usa a família de fontes Segoe Fluent Icon. Se o 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 SymbolThemeFontFamily recurso retornará à família de fontes Segoe MDL2 Assets .
Enumeração Symbol
Muitos glifos comuns do SymbolThemeFontFamily estão incluídos na enumeração Symbol . Se o glifo necessário estiver disponível como um Symbol, você poderá usar um SymbolIcon em qualquer lugar em que usaria um FontIcon com a família de fontes padrão.
Você também usa nomes de símbolo para definir uma icon propriedade em XAML usando sintaxe de atributo, como esta
<AppBarButton Icon="Send" Label="Send"/>
Dica
Você só pode usar nomes de símbolo para definir uma icon propriedade usando a sintaxe de atributo abreviada. Todos os outros tipos de ícone devem ser definidos usando a sintaxe de elemento de propriedade mais longa, conforme mostrado em outros exemplos nesta página.
Ícones de fonte
Apenas um pequeno subconjunto de glifos de Ícone fluente de Segoe está disponível na enumeração Símbolo . Para usar qualquer um dos outros glifos disponíveis, use um FontIcon. Este exemplo mostra como criar um AppBarButton com o SendFill ícone.
<AppBarButton Label="Send">
<AppBarButton.Icon>
<FontIcon Glyph=""/>
</AppBarButton.Icon>
</AppBarButton>
Se você não especificar um FontFamily ou 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 SymbolThemeFontFamily tema.
Você também pode especificar um ícone usando um valor de Glifo de qualquer fonte disponível. Este exemplo mostra como usar um Glyph da fonte Emoji Segoe UI.
<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 das classes FontIcon e SymbolIcon .
Dica
Use a página Iconografia no aplicativo Galeria do WinUI 3 para exibir, pesquisar e copiar o código de todos os ícones disponíveis no Segoe Fluent Icons.
AnimatedIcon
O movimento é uma parte importante da linguagem Fluent Design. Os ícones animados chamam a atenção para pontos de entrada específicos, fornecem comentários de estado para estado e adicionam prazer a uma interação.
Você pode usar ícones animados para implementar ícones leves e baseados em vetor com movimento usando animações Lottie .
Para obter mais informações e exemplos, consulte Ícones animados e a documentação da classe AnimatedIcon .
PathIcon
Você pode usar um PathIcon para criar ícones personalizados que usam formas baseadas em vetor, para que eles sempre pareçam nítidos. No entanto, criar uma forma usando uma geometria XAML é complicado porque você precisa 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 Geometry para criar formas personalizadas, consulte a documentação da classe e Mover e desenhar comandos para geometrias. Consulte também a documentação do 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 ambas.
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 com um tamanho específico para poderem ser dimensionadas dependendo do tamanho desejado do ícone e da resolução da tela. Quando a imagem é reduzida (reduzida), ela pode parecer desfocada. Quando é ampliado, pode parecer em blocos e pixelado.
BitmapIcon
Por padrão, um BitmapIcon remove todas as informações de cor da imagem e renderiza todos os pixels não transparentes na cor do primeiro plano . Para criar um ícone monocromático, use uma imagem sólida em um plano de 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 do 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 com suporte (arquivos SVG não são suportados).
<BitmapIcon UriSource="ms-appx:///Assets/slices3.jpg"
ShowAsMonochrome="False"/>
Para obter mais informações e exemplos, consulte a documentação da classe BitmapIcon .
Dica
O uso de BitmapIcon é semelhante ao uso de BitmapImage; consulte a classe BitmapImage para obter mais informações aplicáveis ao BitmapIcon, como definir a propriedade UriSource no código.
ImageIcon
Um ImageIcon mostra a imagem fornecida por uma das classes derivadas de ImageSource. O mais comum é BitmapSource, mas, como mencionado anteriormente, não recomendamos imagens de bitmap para ícones devido a possíveis problemas de dimensionamento.
Os recursos SVG (Scalable Vector Graphics) são ideais para ícones, pois sempre parecem nítidos em qualquer tamanho ou resolução. Você pode usar um SVGImageSource com um ImageIcon, que dá suporte ao modo estático seguro da especificação SVG, mas não dá suporte a animações ou interações. Para obter mais informações, consulte SVGImageSource e suporte a SVG.
Um ImageIcon ignora a propriedade Foreground , portanto, ele sempre mostra a imagem em sua cor original. Como a cor do primeiro plano é ignorada, o ícone não responde às 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 de vários quadros (como um GIF animado) é usado. Para usar ícones animados, consulte AnimatedIcon.
Artigos relacionados
Windows developer