Barra de informações

O controle InfoBar é para exibir mensagens de status em todo o aplicativo para usuários que são altamente visíveis, mas não intrusivos. Existem níveis de gravidade incorporados para indicar facilmente o tipo de mensagem apresentada, bem como a opção de incluir o seu próprio apelo à ação ou botão de hiperligação. Como a Barra de Informações está alinhada com outro conteúdo da interface do usuário, a opção existe para que o controle esteja sempre visível ou descartado pelo usuário.

Será este o controlo correto?

Use um controle InfoBar quando um usuário deve ser informado, reconhecer ou tomar medidas 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 necessariamente interromperá o fluxo do usuário.

Uma barra de informações ocupará espaço no seu layout e comportar-se-á como qualquer outro elemento filho. Ele não vai encobrir outro conteúdo ou flutuar em cima dele.

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

Observações

Use uma Barra de Informações fechada pelo utilizador ou quando o estado for resolvido em cenários que directamente afectam a perceção ou a experiência da aplicação.

Eis alguns exemplos:

• Perda de conectividade com a Internet
• Erro ao salvar um documento quando acionado automaticamente, não relacionado a uma ação específica do usuário
• Nenhum microfone conectado ao tentar gravar
• A subscrição da aplicação expirou

Use uma Barra de Informações fechada pelo usuário para cenários que indiretamente afetar a perceção ou a experiência do aplicativo

Eis alguns exemplos:

• Uma chamada começou a ser gravada
• Atualização aplicada com link para 'Notas de Lançamento'
• Os termos de serviço foram atualizados e requerem confirmação
• Um backup em todo o aplicativo foi concluído com êxito e de forma assíncrona
• A subscrição da aplicação está perto de expirar

Quando deve ser utilizado um controlo diferente?

Há alguns cenários em que um ContentDialog, Flyoutou Dica de Ensino pode ser mais adequado para usar.

• Para cenários em que uma notificação persistente não é necessária, como ao exibir informações no contexto de um elemento específico da interface do utilizador, um menu volante é 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, usando um ContentDialog.
  • Além disso, se uma alteração de status no 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 é um momento de ensino transitório, uma DicaDeEnsino é uma opção melhor.

Para saber mais sobre como escolher o controle de notificação correto, veja o artigo Caixas de Diálogo e Submenus.

Recommendations

Entrar e sair da usabilidade

Conteúdo intermitente

A Barra de Informações não deve aparecer e desaparecer da visualização rapidamente para evitar piscar na tela. Evite imagens intermitentes para pessoas com fotossensibilidade e melhore a usabilidade do seu aplicativo.

Para as Barras de Informações que entram e saem automaticamente da vista através de uma condição de estado da aplicação, recomendamos que inclua lógica na sua aplicação para impedir que o conteúdo apareça ou desapareça rapidamente ou várias vezes seguidas. No entanto, em geral, esse controle deve ser usado para mensagens de status de longa duração.

Atualizando a barra de informações

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

Mensagens embutidas compensando conteúdo

Para InfoBars que estão alinhadas com outro conteúdo da interface do usuário, lembre-se de como o restante da página reagirá responsivamente à adição do elemento.

InfoBars com uma altura substancial podem alterar drasticamente o layout dos outros elementos na página. Se a Barra de Informações aparecer ou desaparecer rapidamente, especialmente sucessivamente, o usuário pode ser confundido com a mudança de estado visual.

Cor e ícone

Ao personalizar a cor e o ícone fora dos níveis de gravidade 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 gravidade predefinidas já foram projetadas para alterações de tema, modo de alto contraste, acessibilidade de confusão de cores e contraste com cores de primeiro plano. Recomendamos usar essas cores quando possível e incluir lógica personalizada em seu aplicativo para se adaptar aos vários estados de cores e recursos de acessibilidade.

Consulte as orientações de UX para de ícones padrão e de cores para garantir que sua mensagem seja comunicada de forma clara e acessível aos usuários.

Severity

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

As informações que acompanham devem ter por objetivo comunicar os seguintes elementos para utilizar essa gravidade.

• Erro: Ocorreu um erro ou problema.
• Aviso: Uma condição que pode causar um problema no futuro.
• Sucesso: Uma tarefa de longa duração e/ou em segundo plano foi concluída.
• Padrão: informações gerais que requerem a atenção do usuário.

Ícones e cores não devem ser os únicos componentes da interface do usuário que significam significado para sua notificação. O texto no Título e/ou Mensagem da notificação deve ser incluído para exibir as informações.

Message

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

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

Consulte as orientações para Ajustar layout e fontes e suporte RTL para obter mais informações sobre a localização de texto na sua notificação.

Criar uma barra de informações

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

O XAML abaixo descreve uma Barra de Informações embutida com o estilo padrão para uma notificação informativa. Uma barra de informações pode ser colocada como qualquer outro elemento e seguirá o comportamento do layout básico. Por exemplo, em um StackPanel vertical, a Barra de Informações será expandida horizontalmente para preencher a largura disponível.

Por padrão, a Barra de Informações não estará visível. Defina a propriedade IsOpen como true no XAML ou no código subjacente para exibir a 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;
    }
}

Usando 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, ícone e configurações de tecnologia assistiva, dependendo da criticidade 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" />

Fechamento programático na InfoBar

Uma InfoBar pode ser fechada pelo utilizador através do botão Fechar ou programaticamente. Se for necessário que a notificação fique em exibição até que o status seja resolvido e você quiser remover a capacidade de o usuário fechar a barra de informações, você pode definir a propriedade IsClosable como false.

O valor padrão dessa propriedade é true, caso em que o botão fechar 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" />

Personalização: Cor de fundo e ícone

Fora dos níveis de gravidade predefinidos, as propriedades Background e IconSource podem ser definidas para personalizar o ícone e a cor do plano de fundo. A Barra de Informações manterá as configurações de tecnologia assistiva da gravidade definida ou padrão se nenhuma tiver sido definida.

Uma cor de plano de fundo personalizada pode ser definida por meio da propriedade Background padrão e substituirá a cor definida por Severidade. Tenha em mente a legibilidade e acessibilidade do conteúdo ao definir sua própria cor.

Um ícone personalizado pode ser definido através da propriedade IconSource. Por padrão, um ícone ficará visível (supondo que o controle não esteja recolhido). Esse ícone pode ser removido definindo a propriedade IsIconVisible como false. Para ícones personalizados, o tamanho de í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>

Adicionar um botão de ação

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

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

Botão de ação alinhado à 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" em seu botão para alinhar esse botão para ficar diretamente à esquerda do botão fechar no layout de linha única, horizontal.

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

Encapsulamento de conteúdo

Se o conteúdo da Barra de Informações, excluindo o conteúdo personalizado, não puder caber em uma única linha horizontal, eles serão dispostos verticalmente. O Título, a Mensagem e o ActionButton — se presentes — aparecerão 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>

Conteúdo personalizado

O conteúdo XAML pode ser adicionado a uma InfoBar usando a propriedade Content. Ele aparecerá em sua própria linha abaixo do restante do conteúdo de controle. A Barra de Informações será expandida para se ajustar ao conteúdo definido.

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

Estilo leve

Você pode modificar o padrão Style e ControlTemplate para dar ao controle uma aparência exclusiva. Consulte a seção Control Style and Template dos documentos da API da InfoBar para obter uma lista dos recursos de tema disponíveis.

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

Por exemplo, o seguinte faz com que a cor do plano de fundo de todas as InfoBars informativas em uma página seja azul:

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

Cancelar encerramento

O evento de Encerramento pode ser usado para cancelar e/ou adiar o fechamento de uma InfoBar. Isso pode ser usado para manter a Barra de Informações aberta ou dar tempo para que uma ação personalizada ocorra. Quando o fechamento de uma InfoBar for cancelado, o IsOpen voltará ao 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;
        }
    }
}

UWP e WinUI 2

A Barra de Informações 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:InfoBar />

Artigos relacionados

• Caixas de diálogo e submenus