Etiqueta informativa

Badging é uma maneira não intrusiva e intuitiva de exibir notificações ou trazer foco para uma área dentro de um aplicativo - seja para notificações, indicando novo conteúdo ou mostrando um alerta. Um info badge é um pequeno pedaço de interface do usuário que pode ser adicionado a um aplicativo e personalizado para exibir um número, ícone ou um ponto simples.

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

NavigationView

Será este o controlo correto?

Um info badge deve ser usado quando você quiser trazer o foco do usuário para uma determinada área do seu aplicativo de forma não intrusiva. Quando um info badge aparece, destina-se a trazer o foco para uma área e, em seguida, permitir que o usuário volte ao seu fluxo, dando-lhe a escolha de olhar ou não para os detalhes do motivo pelo qual o info badge apareceu. Os selos de informações devem representar apenas mensagens que são descartáveis e não permanentes – um info badge deve ter regras específicas sobre quando ele pode aparecer, desaparecer e mudar.

Exemplos de uso de info badge apropriado:

• Para indicar que chegaram novas mensagens.
• 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 deve ser utilizado um controlo diferente?

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 nos casos em que precisam ser interagidos imediatamente para continuar usando o aplicativo.

Exemplos de uso inadequado de 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 numa aplicação sem nenhuma forma de o utilizador descartar 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 utilizador para uma área, sem que o utilizador possa dispensar o info badge.
• Usar um info badge como um ícone ou imagem normal em seu aplicativo. Em vez disso, use uma imagem apropriada ou ícone (consulte IconElement e IconSource).

Tipos de info badges

Há três estilos de info badge que podes escolher: ponto, íconee numérico, conforme mostrado na ordem abaixo.

Ponto info badge

O ponto info badge é uma elipse simples com um diâmetro de 4px. Não tem fronteiras e não se destina a conter texto ou qualquer outra coisa dentro dela.

Deverás usar o ponto info badge para cenários gerais nos quais desejas orientar o foco do utilizador para o info badge – por exemplo, para indicar que novo conteúdo ou atualizações estão disponíveis.

Ícone info badge

O ícone info badge é 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 suportados.

Você deve usar o ícone info badge para enviar uma mensagem rápida e chamar a atenção do usuário – por exemplo, para o alertar de que algo que não é bloqueante deu errado, uma atualização muito importante está disponível ou que algo específico no aplicativo está ativado atualmente (como um temporizador de contagem regressiva).

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

Numérico info badge

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 se expandirá automaticamente à medida que o número que está sendo exibido cresce para vários dígitos, com uma animação suave.

Você deve usar a info badge numérica para mostrar que há um número específico de itens que precisam de atenção – por exemplo, novos e-mails ou mensagens.

Estilos info badge predefinidos

Para ajudar a suportar os cenários mais comuns em que os info badges são usados, o controle inclui estilos de info badge predefinidos internos. Embora você possa personalizar seu info badge para usar qualquer combinação de cor/ícone/número desejada, essas predefinições integradas são uma opção rápida para garantir que 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

Sucesso

• SuccessDotInfoBadgeStyle
• SuccessIconInfoBadgeStyle
• SuccessValueInfoBadgeStyle

Atenção

• CautionDotInfoBadgeStyle
• CautionIconInfoBadgeStyle
• CautionValueInfoBadgeStyle

Crítico

• CriticalDotInfoBadgeStyle
• CriticalIconInfoBadgeStyle
• CriticalValueInfoBadgeStyle

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

Por exemplo, se se aplicar o CriticalIconInfoBadgeStyle a um info badge, mas também definir InfoBadge.Value = "1", acabar-se-á com um info badge que tem a cor de fundo "Crítico" mas exibe o número 1 nele, em vez de exibir o ícone predefinido.

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

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

Accessibility

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

Se estiver a utilizar um info badge dentro de um navigation view, o navigation view fornece leitor de ecrã incorporado e suporte de tecnologia assistiva. Quando estiver a navegar com a tecla Tab por um navigation view e parar num item de navigation view com um info badge nele, o leitor de ecrã anunciará que há um info badge neste item. Se o info badge em questão for numérico, o leitor de tela anunciará o valor do info badgetambém.

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

• O elemento pai do info badge deve ser focalizável e acessível via tabulação.
• O elemento pai anuncia o info badge aos leitores de ecrã.
• A aplicação envia uma notificação da IU quando o info badge aparece pela primeira vez.
• O aplicativo envia uma notificação da UIA quando um info badge desaparece da interface do usuário.
• O aplicativo envia uma notificação da UIA quando ocorre uma alteração significativa em um info badgeexistente.
  • A definição de "mudança significativa" cabe a você como desenvolvedor individual. Exemplos disso podem incluir: um info badge alternando entre diferentes tipos, um info badge mudando de cor para representar seu status ou um valor de info badgeexcedendo um determinado número significativo.

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

Para enviar notificações da UIA após o aparecimento ou desaparecimento do info badge, 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 aspetos do info badge incluindo sua altura/largura/cor, etc., mas é importante que o info badge padrão siga nossas diretrizes de acessibilidade para tamanho e cor.

Criar um InfoBadge

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

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

Ponto

Para criar um InfoBadge do tipo ponto, utilize um controle InfoBadge padrão sem definir propriedades.

<InfoBadge />

Ícone

Para criar um ícone InfoBadge, 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 variável no back-end do seu aplicativo para que possa facilmente incrementar/diminuir e mostrar/ocultar o InfoBadge com base nesse valor específico.

Usando um InfoBadge no NavigationView

Se estiver a utilizar uma NavigationView na sua aplicação, recomendamos que utilize um InfoBadge na NavigationView para mostrar notificações e alertas em toda a aplicação. Para colocar o InfoBadge em um NavigationViewItem, atribua o objeto InfoBadge à propriedade NavigationViewItem.InfoBadge.

No modo Left-Expanded, o InfoBadge aparece alinhado à direita na borda do NavigationViewItem.

No modo Left-Compact, 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 diferentes tipos de InfoBadges em um NavigationView, como anexar um InfoBadge numérico a um NavigationViewItem e um ponto InfoBadge a outro NavigationViewItem no mesmo NavigationView.

Exemplo: incrementando um InfoBadge numérico em um NavigationView

Este 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 hierárquico NavigationView, com NavigationViewItems aninhado em outros NavigationViewItems, os itens pai seguirão os mesmos padrões de design/posicionamento descritos acima.

O NavigationViewItem pai e o filho NavigationViewItems 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 Top, onde o item de nível superior (pai) mostra um InfoBadge numérico. A aplicação definiu o InfoBadge do item pai para representar o que é exibido nos InfoBadges dos itens filho, visto que os itens filho não estão expandidos no momento (e, portanto, não estão visíveis).

Usando um InfoBadge em outro controle

Talvez você queira mostrar alertas ou notificações sobre elementos dentro do seu aplicativo que não sejam 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 em sua interface do usuário com outros controles.

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

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

Se colocar um InfoBadge dentro de outro controlo, como um Button ou um ListViewItem, ele provavelmente será cortado se for posicionado de modo a estender-se além da caixa delimitadora do controlo pai. Se o seu InfoBadge estiver dentro de outro controle, ele não deve ser posicionado além dos cantos da caixa delimitadora geral do controle.

Exemplo: Colocando um InfoBadge dentro de outro controle

Aqui está um botão que tem um InfoBadge colocado no canto superior direito, sobreposto ao conteúdo. Este exemplo também pode ser aplicado a muitos controles diferentes de Button – ele simplesmente mostra como colocar, posicionar e mostrar um InfoBadge dentro de outro controle 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>

Gerenciando um InfoBadge

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

Mostrar e ocultar um InfoBadge

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

Como acontece com outros UIElements, a configuração Visibility.Collapsed fará com que o InfoBadge não ocupe espaço no layout, portanto, pode fazer com que outros elementos se movam quando ele é mostrado e oculto.

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 está 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 do InfoBadge

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

Comportamento padrão

Se nem InfoBadge.Value nem InfoBadge.IconSource estiverem definidos, o InfoBadge assume como padrão mostrar 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 honrará 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) está 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 ícone para um InfoBadge do tipo ponto, certifique-se de que InfoBadge.Value está definido como -1 e InfoBadge.IconSource está definido como null.

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

UWP e WinUI 2

O InfoBadge para aplicativos UWP requer 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 WinUI 2, use um alias em XAML (usamos muxc) para representar as APIs da Biblioteca da Interface do Usuário do Windows incluídas em seu projeto. Consulte Introdução ao WinUI 2 para obter mais informações.

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

<muxc:InfoBadge/>

Artigos relacionados

• VistaDeNavegação