Rating control in WPF

 

This article gives you a step by step walkthrough how to create a Rating control like below in WPF. If you are new to custom control development, here is an excellent article to get the basic idea on Custom control development.

 

Before we start, It is always good to separate custom controls from the project and maintain as a class library. I prefer below project structure for a custom control library.

 

If a resource is not defined for a specific theme, then the control checks Classic.xaml for the resource. If the resource is not defined in the file that corresponds to the current theme or in Classic.xaml, the control uses the generic resource, which is in a resource dictionary file named generic.xaml.

Also it is very important that from where your components are derived. Here the Rating control is derived from ItemsControl, each ItemContainer will be replaced by a star symbol which is a ContentControl. This is achieved by overriding the GetContainerForItemOverride method.

protected override DependencyObject GetContainerForItemOverride()
   {
     return new RatingItem();
   }

Rating control exposes RatingItemLimit, RatingItemBackground, RatingItemHighlightColor, RatingItemMouseDownColor and RatingValue properties to interact with the control. 

<controls:Rating Width="250"
                 eight="20"
                  RatingItemLimit="10"
                  RaingItemBackground="Red"
                  RatingItemHighlightColor="Green"
                  RatingItemMouseDownColor="Black"
                  RatingValue="2.6">
</controls:Rating>