Controles de progresso

  • Artigo

Um controle de progresso oferece feedback ao usuário que uma operação de execução longa está em andamento. Isso pode significar que o usuário não pode interagir com o aplicativo quando o indicador de progresso está visível e também pode indicar a duração do tempo de espera, dependendo do indicador usado.

Tipo de progresso

Há dois controles para mostrar ao usuário que uma operação está em andamento – um ProgressBar ou um ProgressRing. ProgressBar e ProgressRing têm dois estados que se comunicarão se o usuário puder interagir com o aplicativo ou não.

  • O estado determinado de ProgressBar e ProgressRing mostra o percentual de conclusão de uma tarefa. Isso deve ser usado durante uma operação cuja duração é conhecida, mas seu progresso não deve bloquear a interação do usuário com o aplicativo.
  • O estado indeterminado do ProgressBar mostra que uma operação está em andamento, não bloqueia a interação do usuário com o aplicativo e o tempo de conclusão dela é desconhecido.
  • O estado indeterminado do ProgressRing mostra que uma operação está em andamento, bloqueia a interação do usuário com o aplicativo e o tempo de conclusão dela é desconhecido.

Além disso, um controle de progresso é somente leitura, não é interativo. Isso significa que o usuário não pode invocar nem usar esses controles diretamente.

Control Monitor
ProgressBar indeterminado ProgressBar indeterminado
ProgressBar determinado ProgressBar determinado
ProgressRing indeterminado Estado ProgressRing indeterminado
ProgressRing determinado Estado ProgressRing determinado

Esse é o controle correto?

Nem sempre é óbvio qual controle ou estado (determinado vs indeterminado) usar ao tentar mostrar que algo está acontecendo. Às vezes, uma tarefa é tão óbvia que não requer um controle de progresso e, em algumas ocasiões, mesmo se um controle de progresso é usado, uma linha de texto ainda é necessária para explicar ao usuário qual operação está em andamento.

ProgressBar

  • O controle tem uma duração definida ou um fim previsível?

    Use um ProgressBar determinado e, em seguida, atualize a porcentagem ou o valor corretamente.

  • O usuário pode continuar sem precisar monitorar o andamento da operação?

    Quando ProgressBar está em uso, a interação é não modal, o que geralmente significa que o usuário não está bloqueado pela conclusão da operação e pode continuar a usar o aplicativo de outras maneiras, até que esse aspecto seja concluído.

  • Palavras-chave

    Caso sua operação se enquadre nestas palavras-chave, ou você esteja mostrando texto junto com a operação de progresso que corresponde a estas palavras-chave, considere o uso de um ProgressBar:

    • Carregando...
    • Recuperando
    • Trabalhando...

ProgressRing

  • A operação fará com que o usuário espere para continuar?

    Se uma operação exige que toda a interação com o aplicativo ou uma parte dela aguarde até que ela seja concluída, o ProgressRing indeterminado é a melhor opção.

    • O controle tem uma duração definida ou um fim previsível?

    Use um ProgressRing determinado se você quiser que o visual seja um anel, em vez de uma barra, e atualize o percentual ou o valor de acordo.

  • O aplicativo está aguardando que o usuário execute uma tarefa?

    Em caso afirmativo, use um ProgressRing indeterminado, pois ele indica um tempo de espera desconhecido para o usuário.

  • Palavras-chave

    Caso sua operação se enquadre nestas palavras-chave, ou você esteja mostrando texto junto com a operação de progresso que corresponde a estas palavras-chave, considere o uso de um ProgressRing:

    • Atualizando
    • Entrando...
    • Conectando...

Nenhuma indicação de progresso necessária

  • O usuário precisa saber que algo está acontecendo?

    Por exemplo, se o aplicativo está baixando alguma coisa em segundo plano, e o usuário não iniciou o download, o usuário não precisa necessariamente saber disso.

  • A operação é uma atividade em tela de fundo que não bloqueia a atividade do usuário e é de interesse mínimo (porém existente) para o usuário?

    Use texto quando seu aplicativo estiver executando tarefas que não precisam estar visíveis o tempo todo, mas cujo status você ainda precisa mostrar.

  • Importa ao usuário apenas a conclusão da operação?

    Às vezes, é melhor mostrar um aviso somente quando a operação é concluída ou fornecer um sinal visual de que a operação foi concluída imediatamente e executar os toques finais em segundo plano.

Práticas recomendadas de controles de progresso

Às vezes, é melhor ver algumas representações visuais de quando e onde usar estes diferentes controles de progresso:

ProgressBar - determinado

Exemplo de ProgressBar determinado

O primeiro exemplo é o ProgressBar determinado. Quando a duração da operação é conhecida, ao instalar, baixar, configurar, etc., é melhor usar um ProgressBar determinado.

ProgressBar - indeterminado

Exemplo de ProgressBar indeterminado

Quando não se sabe o tempo que operação levará, use um ProgressBar indeterminado. ProgressBars indeterminados também são bons no preenchimento de uma lista virtualizada e na criação de uma transição visual suave entre um ProgressBar indeterminado para um determinado.

  • A operação é em uma coleção virtualizada?

    Em caso afirmativo, não coloque um indicador de progresso em cada item da lista conforme eles aparecem. Em vez disso, use um ProgressBar e coloque-o na parte superior da coleção de itens que estão sendo carregados, para mostrar que os itens estão sendo procurados.

ProgressRing - indeterminado

Exemplo de ProgressRing indeterminado

O ProgressRing indeterminado é usado quando toda a interação do usuário com o aplicativo é interrompida ou quando o aplicativo está esperando a entrada do usuário para continuar. O exemplo acima, "Entrando...", é um cenário perfeito para o ProgressRing, e o usuário não pode continuar a usar o aplicativo até que a entrada seja concluída.

ProgressRing – determinado

Exemplo determinado de ProgressRing

Quando a duração da operação é conhecida e o visual do anel é desejado, durante a instalação, o download, a configuração etc., é melhor usar um ProgressRing determinado.

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.

Os controles de progresso para aplicativos UWP são incluídos como parte da 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 nos namespaces Windows.UI.Xaml.Controls e Microsoft.UI.Xaml.Controls.

É recomendável usar a WinUI 2 mais recente para obter os estilos, modelos e recursos mais atuais para todos os controles. O WinUI 2.2 ou posterior inclui um novo modelo para esse controle que usa cantos arredondados. Para obter mais informações, confira Raio de canto.

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:ProgressBar />
<muxc:ProgressRing />

Criar um controle de progresso

Abra o aplicativo Galeria do WinUI 3 e consulte ProgressBar ou ProgressRing.

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

Os dois controles de progresso são bastante simples, mas alguns recursos visuais dos controles não são óbvios de personalizar.

Dimensionando o ProgressRing

O ProgressRing pode ter o tamanho que você quiser, mas o mínimo deve ser 20x20epx. Para redimensionar um ProgressRing, é necessário definir sua altura e largura. Se apenas a largura ou a altura for definida, o controle assumirá o tamanho mínimo (20x20epx) – por outro lado, se a altura e a largura forem definidas como dois tamanhos diferentes, será considerado o tamanho menor. Para garantir que o ProgressRing esteja correto para suas necessidades, defina a altura e a largura como o mesmo valor:

<ProgressRing Height="100" Width="100"/>

Para tornar seu ProgressRing visível e animá-lo, você deve definir a propriedade IsActive como true:

<ProgressRing IsActive="True" Height="100" Width="100"/>

progressRing.IsActive = true;

Colorindo os controles de progresso

Por padrão, a cor principal dos controles de progresso é definida como a cor de destaque do sistema. Para substituir esse pincel, basta alterar a propriedade de primeiro plano em qualquer um dos controles.

<ProgressRing IsActive="True" Height="100" Width="100" Foreground="Blue"/>
<ProgressBar Width="100" Foreground="Green"/>

A alteração da cor de primeiro plano do ProgressRing vai alterar a cor de preenchimento do anel. A propriedade de primeiro plano do ProgressBar alterará a cor de preenchimento da barra – para alterar a parte não preenchida da barra, basta substituir a propriedade de plano de fundo.

Mostrando um cursor de espera

Às vezes, é melhor mostrar apenas um breve cursor de espera quando o aplicativo ou a operação precisa de tempo para pensar, e você precisa indicar ao usuário que ele não deverá interagir com o aplicativo ou a área onde o cursor de espera estiver visível até o cursor de espera desaparecer.

Window.Current.CoreWindow.PointerCursor = new Windows.UI.Core.CoreCursor(Windows.UI.Core.CoreCursorType.Wait, 10);

Obter o código de exemplo