Share via

InfoBar

  • Artigo

O controle InfoBar se destina a exibir mensagens de status em todo o aplicativo para usuários que são altamente visíveis, mas também são não intrusivas. Há níveis de severidade internos para indicar facilmente o tipo de mensagem mostrado, bem como a opção de incluir a própria chamada para o botão de ação ou hiperlink. Como o InfoBar é embutido com outro conteúdo da interface do usuário, a opção está disponível para que o controle sempre fique visível ou seja descartado pelo usuário.

Um exemplo de um InfoBar no estado padrão com um botão e uma mensagem de fechamento

Esse é o controle correto?

Use um controle InfoBar quando um usuário deve ser informado de uma ação, reconhecê-la ou executá-la em um estado de aplicativo alterado. Por padrão, a notificação permanecerá na área de conteúdo até ser fechada pelo usuário, mas não interromperá necessariamente o fluxo do usuário.

Um InfoBar ocupará espaço no layout e se comportará como outros elementos filho. Ele não cobrirá outro conteúdo nem flutuará sobre ele.

Não use um controle InfoBar para confirmar uma ação de usuário ou responder diretamente a uma ação de usuário que não altera o estado do aplicativo, para alertas sensíveis ao tempo ou para mensagens não essenciais.

Comentários

Use um InfoBar fechado pelo usuário ou quando o status for resolvido para cenários que afetem diretamente a percepção ou a experiência do aplicativo.

Estes são alguns exemplos:

  • Conectividade com a Internet perdida
  • Erro durante o salvamento de um documento quando disparado automaticamente, não relacionado a uma ação do usuário específica
  • Nenhum microfone conectado na tentativa de gravação
  • A assinatura para o aplicativo expirou

Use um InfoBar fechado pelo usuário para cenários que afetem indiretamente a percepção ou a experiência do aplicativo

Estes são alguns exemplos:

  • Uma chamada começou a ser gravada
  • Atualização aplicada com o link para 'Notas sobre a Versão'
  • Os termos de serviço foram atualizados e exigem confirmação
  • Um backup em todo o aplicativo foi concluído de modo assíncrono com êxito
  • A assinatura do aplicativo está prestes a expirar

Quando um controle diferente deve ser usado?

Há alguns cenários em que um ContentDialog, Flyout ou TeachingTip pode ser mais adequado para uso.

  • Para cenários em que uma notificação persistente não é necessária, por exemplo, a exibição de informações no contexto de um elemento de interface do usuário específico, um Flyout é uma opção melhor.
  • Para cenários em que o aplicativo está confirmando uma ação do usuário, mostrando informações que o usuário deve ler, use um ContentDialog.
    • Além disso, se a alteração de um status para o aplicativo for tão grave que precise bloquear toda a capacidade adicional do usuário de interagir com o aplicativo, use um ContentDialog.
  • Para cenários em que uma notificação for um momento de ensino transitório, um TeachingTip é uma opção melhor.

Para obter mais informações sobre como escolher o controle de notificação certo, confira o artigo Caixas de Diálogo e Submenus.

Recomendações

Entrar e sair da usabilidade

Conteúdo piscante

O InfoBar não deve aparecer e desaparecer da exibição rapidamente para não piscar na tela. Evite visuais piscantes para pessoas com fotossensibilidade e para aprimorar a usabilidade do seu aplicativo.

Para InfoBars que entram e saem automaticamente da exibição por meio de uma condição de status do aplicativo, recomendamos que você inclua a lógica em seu aplicativo para impedir que o conteúdo apareça ou desapareça rapidamente ou várias vezes em sequência. No entanto, em geral, esse controle deve ser usado para mensagens de status de vida longa.

Atualizar o InfoBar

Quando o controle estiver aberto, as alterações feitas nas várias propriedades, como a atualização da mensagem ou de Severity, não gerarão um evento de notificação. Se você quiser informar os usuários que usam leitores de tela do conteúdo atualizado do InfoBar, recomendamos que você feche e reabra o controle para disparar o evento.

Conteúdo de deslocamento de mensagens embutidas

Para InfoBars que estão embutidos com outro conteúdo de interface do usuário, tenha em mente como o restante da página reagirá à adição do elemento de maneira responsiva.

InfoBars com uma altura significativa podem alterar drasticamente o layout dos outros elementos na página. Se o InfoBar aparecer ou desaparecer rapidamente, especialmente em sequência, o usuário poderá ficar confuso com o estado do visual que está sendo alterado.

Cor e ícone

Quando você personalizar a cor e o ícone fora dos níveis de Severity predefinidos, tenha em mente as expectativas do usuário para as conotações do conjunto de ícones e cores padrão.

Além disso, as cores de Severity predefinidas já foram projetadas para alterações de tema, modo de alto contraste, acessibilidade de confusão de cor e contraste com cores de primeiro plano. É recomendável usar essas cores quando possível e incluir a lógica personalizada em seu aplicativo para se adaptar aos vários estados de cor e recursos de acessibilidade.

Veja as diretrizes de UX para Ícones Padrão e Cor para verificar se sua mensagem é comunicada de modo claro e acessível para os usuários.

Severidade

Evite definir a propriedade Severity para uma notificação que não corresponda às informações comunicadas no Título, na Mensagem ou no conteúdo personalizado.

As informações que acompanham devem se comunicar com os itens a seguir para usar essa Severity.

  • Erro: um erro ou problema que ocorreu.
  • Aviso: uma condição que pode causar um problema no futuro.
  • Êxito: uma tarefa de execução longa e/ou em segundo plano foi concluída.
  • Default: informações gerais que exigem a atenção do usuário.

Os ícones e a cor não devem ser os únicos componentes da interface do usuário que têm um significado para sua notificação. O texto em Title e/ou Message da notificação deve ser incluído para exibir informações.

Mensagem

O texto em sua notificação não terá um comprimento constante em todos os idiomas. Para a propriedade Title e Message, isso poderá afetar se sua notificação será expandida para uma segunda linha. Recomendamos que você evite o posicionamento com base no tamanho da mensagem ou em outros elementos de interface do usuário definidos para um idioma específico.

A notificação seguirá o comportamento de espelhamento padrão quando localizado para/de idiomas que são RTL (da direita para a esquerda) ou LTR (da esquerda para a direita). O ícone só será espelhado se houver direcionalidade.

Veja as diretrizes para Ajustar o layout e as fontes e dar suporte a RTL para obter mais informações sobre a localização de texto em sua notificação.

UWP e WinUI 2

Importante

As informações e exemplos neste artigo são otimizados para aplicativos que usam o SDK do Aplicativo Windows e o WinUI 3, mas geralmente são aplicáveis a aplicativos UWP que usam o WinUI 2. Consulte a referência da API da UWP para obter informações e exemplos específicos da plataforma.

Esta seção contém informações necessárias para usar o controle em um aplicativo UWP ou WinUI 2.

O InfoBar para aplicativos UWP requer a Biblioteca de Interface do Usuário do Windows 2. Para obter mais informações, incluindo instruções de instalação, confira Biblioteca de interface do usuário do Windows. 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 à WinUI 2 para obter mais informações.

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

<muxc:InfoBar />

Criar um InfoBar

Abra o aplicativo Galeria do WinUI 3 e consulte o InfoBar em ação.

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

O XAML abaixo descreve um InfoBar embutido com o estilo padrão para uma notificação informativa. Uma barra de informações pode ser posicionada como qualquer outro elemento e seguirá o comportamento do layout base. Por exemplo, em um StackPanel vertical, o InfoBar será expandido horizontalmente para preencher a largura disponível.

Por padrão, o InfoBar não estará visível. Defina a propriedade IsOpen como true no XAML ou code-behind para exibir o InfoBar.

<InfoBar x:Name="UpdateAvailableNotification"
    Title="Update available."
    Message="Restart the application to apply the latest update.">
</InfoBar>

public MainPage()
{
    this.InitializeComponent();

    if(IsUpdateAvailable())
    {
        UpdateAvailableNotification.IsOpen = true;
    }
}

Um exemplo de um InfoBar no estado padrão com um botão e uma mensagem de fechamento

Usar níveis de severidade predefinidos

O tipo da barra de informações pode ser definido por meio da propriedade Severity para definir automaticamente uma cor de status consistente, um ícone e configurações de tecnologia adaptativa dependentes da criticalidade da notificação. Se nenhuma severidade for definida, o estilo informativo padrão será aplicado.

<InfoBar x:Name="SubscriptionExpiringNotification"
    Severity="Warning"
    Title="Your subscription is expiring in 3 days."
    Message="Renew your subscription to keep all functionality" />

Um exemplo de um InfoBar no estado Aviso com um botão e uma mensagem de fechamento

Fechamento programático no InfoBar

Um InfoBar pode ser fechado pelo usuário por meio do botão de fechamento ou programaticamente. Se a notificação precisar estar na exibição até que o status seja resolvido e você quiser remover a capacidade do usuário de fechar a barra de informações, você poderá definir a propriedade IsClosable como false.

O valor padrão dessa propriedade é true; nesse caso, o botão de fechamento está presente e assume a forma de um 'X'.

<InfoBar x:Name="NoInternetNotification"
    Severity="Error"
    Title="No Internet"
    Message="Reconnect to continue working."
    IsClosable="False" />

Um exemplo de um InfoBar em um estado Erro sem o botão de fechamento

Personalização: cor da tela de fundo e ícone

Fora dos níveis de severidade predefinidos, as propriedades Background e IconSource podem ser definidas para personalizar o ícone e a cor da tela de fundo. O InfoBar manterá as configurações de tecnologia adaptativa da severidade definida ou padrão se nenhuma tiver sido definida.

Uma cor da tela de fundo personalizada pode ser definida por meio da propriedade Background padrão e substituirá a cor definida por Severity. Tenha em mente a legibilidade e a acessibilidade do conteúdo quando definir sua cor.

Um ícone personalizado pode ser definido por meio da propriedade IconSource. Por padrão, um ícone ficará visível (pressupondo que o controle não esteja recolhido). Esse ícone pode ser removido definindo a propriedade IsIconVisible como false. Para ícones personalizados, o tamanho do ícone recomendado é 20px.

<InfoBar x:Name="CallRecordingNotification"
    Title="Recording started"
    Message="Your call has begun recording."
    Background="{StaticResource LavenderBackgroundBrush}">
    <InfoBar.IconSource>
        <SymbolIconSource Symbol="Phone" />
    </InfoBar.IconSource>
</InfoBar>

Um exemplo de um InfoBar no estado padrão com uma cor da tela de fundo personalizada, um ícone personalizado e um botão de fechamento

Adicionar um botão de fechamento

Um botão de ação adicional pode ser adicionado definindo o próprio botão que herda ButtonBase e definindo-o na propriedade ActionButton. O estilo personalizado será aplicado aos botões de ação do tipo Button e HyperlinkButton para fins de consistência e acessibilidade. Além da propriedade ActionButton, botões de ação adicionais podem ser adicionados por meio do conteúdo personalizado e aparecerão embaixo da mensagem.

<InfoBar x:Name="NoInternetNotification"
    Severity="Error"
    Title="No Internet"
    Message="Reconnect to continue working.">
    <InfoBar.ActionButton>
        <Button Content="Network Settings" Click="InternetInfoBarButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

Um exemplo de um InfoBar no estado Erro com uma mensagem de linha e um botão de ação

<InfoBar x:Name="TermsAndConditionsUpdatedNotification"
    Title="Terms and Conditions Updated"
    Message="Dismissal of this message implies agreement to the updated Terms and Conditions. Please view the changes on our website.">
    <InfoBar.ActionButton>
        <HyperlinkButton Content="Terms and Conditions Sep 2020"
            NavigateUri="https://www.example.com"
            Click="UpdateInfoBarHyperlinkButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

Um exemplo de um InfoBar com uma mensagem expandindo várias linhas e um hiperlink

Botão de ação alinhada à direita

Por padrão, o botão de ação é alinhado à esquerda no espaço disponível diretamente à direita da Mensagem. Opcionalmente, você pode definir HorizontalAlignment como "direita" no botão para alinhar esse botão para estar diretamente à esquerda do botão fechar na linha única, horizontal, layout.

<InfoBar x:Name="RightAlignedButtonNotification"
    Title="Title"
    Message="Essential app message">
    <InfoBar.ActionButton>
        <Button Content="Hello" HorizontalAlignment="Right"/>
    </InfoBar.ActionButton>
</InfoBar>

Um exemplo de um InfoBar com um botão de ação alinhado à direita

Encapsulamento do conteúdo

Se o conteúdo do InfoBar, exceto o conteúdo personalizado, não couber em uma linha horizontal, ele será disposto verticalmente. Title, Message e ActionButton, se presentes, serão exibidos em linhas separadas.

<InfoBar x:Name="BackupCompleteNotification"
    Severity="Success"
    Title="Backup complete: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    Message="All documents were uploaded successfully. Ultrices sagittis orci a scelerisque. Aliquet risus feugiat in ante metus dictum at tempor commodo. Auctor augue mauris augue neque gravida.">
    <InfoBar.ActionButton>
        <Button Content="Action"
            Click="BackupInfoBarButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

Um exemplo de um InfoBar no título de várias linhas do estado Êxito e um InfoBar da mensagem

Controle personalizado

O conteúdo XAML pode ser adicionado a um InfoBar usando a propriedade Content. Ele será exibido na própria linha embaixo do restante do conteúdo do controle. O InfoBar será expandido para que o conteúdo definido caiba.

<InfoBar x:Name="BackupInProgressNotification"
    Title="Backup in progress"
    Message="Your documents are being saved to the cloud"
    IsClosable="False">
    <InfoBar.Content>
        <ProgressBar IsIndeterminate="True" Margin="0,0,0,6" MaxWidth="200"/>
    </InfoBar.Content>
</InfoBar>

Um exemplo de um InfoBar no estado padrão com uma barra de progresso indeterminada

Estilo leve

Você pode modificar Style e ControlTemplate padrão para dar ao controle uma aparência exclusiva. Confira a seção Estilo de Controle e Modelo da documentação da API InfoBar para obter uma lista dos recursos de tema disponíveis.

Para obter mais informações, confira a seção de estilo leve do artigo Controles de estilo.

Por exemplo, a seguinte ação torna azul a cor da tela de fundo de todas as InfoBars informativas em uma página:

<Page.Resources>
    <x:SolidColorBrush x:Key="InfoBarInformationalSeverityBackgroundBrush" Color="LightBlue"></x:SolidColorBrush>
</Page.Resources>

Cancelar fechamento

O evento Closing pode ser usado para cancelar e/ou adiar o fechamento de um InfoBar. Isso pode ser usado para manter o InfoBar aberto ou dar tempo para que uma ação personalizada ocorra. Quando o fechamento de um InfoBar é cancelado, IsOpen voltará para true. Um fechamento programático também pode ser cancelado.

<InfoBar x:Name="UpdateAvailable"
    Title="Update Available"
    Message="Please close this tip to apply required security updates to this application"
    Closing="InfoBar_Closing">
</InfoBar>

public void InfoBar_Closing(InfoBar sender, InfoBarClosingEventArgs args)
{
    if (args.Reason == InfoBarCloseReason.CloseButton) 
    {
        if (!ApplyUpdates()) 
        {
            // could not apply updates - do not close
            args.Cancel = true;
        }
    }
}