Telerik UI for Windows Phone by Progress

This article explains how the shape of the rating items can be customized.

The shape of the rating items can easily be changed. RadRating provides properties that change the look of all the items and RadRatingItem provides similar properties in case the shape of the items needs to be different for the different items. Here are the properties that provide that functionality, the first is from RadRating and the second from RadRatingItem:

  • ItemShapeGeometry/ShapeGeometry - used to define the geometry that will be used for the shape of the items
  • ItemShapeWidth/ShapeWidth - used to define the width of the items
  • ItemShapeHeight/ShapeHeight - used to define the height of the items
  • ItemShapeSelectedStyle/ShapeSelectedStyle - used to define a style that describes how the items will look when they are selected
  • ItemShapeUnselectedStyle/ShapeUnselectedStyle - used to define a style that describes how the items will look when they are not selected
  • ItemShapeHighlightedStyle/ShapeHighlightedStyle - used to define a style that describes how the items will look when they are highlighted, this is when manipulation has started, but is not completed yet
  • ItemShapeStyle - this property is available only for RadRating and provides some shapes with different styles that can be used to easily change the look of the items

Here are some methods to change the shape of the items:

By defining a different ShapeGeometry with a string

One way to change the geometry of the shapes is to set the ItemShapeGeometry to a string representing the geometry (Expression Blend can be used to see how a shape is presented by a set of points and their coordinates). The geometry can be changed for all the items by RadRating's ItemShapeGeometry property and for specific items only with RadRatingItem's ShapeGeometry property. The properties ItemShapeWidth and ItemShapeHeight can be used to change the size of the items. Similar properties named ShapeWidth and ShapeHeight are presented in RadRatingItem as well, which serve to change the size only to specific items. Here is an example:

CopyXAML
<telerikInput:RadRating ItemShapeGeometry="F1M850.502,338.1079L846.857,335.4609L843.213,338.1079L844.605,333.8239L840.96,331.1759L845.442,331.1759L846.856,326.8919L848.272,331.1759L852.754,331.1759L849.109,333.8239z M835.856,343.4999L857.856,343.4999L857.856,321.4999L835.856,321.4999z" >

    <telerikInput:RadRating.ItemShapeUnselectedStyle>
        <Style TargetType="Path">
            <Setter Property="Stroke" Value="{StaticResource PhoneAccentBrush}"/>
            <Setter Property="StrokeThickness" Value="3"/>
        </Style>
    </telerikInput:RadRating.ItemShapeUnselectedStyle>

    <telerikInput:RadRating.ItemShapeSelectedStyle>
        <Style TargetType="Path">
            <Setter Property="Fill" Value="{StaticResource PhoneAccentBrush}"/>
            <Setter Property="Stroke" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="StrokeThickness" Value="3"/>
        </Style>
    </telerikInput:RadRating.ItemShapeSelectedStyle>

    <telerikInput:RadRating.ItemShapeHighlightedStyle>
        <Style TargetType="Path">
            <Setter Property="Stroke" Value="{StaticResource PhoneBackgroundBrush}"/>
            <Setter Property="Fill" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="StrokeThickness" Value="3"/>
        </Style>
    </telerikInput:RadRating.ItemShapeHighlightedStyle>

    <telerikInput:RadRatingItem Margin="0,0,5,0"/>
    <telerikInput:RadRatingItem Margin="0,0,5,0"/>
    <telerikInput:RadRatingItem Margin="0,0,5,0"/>
    <telerikInput:RadRatingItem Margin="0,0,5,0"/>
    <telerikInput:RadRatingItem />

</telerikInput:RadRating>

Here is a snapshot of the result:

Customization Item Shape Geometry

By describing the new Geometry with Geometry objects

Another way to change the geometry is to describe the Geometry objects that describe the desired shape. Again RadRating's ItemShapeGeometry and RadRatingItem's ShapeGeometry properties can be used respectively to define geometry for all items or for a specific item only. Here is an example of how to use an Ellipse geometry to define the shapes of the rating items:

CopyC#
EllipseGeometry geometry = new EllipseGeometry() { RadiusX = 10, RadiusY = 10 };
radRating.ItemShapeGeometry = geometry;

Here is a snapshot of the result:

Customization

By using the built-in shape styles

RadRating contains a few shape styles that allow easy changing of the shape of the items. This style can be selected by the ItemShapeStyle property. The default style is using stars, but with this property you can change it to hearts, for example:

CopyXAML
<telerikInput:RadRating ItemShapeStyle="Hearts1"/>
Item Shape Style