rating.md

author	description	title	template	ms.author	ms.date	ms.topic	ms.prod	ms.technology	keywords	pm-contact	design-contact	dev-contact	doc-status	ms.localizationpriority
serenaz	Enables users to view and set ratings that reflect satisfaction with content and services.	Rating Control	detail.hbs	sezhen	10/25/2017	article	windows	uwp	windows 10, uwp	abarlow	kimsea	mitra	Published	medium

Rating control

The rating control allows users to view and set ratings that reflect degrees of satisfaction with content and services. Users can interact with the rating control with touch, pen, mouse, gamepad or keyboard. The follow guidance shows how to use the rating control's features to provide flexibility and customization.

Important APIs: RatingControl class

Examples

XAML Controls Gallery
	If you have the XAML Controls Gallery app installed, click here to open the app and see the RatingControl in action. Get the XAML Controls Gallery app (Microsoft Store) Get the source code (GitHub)

Editable rating with placeholder value

Perhaps the most common way to use the rating control is to display an average rating while still allowing the user to enter their own rating value. In this scenario, the rating control is initially set to reflect the average satisfaction rating of all users of a particular service or type of content (such as a music, videos, books, etc.). It remains in this state until a user interacts with the control with the goal of individually rating an item. This interaction changes the state of the ratings control to reflect the user's personal satisfaction rating.

Initial average rating state

Representation of user rating once set

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

Read-only rating mode

Sometimes you need to show ratings of secondary content, such as that displayed in recommended content or when displaying a list of comments and their corresponding ratings. In this case, the user shouldn’t be able to edit the rating, so you can make the control read-only. The read only mode is also the recommended way of using the rating control when it is used in very large virtualized lists of content, for both UI design and performance reasons.

To do this you would do the following:

<RatingControl IsReadOnly="True"/>

Additional functionality

The rating control has many additional features which can be used. Details for using these features can be found in our MSDN reference documentation. Here is a non-comprehensive list of additional functionality:

• Great long list performance
• Compact sizing for tight UI scenarios
• Continuous value fill and rating
• Spacing customization
• Disable growth animations
• Customization of the number of stars

Get the sample code

• XAML Controls Gallery sample - See all the XAML controls in an interactive format.