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.

Rating2

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.

Rating1

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"
                 Height="20"
                 RatingItemLimit="10"
                 RaingItemBackground="Red"
                 RatingItemHighlightColor="Green"
                 RatingItemMouseDownColor="Black"
                 RatingValue="2.6">
</controls:Rating>

 

Get the complete source code here.

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s