Compartir a través de

Control Calificación

  • Artículo

El control de clasificación permite a los usuarios ver y establecer clasificaciones que reflejan el grado de satisfacción con el contenido y los servicios. Los usuarios pueden interactuar con el control de clasificación mediante la función táctil, el lápiz, el mouse, el controlador para juegos y el teclado. Las siguientes instrucciones muestran cómo usar las características del control de clasificación para proporcionar flexibilidad y personalización.

Ejemplo de control de clasificación

Información general

El control de clasificación se puede usar para escribir una clasificación o hacer que sea de solo lectura para mostrar una clasificación.

Clasificación editable con el valor del marcador de posición

Quizás la manera más habitual de usar el control de clasificación es mostrar una clasificación promedio mientras se permite al usuario escribir su propio valor de clasificación. En este escenario, el control de clasificación se establece inicialmente para reflejar el promedio de clasificación de la satisfacción de todos los usuarios de un servicio concreto o el tipo de contenido (por ejemplo, música, vídeos, libros, etc.). Permanece en este estado hasta que un usuario interactúa con el control con el objetivo de clasificar un elemento de manera individual. Esta interacción cambia el estado del control de clasificación para reflejar la clasificación de satisfacción personal del usuario.

Estado de la clasificación promedio inicial

Estado de la clasificación promedio inicial

Representación de la clasificación de usuario una vez establecida

Representación de la clasificación de usuario una vez establecida

Modo de clasificación de solo lectura

A veces es necesario mostrar clasificaciones del contenido secundario, por ejemplo, el que se muestra en contenido recomendado o al mostrar una lista de comentarios y sus clasificaciones correspondientes. En este caso, el usuario no debe poder editar la clasificación, por lo que puedes hacer que el control sea de solo lectura. El modo de solo lectura también es la manera recomendada de usar el control de clasificación cuando se usa en listas virtualizadas de contenido muy grandes, tanto por motivos de diseño de la interfaz de usuario como de rendimiento.

Lista larga de solo lectura

UWP y WinUI 2

Importante

La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulte el material de referencia de las API de UWP para obtener información y ejemplos específicos de la plataforma.

Esta sección contiene información que necesita para usar el control en una aplicación para UWP o WinUI 2.

RatingControl para aplicaciones para UWP se incluye como parte de WinUI 2. Para obtener más información e instrucciones sobre la instalación, consulta el artículo WinUI 2. Hay API para este control en los espacios de nombres Windows.UI.Xaml.Controls y Microsoft.UI.Xaml.Controls.

Se recomienda usar la versión más reciente de WinUI 2 para obtener los estilos, las plantillas y las características más actuales de todos los controles.

Para usar el código de este artículo con WinUI 2, use un alias en XAML (usamos muxc) para representar las API de la Biblioteca de interfaz de usuario de Windows que se incluyen en el proyecto. Consulte Introducción a la Biblioteca de interfaz de usuario de Windows 2 para obtener más información.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:RatingControl />

Crear un control de clasificación

Abra la aplicación WinUI 3 Gallery y vea RatingControl en acción.

La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtenga la aplicación de Microsoft Store u obtenga el código fuente en GitHub.

Control de clasificación editable

Este código muestra cómo crear un control de clasificación editable con un valor de marcador de posición.

<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";
    }
}

Control de clasificación de solo lectura

Este código muestra cómo crear un control de clasificación de solo lectura.

<RatingControl IsReadOnly="True"/>

Funcionalidad adicional

El control de clasificación tiene muchas características adicionales que se pueden usar. En nuestra documentación de referencia encontrarás los detalles necesarios para usar estas características. Esta es una lista no completa de funcionalidades adicionales:

  • Excelente rendimiento de lista larga
  • Tamaño compacto para escenarios de interfaz de usuario limitados
  • Clasificación y relleno de valor continuo
  • Personalización de espaciado
  • Deshabilitación de animaciones de crecimiento
  • Personalización del número de estrellas

Obtener el código de ejemplo