Controlos de progresso

Um controle de progresso fornece feedback ao usuário de que uma operação de longa duração 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 quanto tempo de espera pode ser, dependendo do indicador usado.

Tipos de progresso

Existem dois controlos para mostrar ao utilizador que uma operação está em curso – através de uma ProgressBar ou através de um ProgressRing. Tanto o ProgressBar quanto o ProgressRing têm dois estados que comunicam se o usuário pode interagir com o aplicativo ou não.

• O estado determinado para a ProgressBar e a ProgressRing mostra a percentagem concluída 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 de ProgressBar mostra que uma operação está em andamento, não bloqueia a interação do usuário com o aplicativo e seu tempo de conclusão é 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 seu tempo de conclusão é desconhecido.

Além disso, um controle de progresso é de apenas leitura e não interativo. O que significa que o usuário não pode invocar ou usar esses controles diretamente.

Controlo	Ecrã
Barra de progresso indeterminada
Barra de Progresso Determinada
Anel de Progresso Indeterminado
Anel de Progresso Determinado

Será este o controlo correto?

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

"Barra de progresso" (ProgressBar)

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

  Use uma barra de progresso determinada e atualize a percentagem ou o valor de acordo.

• O usuário pode continuar sem ter que monitorar o progresso da operação?

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

• Palavras-chave

  Se a tua operação estiver relacionada com estas palavras-chave, ou se estiveres a mostrar texto ao lado da operação de progresso que corresponde a estas palavras-chave, considera usar uma barra de progresso.

  • A carregar...
  • Recuperação
  • A trabalhar...

ProgressRing

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

  Se uma operação requer que toda a interação (ou uma grande parte dela) com a aplicação aguarde a sua conclusão, então o círculo de progresso indeterminado (ProgressRing) é a melhor escolha.

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

  Use um ProgressRing determinado se quiser que o visual seja um anel em vez de uma barra e atualize a porcentagem ou o valor de acordo.

• O aplicativo está esperando que o usuário conclua uma tarefa?

  Em caso afirmativo, use um anel de progresso indeterminado (ProgressRing), pois deve indicar um tempo de espera desconhecido para o utilizador.

• Palavras-chave

  Se a tua operação girar em torno destas palavras-chave, ou se estiveres a mostrar texto ao lado da operação de progresso que corresponda a estas palavras-chave, considera o uso de um anel de progresso.

  • Refrescante
  • A iniciar sessão...
  • A ligar...

Não é necessária qualquer indicação de progresso

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

  Por exemplo, se o aplicativo está baixando algo em segundo plano e o usuário não iniciou o download, o usuário não precisa necessariamente saber sobre isso.

• A operação é uma atividade em segundo plano que não bloqueia a atividade do usuário e é de interesse mínimo (mas ainda algum) para o usuário?

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

• O usuário só se preocupa com a conclusão da operação?

  Às vezes, é melhor mostrar um aviso apenas quando a operação for concluída, ou dar um 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 esses diferentes controles de progresso:

ProgressBar - Determinado

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

ProgressBar - Indeterminado

Quando não se sabe quanto tempo a operação levará, use uma ProgressBar indeterminada. Barras de progresso indeterminadas também são úteis ao preencher uma lista virtualizada, criando uma transição visual suave entre uma barra de progresso indeterminada e uma determinada.

• A operação está em uma coleção virtualizada?

  Em caso afirmativo, não coloque um indicador de progresso em cada item da lista tal como aparecem. Em vez disso, use uma ProgressBar e coloque-a no topo na coleção de itens que estão a ser carregados, para mostrar que os itens estão a ser obtidos.

ProgressRing - Indeterminado

O ProgressRing indeterminado é usado quando qualquer interação adicional do usuário com o aplicativo é interrompida ou o aplicativo está aguardando a entrada do usuário para continuar. O "entrar..." exemplo acima é um cenário perfeito para o ProgressRing, o usuário não pode continuar usando o aplicativo até que o sinal seja concluído.

ProgressRing - Determinado

Quando a duração da operação é conhecida e o anel visual é desejado, ao instalar, baixar, configurar, etc; um determinado ProgressRing é o melhor.

Criar um controle de progresso

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

Ambos os controlos de progresso são bastante simples; Mas algumas características visuais dos controles não são óbvias para personalizar.

Dimensionamento do ProgressRing

O ProgressRing pode ser dimensionado como quiser, mas só pode ser tão pequeno como 20x20epx. Para redimensionar um ProgressRing, tem de definir a sua altura e largura. Se apenas altura ou largura forem definidas, o controle assumirá o tamanho mínimo (20x20epx) – inversamente, se a altura e a largura forem definidas para dois tamanhos diferentes, o menor dos tamanhos será assumido. Para garantir que o seu ProgressRing está correto para as suas necessidades, defina a altura e a largura para o mesmo valor:

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

Para tornar seu ProgressRing visível e animar, 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 coloração 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"/>

Alterar a cor de primeiro plano do ProgressRing alterará a cor de preenchimento do anel. A propriedade de primeiro plano para a 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.

Mostrar um cursor de espera

Às vezes, é melhor apenas mostrar um breve cursor de espera, quando o aplicativo ou operação precisa de tempo para pensar, e você precisa indicar ao usuário que o aplicativo ou a área onde o cursor de espera está visível não deve ser interagido até que o cursor de espera desapareça.

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

UWP e WinUI 2

Os controles de progresso para aplicativos UWP são incluídos como parte do WinUI 2. Para obter mais informações, incluindo instruções de instalação, consulte WinUI 2. As APIs para esse controle existem nos namespaces Windows.UI.Xaml.Controls e Microsoft.UI.Xaml.Controls .

Recomendamos usar a WinUI 2 mais recente para obter os estilos, modelos e recursos mais atuais para todos os controles. WinUI 2.2 ou posterior inclui um novo modelo para este controle que usa cantos arredondados. Consulte Raio de cantopara obter mais informações.

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

Artigos relacionados

• Classe ProgressBar
• Classe ProgressRing