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

.Net 4.5 ‘Delay’ Binding property

‘Delay’ is one of the coolest property which is introduced as a part of the series on WPF 4.5 new features.

As pointed out by MSDN, If you use a data binding to update a data source, you can use the Delay property to specify an amount of time to pass after the property changes on the target before the source updates. For example, suppose that you have a Slider that has its Value property data two-way bound to a property of a data object and the UpdateSourceTrigger property is set to PropertyChanged. In this example, when the user moves the Slider, the source updates for each pixel that the Slider moves. The source object typically needs the value of the slider only when the slider’s Value stops changing. To prevent updating the source too often, use Delay to specify that the source should not be updated until a certain amount of time elapses after the thumb stops moving.

<Window x:Class="WpfApplication6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="166"
        Width="301">
    <Grid>
        <StackPanel>
            <Slider x:Name="ValueSlider"
                    Minimum="0"
                    Maximum="100"
                    Margin="20"
                    Height="25"
                    Value="{Binding ElementName=ValueText, Delay=500, Path=Text,Mode=TwoWay}" />
            <TextBox x:Name="ValueText"
                     Text="50"
                     Width="100"
                     Height="50"
                     FontSize="20"
                     HorizontalAlignment="Center" />
        </StackPanel>
    </Grid>
</Window>

Again, it’s a discrete addition to the WPF framework but it’s a useful one !