Í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.

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="&#xE768;"/>

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="&#xEB95;"/>

        </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.

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.

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"/>

Í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="&#xE725;"/>
    </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="&#x25B6;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

Para obter mais informações e exemplos, consulte a documentação das classes FontIcon e SymbolIcon .

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 .

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 .

Artigos relacionados

• Iconografia no Windows
• Ícones de aplicativos
• AnimatedIcon
• Barra de comandos