Introducing the New WinUI Rating Control
Tags: csharp, dotnet, winui, desktop
Published: 2022-10-17 04:31:06

---
title: Introducing the New WinUI Rating Control
published: true
date: 2022-10-13 10:00:20 UTC
tags: csharp, dotnet, winui, desktop
canonical_url: https://www.syncfusion.com/blogs/post/introducing-the-new-winui-rating-control.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0504u1pd4fqxf3e6u8ec.png
---

We are glad to introduce the new [WinUI Rating](https://www.syncfusion.com/winui-controls/rating "WinUI Rating Control") control in the [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3") release. It is used to provide or view ratings on a numeric scale for any service provided, such as movies, applications, and products.

The key features of the WinUI Rating control are:

- [Precision](#precision)
- [Read-only](#read-only)
- [Tooltip](#tooltip)
- [Template](#template)
- [Customization](#customization)

Let’s look at these features and see how you can use the new WinUI Rating control in your app.

## <a name="precision">Precision</a>

The WinUI Rating control provides accuracy levels for ratings, with flexible precision to handle full, half, or exact values:

- **Full** —To round to the nearest value.
- **Half** —To set the nearest half-value for ratings.
- **Exact** —To set the exact value for ratings.

![Rating control with full precision](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Rating-Control-with-Full-Precision-1.png)![Rating control with half precision](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Rating-Control-with-Half-Precision-1.png)![Rating control with exact precision](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Rating-Control-with-Exact-Precision-1.png) 

## <a name="read-only">Read-only</a>
Design the Rating control in read-only mode to restrict the users from selecting the rating items. This mode allows users only to view the rating value.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Read-Only-Mode-in-WinUI-Rating-Control-1.png" alt="Read-Only Mode in WinUI Rating Control" style="width:100%">

  <figcaption>Read-Only Mode in WinUI Rating Control</figcaption>

</figure>

## <a name="tooltip">Tooltip</a>

You can show the exact rating value as a tooltip when the user hovers the mouse over any rating item.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/WinUI-Rating-Control-with-Tooltip-1.png" alt="WinUI Rating Control with Tooltip" style="width:100%">

  <figcaption>WinUI Rating Control with Tooltip</figcaption>

</figure>

## Template

Our WinUI Rating control has template support to add rating items such as images, paths, font icons, and other elements.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Rating-Control-with-Heart-Path-Template-1.png" alt="Rating Control with Heart Path Template" style="width:100%">

  <figcaption>Rating Control with Heart Path Template</figcaption>

</figure>

 <figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Rating-Control-with-Image-Template-1.png" alt="Rating Control with Image Template" style="width:100%">

  <figcaption>Rating Control with Image Template</figcaption>

</figure>

## <a name="customization">Customization</a>

You can easily customize the WinUI Rating control with different styles for rated and unrated items, custom item count, and size options.

### Style

Customize the styles of rated and unrated items in the control.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Customizing-the-Style-of-WinUI-Rating-Control-1.png" alt="Customizing the Style of WinUI Rating Control" style="width:100%">

  <figcaption>Customizing the Style of WinUI Rating Control</figcaption>

</figure>

### ItemsCount

Specify the number of items to be displayed in the Rating control.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Customizing-the-Items-Count-in-the-WinUI-Rating-Control-1.png" alt="Customizing the Item Count in the WinUI Rating Control" style="width:100%">

  <figcaption>Customizing the Items Count in the WinUI Rating Control</figcaption>

</figure>

Example:

### ItemSize

Customize the size of each rating item in the control.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Customizing-the-Size-of-the-WinUI-Rating-Control-1.png" alt="Customizing the Size of the WinUI Rating Control" style="width:100%">

  <figcaption>Customizing the Size of the WinUI Rating Control</figcaption>

</figure>


## Getting started with the WinUI Rating control

We have seen the marvelous features of the WinUI Rating control. Let’s see how to add it to your app and use these features.

### Step 1: Create a WinUI application.

First, create a simple WinUI project using the guidelines in the [Create app with Windows App SDK](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/create-your-first-winui3-app?tabs=desktop-csharp "Create your first WinUI 3 (Windows App SDK) project Documentation") documentation.

### Step 2: Add the Syncfusion.Editors.WinUI NuGet package.

Then, install the latest [Syncfusion.Editors.WinUI ](https://www.nuget.org/packages/Syncfusion.Editors.WinUI/ "Syncfusion.Editors.WinUI NuGet package")NuGet package in your project from the [NuGet Gallery](https://www.nuget.org/ "Nuget Gallery") or installed location, **C:\Program Files (x86)\Syncfusion\Essential Studio\WinUI\xx.x.x.xx\NuGetPackages**.

**Note:**  **xx.x.x.xx** denotes the version of the installed Syncfusion WinUI Editors package.

### Step 3: Add the namespace.

Now, include the  **Syncfusion.UI.Xaml.Editors**  namespace in your XAML file with the following code.

```csharp
xmlns:syncfusion="using:Syncfusion.UI.Xaml.Editors"
```

### Step 4: Initialize the WinUI Rating control.

Initialize the WinUI Rating control by adding the rating items, as shown in the following code example.

```xml
<Page
    x:Class="GettingStarted.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GettingStarted"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Editors"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
    <Grid>
     <syncfusion:SfRating Value="3">
      <syncfusion:SfRating.Items>
       <syncfusion:SfRatingItem />
       <syncfusion:SfRatingItem />
       <syncfusion:SfRatingItem />
       <syncfusion:SfRatingItem />
       <syncfusion:SfRatingItem />
      </syncfusion:SfRating.Items>
     </syncfusion:SfRating>
    </Grid>
 
</Page>
```

You can also initialize the Rating control using the **ItemsCount** property like in the following code example.

```xml
…
  <Grid>
  <syncfusion:SfRating Value="3" ItemsCount="5" />
 </Grid>
…
```

After executing these code examples, we will get a rating control like in the following image.

![Integrating the Rating Control in WinUI App](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Integrating-the-Rating-Control-in-WinUI-App-1.png)

**Note:** For more details, refer to the [WinUI Rating control getting started documentation](https://help.syncfusion.com/winui/rating/getting-started "WinUI Rating control documentation").

## **Conclusion**

Thanks for reading! We have seen the features of the new Syncfusion [WinUI Rating control](https://www.syncfusion.com/winui-controls/rating "WinUI Rating control") rolled out in the [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3") release. To see all the available new upgrades in this release, take a look at our [Release Notes](https://help.syncfusion.com/winui/release-notes/v20.3.0.47?type=all "Syncfusion Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Syncfusion What's New") pages. Try the new features out and share your thoughts in the comments section below.

You can also download and check out our WinUI demo app in the [Microsoft Store](https://install.appcenter.ms/orgs/syncfusion-demos/apps/winui-demos/distribution_groups/release "Syncfusion WinUI demos on Microsoft Store").

For current customers, the new version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out our newest features.

For questions, you can contact us through our [support forums](https://www.syncfusion.com/forums " Syncfusion Support Forums"), [support portal](https://support.syncfusion.com/ " Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/winui " Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2022 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-3-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 3 Is Here!")
- [What’s New in 2022 Volume 3: WinUI and WPF](https://www.syncfusion.com/blogs/post/whats-new-in-2022-volume-3-winui-and-wpf.aspx "Blog: What’s New in 2022 Volume 3: WinUI and WPF")
- [Design a Car Dashboard Like a Pro Using the WinUI Radial Gauge](https://www.syncfusion.com/blogs/post/design-a-car-dashboard-like-a-pro-using-the-winui-radial-gauge.aspx "Blog: Design a Car Dashboard Like a Pro Using the WinUI Radial Gauge")
- [Designing a Heat Map Calendar Using WinUI Scheduler](https://www.syncfusion.com/blogs/post/designing-a-heat-map-calendar-using-winui-scheduler.aspx "Blog: Designing a Heat Map Calendar Using WinUI Scheduler")