Selo de informações

A atribuição de selo é uma maneira não intrusiva e intuitiva de exibir notificações ou trazer o foco para uma área dentro de um aplicativo — seja para notificações, indicar novo conteúdo ou mostrar um alerta. Um info badge é uma pequena parte da interface do usuário que pode ser adicionada a um aplicativo e personalizada para exibir números, ícones ou um simples ponto.

O info badge é integrado ao XAML navigation view, mas também pode ser colocado como um elemento autônomo na árvore XAML, permitindo que você coloque um info badge em um controle ou parte da interface do usuário de sua escolha. Quando você usa um info badge em algum lugar que não seja navigation view, você é responsável por determinar programaticamente quando mostrar e descartar o info badge e onde colocar o info badge.

Esse é o controle correto?

Um info badge deve ser usado quando você quer trazer o foco do usuário para uma determinada área do seu aplicativo de forma não intrusiva. Quando um info badge aparece, sua função é trazer o foco para uma área e permitir que o usuário volte ao seu fluxo, dando-lhe a escolha de olhar ou não para os detalhes do porquê o info badge apareceu. Os selos de informações devem representar apenas as mensagens que são descartáveis e não permanentes — um info badge deve ter regras específicas sobre quando aparecer, desaparecer e mudar.

Exemplos de uso apropriado do info badge:

• Para indicar que novas mensagens chegaram.
• Para indicar que novos artigos estão disponíveis para leitura.
• Para indicar que há novas opções disponíveis em uma página.
• Para indicar que pode haver um problema com um item em uma determinada página que não impede o funcionamento do aplicativo.

Quando um controle diferente deve ser usado?

Um info badge não deve ser usado para exibir erros críticos ou transmitir mensagens altamente importantes que precisam de ação imediata. Os selos de informações não devem ser usados em casos onde o usuário precise interagir imediatamente para continuar usando o aplicativo.

Exemplos de uso apropriado do info badge:

• Para indicar um assunto urgente em uma página dentro do aplicativo que precisa ser resolvido antes de continuar a usar o aplicativo. Para este cenário, use um content dialog.
• Aparecer em um aplicativo sem uma opção de o usuário ignorar o info badge. Para um alerta persistente como este, use um info bar.
• Usar o info badge como uma forma permanente de trazer o foco do usuário para uma área, sem uma opção de o usuário dispensar o info badge.
• Uso de um info badge como um ícone ou imagem comum em seu aplicativo. Use uma imagem ou ícone apropriado (veja IconElement e IconSource).

Tipos de info badges

Há três estilos de info badge que você pode escolher — ponto, ícone e numérico, conforme mostrado na ordem abaixo.

info badge de ponto

O info badge de ponto é uma elipse simples com um diâmetro de 4px. Ele não tem borda e não é destinado a manter texto ou qualquer outra coisa dentro dele.

Você deve usar o ponto info badge para cenários gerais nos quais quer voltar o foco do usuário para o info badge — por exemplo, para indicar que novos conteúdos ou atualizações estão disponíveis.

info badge de ícone

O info badge de ícone é uma elipse com um diâmetro de 16px que contém um ícone dentro dele. O info badge tem uma propriedade IconSource que fornece flexibilidade para os tipos de ícones com suporte.

Você deve usar o ícone info badge para enviar uma mensagem rápida e obter a atenção do usuário — por exemplo, para alertar o usuário de que algo sem bloqueio deu errado, uma atualização extra importante está disponível ou que algo específico no aplicativo está habilitado no momento (como um temporizador de contagem regressiva).

Se você quiser usar um BitmapIconSource para o IconSource do info badge, será responsável por garantir que o bitmap se ajuste dentro do info badge (seja alterando o tamanho do ícone ou alterando o tamanho do info badge).

info badge numérico

O info badge numérico tem a mesma forma e tamanho que o ícone info badge, mas contém um número dentro dele, determinado pela propriedade Value. Os números devem ser inteiros e devem ser maiores ou iguais a zero. A largura do info badge será expandida automaticamente à medida que o número que está sendo exibido aumentar para vários dígitos, com uma animação suave.

Você deve usar o info badge numérico para mostrar que há um número específico de itens que precisam de atenção — por exemplo, novos emails ou mensagens.

Estilos de info badge predefinidos

Para ajudar a dar suporte aos cenários mais comuns em que info badges são usados, o controle inclui estilos de info badge predefinidos internos. Embora você possa personalizar seu info badge para usar uma combinação de cor/ícone/número que quiser, essas predefinições integradas são uma opção rápida para garantir que o seu info badge esteja em conformidade com as diretrizes de acessibilidade e seja proporcional em termos de dimensionamento de ícones e números.

As seguintes predefinições de estilo estão disponíveis para info badges:

Atenção

• AttentionDotInfoBadgeStyle
• AttentionIconInfoBadgeStyle
• AttentionValueInfoBadgeStyle

Informational

• InformationalDotInfoBadgeStyle
• InformationalIconInfoBadgeStyle
• InformationalValueInfoBadgeStyle

Êxito

• SuccessDotInfoBadgeStyle
• SuccessIconInfoBadgeStyle
• SuccessValueInfoBadgeStyle

Cuidado

• CautionDotInfoBadgeStyle
• CautionIconInfoBadgeStyle
• CautionValueInfoBadgeStyle

Crítico

• CriticalDotInfoBadgeStyle
• CriticalIconInfoBadgeStyle
• CriticalValueInfoBadgeStyle

Se um estilo for definido em um info badge e uma propriedade conflitante também estiver definida, a propriedade substituirá a parte conflitante do estilo, mas os elementos de estilo não conflitantes permanecerão aplicados.

Por exemplo, se você aplicar o CriticalIconInfoBadgeStyle a um info badge, mas também definir InfoBadge.Value = "1", você terá um info badge que tem a cor da tela de fundo "Crítico", mas que exibe o número 1 dentro dele, em vez de exibir o ícone predefinido.

Este exemplo cria um info badge que assume a cor e o ícone do estilo predefinido do Ícone de atenção.

<InfoBadge Style="{ThemeResource AttentionIconInfoBadgeStyle}"/>

Accessibility

O controle de info badge não tem nenhuma funcionalidade de leitor de tela ou UIA (automação de interface do usuário) incorporada a ele por conta própria, pois o controle não é focalizável e não permite interação.

Se você estiver usando um info badge dentro de um navigation view, o navigation view fornece leitor de tela integrado e suporte de tecnologia adaptativa. Quando você estiver avançando por um navigation view e encontrar um item de navigation view com um info badge nele, o leitor de tela anunciará que há um info badge nesse item. Se o info badge em questão for numérico, o leitor de tela anunciará o valor de info badge também.

Se você estiver usando um info badge fora de um navigation view, recomendamos o seguinte para garantir que seu aplicativo seja totalmente acessível:

• O elemento pai do info badge deve ser focalizável e acessível por guia.
• O elemento pai anuncia o info badge aos leitores de tela.
• O aplicativo envia uma notificação de UIA quando o info badge aparece pela primeira vez.
• O aplicativo envia uma notificação de UIA quando um info badge desaparece da interface do usuário.
• O aplicativo envia uma notificação de UIA quando uma alteração significativa ocorre com um info badge existente.
  • A definição de "alteração significativa" depende de você como desenvolvedor individual. Exemplos disso podem incluir: a alternância de um info badge entre diferentes tipos, a mudança de cor de um info badge para representar seu status ou o valor de um info badge que excede um determinado número significativo.

Para controlar o que o elemento pai anuncia aos leitores de tela, você pode usar as propriedades anexadas da classe AutomationProperties. Para um info badge, é recomendável que você defina as propriedades de AutomationProperties.FullDescription ou AutomationProperties.ItemStatus anexadas no elemento pai.

Para enviar notificações de UIA após a ocorrência ou dispensa de info badge, você pode usar o método AutomationPeer.RaiseAutomationEvent.

O info badge vem em um tamanho padrão que atende aos requisitos de acessibilidade. Você pode personalizar muitos aspectos do info badge, incluindo sua altura/largura/cor, etc., mas é importante que o info badge padrão siga nossas diretrizes de acessibilidade sobre tamanho e cor.

Criar um InfoBadge

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 obtenha o código-fonte no GitHub

Você pode criar um InfoBadge em XAML ou em código. O tipo de InfoBadge que você cria é determinado por quais propriedades você define.

Ponto

Para criar um InfoBadge de ponto, use um controle de InfoBadge padrão sem conjunto de propriedades.

<InfoBadge />

Ícone

Para criar um InfoBadge de ícone, defina a propriedade IconSource.

<InfoBadge x:Name="SyncStatusInfoBadge">
    <InfoBadge.IconSource>
        <SymbolIconSource Symbol="Sync"/>
    </InfoBadge.IconSource>
</InfoBadge>

Numeric

Para criar um InfoBadge numérico, defina a propriedade Value.

<InfoBadge x:Name="EmailInfoBadge" Value="{x:Bind numUnreadMail}"/>

Na maioria dos cenários, você vinculará a propriedade Value do InfoBadge a um valor inteiro em alteração no back-end do seu aplicativo para que possa incrementar/decrementar facilmente e mostrar/ocultar o InfoBadge com base nesse valor específico.

Uso de um InfoBadge no NavigationView

Se você estiver usando um NavigationView em seu aplicativo, recomendamos que você use um InfoBadge no NavigationView para mostrar alertas e notificações em todo o aplicativo. Para colocar o InfoBadge em um NavigationViewItem, atribua o objeto InfoBadge à propriedade NavigationViewItem.InfoBadge.

No modo Expandido à Esquerda, o InfoBadge aparece alinhado à direita na borda do NavigationViewItem.

No modo Compacto à Esquerda, o InfoBadge aparece sobreposto no canto superior direito do ícone.

No modo Superior, o InfoBadge é alinhado ao canto superior direito do item geral.

Recomendamos que você não use tipos diferentes de InfoBadges em um único NavigationView, como anexar um InfoBadge numérico a um NavigationViewItem e um InfoBadge de ponto a outro NavigationViewItem no mesmo NavigationView.

Exemplo: Incrementar um InfoBadge numérico em um NavigationView

Esse exemplo simula como um aplicativo de email pode usar um InfoBadge em um NavigationView para exibir o número de novos emails na caixa de entrada e incrementar o número mostrado no InfoBadge quando uma nova mensagem é recebida.

<NavigationView SelectionChanged="NavigationView_SelectionChanged">
    <NavigationView.MenuItems>
        <NavigationViewItem Content="Home" Icon="Home"/>
        <NavigationViewItem Content="Account" Icon="Contact"/>
        <NavigationViewItem x:Name="InboxPage" Content="Inbox" Icon="Mail">
            <NavigationViewItem.InfoBadge>
                <InfoBadge x:Name="bg1"
                                Value="{x:Bind mailBox.NewMailCount, Mode=OneWay}"
                                Visibility="{x:Bind mailBox.HasNewMail, Mode=OneWay}"/>
            </NavigationViewItem.InfoBadge>
        </NavigationViewItem>
    </NavigationView.MenuItems>
    <Frame x:Name="contentFrame" />
</NavigationView>

public sealed partial class MainWindow : Window
{
    MailBox mailBox = new MailBox();

    public MainWindow()
    {
        this.InitializeComponent();

    }

    private void NavigationView_SelectionChanged(NavigationView sender,
                               NavigationViewSelectionChangedEventArgs args)
    {
        if (args.SelectedItem == InboxPage)
        {
            mailBox.ResetNewMailCount();
        }
        else
        {
            mailBox.CheckMail();
        }
    }
}

public class MailBox : DependencyObject
{
    DispatcherQueueTimer timer;

    // Dependency Properties for binding.
    public int NewMailCount
    {
        get { return (int)GetValue(NewMailCountProperty); }
        set { SetValue(NewMailCountProperty, value); }
    }
    public static readonly DependencyProperty NewMailCountProperty =
        DependencyProperty.Register("NewMailCount", typeof(int), typeof(MailBox), new PropertyMetadata(0));

    public bool HasNewMail
    {
        get { return (bool)GetValue(HasNewMailProperty); }
        set { SetValue(HasNewMailProperty, value); }
    }
    public static readonly DependencyProperty HasNewMailProperty =
        DependencyProperty.Register("HasNewMail", typeof(bool), typeof(MailBox), new PropertyMetadata(false));

    public MailBox()
    {
        timer = this.DispatcherQueue.CreateTimer();
        timer.Interval = new TimeSpan(15000000);
        timer.Tick += (s, e) =>
        {
            NewMailCount++;
            if (HasNewMail == false) { HasNewMail = true; }
        };
        timer.Start();
    }

    public void ResetNewMailCount()
    {
        NewMailCount = 0;
        HasNewMail = false;
        timer.Stop();
    }

    public void CheckMail()
    {
        timer.Start();
    }
}

Hierarquia no NavigationView

Se você tiver um NavigationView hierárquico, com NavigationViewItems aninhados em outros NavigationViewItems, os itens pai seguirão os mesmos padrões de design/posicionamento descritos acima.

O NavigationViewItem pai e os NavigationViewItems filho terão sua própria propriedade InfoBadge. Você pode vincular o valor do InfoBadge do pai a fatores que determinam os valores do InfoBadge dos filhos, como mostrar a soma dos InfoBadges numéricos dos filhos no InfoBadge do pai.

Esta imagem mostra um NavigationView hierárquico com seu PaneDisplayMode definido como Superior, onde o item de nível superior (pai) mostra um InfoBadge numérico. O aplicativo definiu o InfoBadge do item pai para representar o que está sendo exibido nos InfoBadges dos itens filho, pois os itens filho não estão expandidos (e, portanto, não estão visíveis).

Uso de um InfoBadge em outro controle

Talvez você queira mostrar alertas ou notificações em elementos dentro do seu aplicativo que não sejam o NavigationView. Você pode ter um ListViewItem que precisa de atenção especial ou um item de menu que exibe uma notificação. Nesses casos, você pode integrar o InfoBadge diretamente à sua interface do usuário com outros controles.

O InfoBadge é um UIElement e, portanto, não pode ser usado como um recurso compartilhado.

Para fazer isso, use o InfoBadge como faria com outro controle — basta adicionar a marcação InfoBadge onde você gostaria que ele aparecesse. Como o InfoBadge herda do Controle, ele tem todas as propriedades de posicionamento internas, como margem, alinhamento, preenchimento e muito mais, que você pode usar para posicionar o InfoBadge exatamente onde quiser.

Se você colocar um InfoBadge dentro de outro controle, como um Botão ou um ListViewItem, ele provavelmente será cortado se você posicioná-lo para estender além da caixa delimitadora do controle pai. Se o seu InfoBadge estiver dentro de outro controle, ele não deverá ser posicionado além dos cantos da caixa delimitadora geral do controle.

Exemplo: Colocar um InfoBadge dentro de outro controle

Aqui está um botão com um InfoBadge posicionado no canto superior direito, sobrepondo o conteúdo. Este exemplo também pode ser aplicado a muitos controles que não sejam Botão — ele simplesmente mostra como colocar, posicionar e mostrar um InfoBadge dentro de outro controle da WinUI.

<Button Width="200" Height="60" Padding="4"
        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Grid>
        <SymbolIcon Symbol="Sync"/>
        <InfoBadge x:Name="buttonInfoBadge"
                        Background="#C42B1C"
                        HorizontalAlignment="Right" 
                        VerticalAlignment="Top"
                        Width="16" Height="16">
            <InfoBadge.IconSource>
                <FontIconSource Glyph="&#xEA6A;"/>
            </InfoBadge.IconSource>
        </InfoBadge>
    </Grid>
</Button>

Gerenciar um InfoBadge

Um InfoBadge normalmente exibe um alerta transitório, portanto, é comum mostrá-lo ou ocultá-lo e alterá-lo periodicamente enquanto seu aplicativo está em execução.

Mostrar e ocultar um InfoBadge

Você pode usar a propriedade Visibilidade ou Opacidade para mostrar e ocultar um InfoBadge com base em ações do usuário, lógica do programa, contadores, etc.

Assim como acontece com outros UIElements, a configuração de Visibility.Collapsed fará com que o InfoBadge não ocupe espaço no layout, portanto, pode fazer com que outros elementos se movam quando são mostrados e ocultos.

Se os elementos que estão sendo reposicionados forem uma preocupação, você poderá usar a propriedade Opacity para mostrar e ocultar o InfoBadge. Opacity é definido como 1.0 por padrão; você pode defini-lo como 0 para ocultar o InfoBadge. Quando você usa a propriedade Opacity, o InfoBadge ainda ocupará espaço no layout, mesmo que ele esteja oculto no momento.

Alterar o estilo InfoBadge

Você pode alterar o ícone ou o número exibido em um InfoBadge enquanto ele está sendo mostrado. A criação ou incrementação de um InfoBadge numérico com base na ação do usuário pode ser obtida alterando o valor de InfoBadge.Value. A alteração do ícone de um InfoBadge pode ser obtida definindo o InfoBadge.IconSource como um novo objeto IconSource. Ao alterar ícones, certifique-se de que o novo ícone tenha o mesmo tamanho que o ícone antigo para evitar um efeito visual brusco.

Comportamento padrão

Se nem InfoBadge.Value nem InfoBadge.IconSource forem definidos, o InfoBadge mostrará como padrão um ponto (especificamente se Value estiver definido como -1 e IconSource estiver definido como null, que são os valores padrão). Se as propriedades Value e IconSource estiverem definidas, o InfoBadge respeitará a propriedade Value e exibirá um valor numérico.

Você também pode alterar o tipo do InfoBadge enquanto ele está sendo mostrado. Para alterar o tipo de InfoBadge, certifique-se de que a propriedade correspondente do tipo atual (Value ou IconSource) esteja definida como seu valor padrão (-1 ou null) e defina a propriedade do novo tipo igual a um valor apropriado. Para alterar o tipo de InfoBadge de numérico ou de ícone para um tipo de InfoBadge de ponto, certifique-se de que InfoBadge.Value esteja definido como -1 e InfoBadge.IconSource esteja definido como null.

Dependendo da forma como você posicionou seu InfoBadge, esteja ciente de que isso pode fazer com que os itens mudem à medida que o tamanho e a forma do InfoBadge podem mudar.

UWP e WinUI 2

O InfoBadge para aplicativos UWP requer a WinUI 2. Para obter mais informações, incluindo instruções de instalação, consulte WinUI 2. As APIs para esse controle existem no namespace Microsoft.UI.Xaml.Controls .

Para usar o código neste artigo com a WinUI 2, use um alias em XAML (usamos muxc) para representar as APIs da Biblioteca de Interface do Usuário do Windows incluídas em seu projeto. Confira Introdução ao WinUI 2 para obter mais informações.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:InfoBadge/>

Artigos relacionados

• NavigationView