# Step 2: Customizing the Appearance of Rating Control

## Content



In the last step, you created a WPF project and added the Rating control to it. In this step, you start by customizing the appearance of the Rating control using some of the properties of the [C1Rating](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1Rating.html) class at design time. In this example, we rate a book for which we would add an image to the project.

1.  Select the rating control on the Main Window and navigate to the **Properties** pane.
2.  Set [AutoGeneratedItemsCount](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1Rating.AutoGeneratedItemsCount.html) property to **4** to observe a total of 4 stars in the control on running the application.
3.  Set [RatingPrecision](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1Rating.RatingPrecision.html) property to **Half** to allow 0.5 star rating.
4.  Set [HoveredBrush](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1Rating.HoveredBrush.html) property to **Green** to set the brush color in hovered state. By default, HoveredBrush property is set to **Yellow**.
5.  Set [Value](/componentone/api/wpf/online-extended/dotnet-framework-api/C1.WPF.Extended.4.6.2/C1.WPF.Extended.C1Rating.Value.html) property to **2** to display an initial rating of 2-star.
6.  Add an image to your project that displays the covepage of the book to be rated.
7.  Navigate to the Toolbox again and add a standard TextBlock control to the designer. Place it below the image.
8.  Set the **Text** property of TextBlock as "Rating" in the **Properties** window.
9.  Position the C1Rating control adjacent to the TextBlock below the image. The **Design** view appears similar to the following image.
    
    ![Rating Demo Look](https://cdn.mescius.io/document-site-files/images/babf1807-69aa-4d8a-96b6-d6c6d9325368/images/image03.png)
    

With this, you have successfully added and customized the appearance of the Rating control. In the next step, you run the application to see how the Rating control appears and works.

## See Also

[Step 3: Using the Rating control at Run Time](/componentone/docs/wpf/online-extended/Rating/RatingforWPFQuickStart/Step3)