Controle de classificação

  • Artigo

O controle de classificação permite que os usuários facilmente exibam e definam classificações que refletem o grau de satisfação com o conteúdo e os serviços. Os usuários podem interagir com o controle de classificação com toque, caneta, mouse, gamepad ou teclado. As diretrizes a seguir mostram como usar os recursos do controle de classificação para oferecer flexibilidade e personalização.

Exemplo de controle de classificação

Visão geral

O controle de classificação pode ser usado para inserir uma classificação ou feito somente leitura para exibir uma classificação.

Classificação editável com o valor de espaço reservado

Talvez a maneira mais comum de usar o controle de classificação seja exibir uma classificação média e ainda permitir que o usuário insira seu próprio valor de classificação. Nesse cenário, o controle de classificação é definido inicialmente para refletir a classificação média de satisfação de todos os usuários de determinado serviço ou tipo de conteúdo (como músicas, vídeos, livros etc.). Ele permanece nesse estado até que um usuário interaja com o controle para classificar um item individualmente. Essa interação altera o estado do controle de classificações para refletir a classificação do usuário em relação à satisfação pessoal.

Estado inicial de classificação média

Estado Inicial de Classificação Média

Representação da classificação do usuário depois de definida

Representação da Classificação do Usuário Depois de Definida

Modo de classificação somente leitura

Às vezes, você precisa mostrar classificações de conteúdo secundário, como o exibido no conteúdo recomendado ou ao exibir uma lista de comentários e suas classificações correspondentes. Nesse caso, o usuário não deve ser capaz de editar a classificação, então você pode deixar o controle como somente leitura. O modo somente leitura também é a maneira recomendada de usar o controle de classificações quando ele é usado em listas de conteúdo virtualizadas muito grandes, por motivos de desempenho e design da interface do usuário.

Lista longa somente leitura

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 RatingControl para aplicativos UWP é incluído 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.

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:RatingControl />

Criar um controle de classificação

Abra o aplicativo Galeria do WinUI 3 e consulte RatingControl 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

Controle de classificação editável

Esse código mostra como criar um controle de classificação editável com um valor de espaço reservado.

<RatingControl x:Name="MyRating" ValueChanged="RatingChanged"/>

private void RatingChanged(RatingControl sender, object args)
{
    if (sender.Value == null)
    {
        MyRating.Caption = "(" + SomeWebService.HowManyPreviousRatings() + ")";
    }
    else
    {
        MyRating.Caption = "Your rating";
    }
}

Controle de classificação somente leitura

Esse código mostra como criar um controle de classificação somente leitura.

<RatingControl IsReadOnly="True"/>

Funcionalidade adicional

O controle de classificações tem muitos recursos adicionais que podem ser usados. Detalhes para usar esses recursos podem ser encontrados em nossa documentação de referência. Esta é uma lista não abrangente de funcionalidade adicional:

  • Ótimo desempenho da longa lista
  • Dimensionamento compacto para cenários de interface do usuário restritos
  • Preenchimento e classificação de valor contínuo
  • Personalização de espaçamento
  • Desabilitar animações de crescimento
  • Personalização do número de estrelas

Obter o código de exemplo