Sliders

Um controle deslizante é um controle que permite ao usuário selecionar a partir de um intervalo de valores movendo um controle de polegar ao longo de uma faixa.

Será este o controlo correto?

Use um controle deslizante quando quiser que os usuários possam definir valores contíguos definidos (como volume ou brilho) ou um intervalo de valores discretos (como configurações de resolução de tela).

Um controle deslizante é uma boa opção quando você sabe que os usuários pensam no valor como uma quantidade relativa, não como um valor numérico. Por exemplo, os usuários pensam em definir o volume de áudio como baixo ou médio, não em definir o valor como 2 ou 5.

Não use um controle deslizante para configurações binárias. Em vez disso, use um interruptor de alternância .

Aqui estão alguns fatores adicionais a serem considerados ao decidir se deseja usar um controle deslizante:

• A configuração parece ser uma quantidade relativa? Caso contrário, use os botões de opção ou uma caixa de listagem .
• A configuração é um valor numérico exato e conhecido? Em caso afirmativo, use uma caixa de texto numérica .
• Um usuário se beneficiaria de feedback instantâneo sobre o efeito das alterações de configuração? Nesse caso, utilize um controlo deslizante. Por exemplo, os usuários podem escolher uma cor mais facilmente, vendo imediatamente o efeito das alterações nos valores de matiz, saturação ou luminosidade.
• A configuração tem um intervalo de quatro ou mais valores? Caso contrário, use os botões de opção .
• O usuário pode alterar o valor? Os controles deslizantes são para interação do usuário. Se um utilizador não puder alterar o valor, use texto de leitura apenas.

Se você estiver decidindo entre um controle deslizante e uma caixa de texto numérica, use uma caixa de texto numérica se:

• O espaço na tela é apertado.
• É provável que o usuário prefira usar o teclado.

Use um controle deslizante se:

• Os usuários se beneficiarão do feedback instantâneo.

Recommendations

• Dimensione o controle para que os usuários possam definir facilmente o valor desejado. Para configurações com valores discretos, certifique-se de que o usuário possa selecionar facilmente qualquer valor usando o mouse. Certifique-se de que os pontos finais do controle deslizante sempre se encaixam dentro dos limites de uma exibição.
• Dê feedback imediato enquanto ou depois de um usuário fazer uma seleção (quando prático). Por exemplo, o controle de volume do Windows emite um sinal sonoro para indicar o volume de áudio selecionado.
• Use rótulos para mostrar o intervalo de valores. Exceção: Se o controle deslizante estiver orientado verticalmente e o rótulo superior for Máximo, Alto, Mais ou equivalente, você poderá omitir os outros rótulos porque o significado é claro.
• Desative todos os rótulos associados ou comentários visuais ao desativar o controle deslizante.
• Considere a direção do texto ao definir a direção do fluxo e/ou a orientação do controle deslizante. O script flui da esquerda para a direita em alguns idiomas, e da direita para a esquerda em outros.
• Não use um controle deslizante como indicador de progresso.
• Não altere o tamanho do polegar deslizante do tamanho padrão.
• Não crie um controle deslizante contínuo se o intervalo de valores for grande e os usuários provavelmente selecionarão um dos vários valores representativos do intervalo. Em vez disso, use esses valores como as únicas etapas permitidas. Por exemplo, se o valor de tempo pode ser de até 1 mês, mas os usuários só precisam escolher entre 1 minuto, 1 hora, 1 dia ou 1 mês, crie um controle deslizante com apenas 4 pontos de etapa.

Orientações de utilização adicionais

Escolher o layout certo: horizontal ou vertical

Você pode orientar seu controle deslizante horizontal ou verticalmente. Use estas diretrizes para determinar qual layout usar.

• Use uma orientação natural. Por exemplo, se o controle deslizante representar um valor real que normalmente é mostrado verticalmente (como temperatura), use uma orientação vertical.
• Se o controle for usado para buscar dentro da mídia, como em um aplicativo de vídeo, use uma orientação horizontal.
• Ao usar um controlo deslizante numa página que pode ser deslizada numa direção (horizontal ou vertical), use uma orientação diferente para o controlo deslizante do que a direção do movimento de deslizar. Caso contrário, os usuários podem passar o dedo no controle deslizante e alterar seu valor acidentalmente quando tentarem mover a página.
• Se você ainda não tiver certeza de qual orientação usar, use a que melhor se adapta ao layout da página.

Direção do alcance

A direção do intervalo é aquela em que se move o slider ao deslocá-lo do valor atual para o valor máximo.

• Para controle deslizante vertical, coloque o maior valor na parte superior do controle deslizante, independentemente da direção de leitura. Por exemplo, para um controle deslizante de volume, sempre coloque a configuração de volume máximo na parte superior do controle deslizante. Para outros tipos de valores (como dias da semana), siga a direção de leitura da página.
• Para estilos horizontais, coloque o valor inferior no lado esquerdo do controle deslizante para o layout de página da esquerda para a direita e no lado direito para o layout de página da direita para a esquerda.
• A única exceção à diretriz anterior é para barras de busca de mídia: sempre coloque o valor mais baixo no lado esquerdo do controle deslizante.

Passos e marcas de escala

• Use pontos de etapa se não quiser que o controle deslizante permita valores arbitrários entre min e max. Por exemplo, se você usar um controle deslizante para especificar o número de ingressos de cinema a serem comprados, não permita valores de ponto flutuante. Dê-lhe um valor de passo de 1.
• Se você especificar etapas (também conhecidas como pontos de ajuste), verifique se a etapa final está alinhada ao valor máximo do controle deslizante.
• Use marcas de escala quando quiser mostrar aos usuários a localização de valores principais ou significativos. Por exemplo, um controle deslizante que controla um zoom pode ter marcas de referência para 50%, 100%e 200%.
• Mostrar marcas de escala quando os usuários precisarem saber o valor aproximado da configuração.
• Mostrar marcas de escala e um rótulo de valor quando os usuários precisarem saber o valor exato da configuração que escolherem, sem interagir com o controle. Caso contrário, podem usar o tooltip de valor para ver o valor exato.
• Sempre mostre marcas de escala quando os pontos de referência não forem evidentes. Por exemplo, se o controle deslizante tiver 200 pixels de largura e 200 pontos de ajuste, você poderá ocultar as marcas de escala porque os usuários não notarão o comportamento de ajuste. Mas se houver apenas 10 pontos de encaixe, mostre os traços de gradação.

Rótulos / Etiquetas

• Etiquetas deslizantes

  O rótulo do controle deslizante indica para que o controle deslizante é usado.

  • Use um rótulo sem pontuação final (esta é a convenção para todos os rótulos de controle).
  • Posicione os rótulos acima do controle deslizante quando o controle deslizante estiver em um formato que coloque a maioria dos rótulos acima dos controles.
  • Alinhe os rótulos para os lados quando a barra deslizante estiver num formato que coloque a maioria dos seus rótulos para o lado dos respetivos controles.
  • Evite colocar rótulos abaixo do controle deslizante porque o dedo do usuário pode ocluir o rótulo quando o usuário tocar no controle deslizante.

• Rótulos de intervalo

  Os rótulos de intervalo, ou preenchimento, descrevem os valores mínimo e máximo do controle deslizante.

  • Rotule as duas extremidades do intervalo deslizante, a menos que uma orientação vertical torne isso desnecessário.
  • Utilize apenas uma palavra, se possível, para cada rótulo.
  • Não use pontuação final.
  • Certifique-se de que estes rótulos são descritivos e paralelos. Exemplos: Máximo/Mínimo, Mais/Menos, Baixo/Alto, Suave/Alto.

• Rótulos de valor

  Um rótulo de valor exibe o valor atual do controle deslizante.

  • Se você precisar de um rótulo de valor, exiba-o abaixo do controle deslizante.
  • Centralizar o texto relativo ao controle e incluir as unidades (como pixels).
  • Como o polegar do controle deslizante é coberto durante o deslizamento, considere mostrar o valor atual de uma forma diferente, com um rótulo ou outro visual. Um controle deslizante definindo o tamanho do texto pode renderizar algum texto de exemplo do tamanho certo ao lado do controle deslizante.

Aparência e interação

Um controle deslizante é composto por uma faixa e um botão. A faixa é uma barra (que pode opcionalmente mostrar vários estilos de marcas de escala) representativa do intervalo de valores passíveis de inserção. O polegar é um seletor que o utilizador pode posicionar tocando na pista ou deslizando para trás e para a frente sobre ela.

Um controle deslizante tem um alvo de toque grande. Para manter a acessibilidade ao toque, um controle deslizante deve ser posicionado longe o suficiente da borda da tela.

Ao criar um controle deslizante personalizado, considere maneiras de apresentar todas as informações necessárias ao usuário com o mínimo de confusão possível. Use um rótulo de valor se um usuário precisa conhecer as unidades para entender a configuração; encontrar formas criativas de representar graficamente estes valores. Um controle deslizante que controla o volume, por exemplo, pode exibir um gráfico de alto-falante sem ondas sonoras na extremidade mínima do controle deslizante e um gráfico de alto-falante com ondas sonoras na extremidade máxima.

Examples

Um deslizador com marcas em intervalos de 10 pontos de 0 a 100.

Criar um controle deslizante

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

Veja como criar um controle deslizante em XAML.

<Slider x:Name="volumeSlider" Header="Volume" Width="200"
        ValueChanged="Slider_ValueChanged"/>

Veja como criar um controle deslizante no código.

Slider volumeSlider = new Slider();
volumeSlider.Header = "Volume";
volumeSlider.Width = 200;
volumeSlider.ValueChanged += Slider_ValueChanged;

// Add the slider to a parent container in the visual tree.
stackPanel1.Children.Add(volumeSlider);

Você obtém e define o valor do controlo deslizante a partir da propriedade Valor. Para responder a alterações de valor, pode utilizar a associação de dados para associar à propriedade Value ou manipular o evento ValueChanged.

private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    Slider slider = sender as Slider;
    if (slider != null)
    {
        media.Volume = slider.Value;
    }
}

UWP e WinUI 2

As APIs para esse controle existem no namespace Windows.UI.Xaml.Controls .

Recomendamos usar a WinUI 2 mais recente para obter os estilos e modelos 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.

Tópicos relacionados

• Interruptores de comutação
• Classe Slider