Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Custom rating indicator in Qt and Windows Phone

From Wiki
Jump to: navigation, search

This article demonstrates how to create a custom Rating Indicator in Qt and Windows Phone.

WP Metro Icon Porting.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone SDK 8.0, Windows Phone SDK 7.1, Qt SDK 1.2
Devices(s): Nokia Lumia 820, Lumia 920
Platform(s): Windows Phone 8.0/ 7.1
Windows Phone 8
Windows Phone 7.5
Platform Security
Signing Required: Self-Signed
Keywords: Rating Indicator
Created: somnathbanik (29 Apr 2012)
Last edited: hamishwillee (27 Jun 2013)



In this article we will port Custom Rating Indicator using Qt Quick to Windows Phone.


On below you can find how to implement the Custom Rating Indicator for both Qt and Windows Phone.


For Implementation in Qt, see article Custom Rating Indicator using Qt Quick.


Let’s create an empty WP7 project. We add a StackPanel and add five Images in it to display all the images in a row.

<StackPanel  Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" x:Name="stackRow" Width="400">
<Image x:Name="star1" Margin="0,0,20,0" VerticalAlignment="Center" HorizontalAlignment="Center"
MouseLeftButtonDown="star1_MouseLeftButtonDown" Opacity="1">
ScaleX="1" ScaleY="1"
TranslateX="0" TranslateY="0"/>
<!-- The rest of the Image elements goes here
To keep the code simple the repeated Image element are not added in this code snippet.
The complete code is available in the source code -->

To play with the scale of the Images we set the ScaleX and ScaleY property initially to 1 and apply it to Image’s RenderTransform property. Each Image has got an event handler. When user clicks on any of the Images the corresponding event handler gets called which then calls the displayRatingStar() method.

void displayRatingStar()
textBlockRating.Text = "Rating: " + rating.ToString();
if (rating >= 1)
star1.Opacity = 1;
star1.Height = maxHeight;
star1.Width = maxWidth;
star1.Stretch = Stretch.UniformToFill;
star1.Margin = new Thickness(0, 0, 20, 0);
initialScale = ((CompositeTransform)star1.RenderTransform).ScaleX;
var transform = (CompositeTransform)star1.RenderTransform;
transform.ScaleX = finalScale;
transform.ScaleY = transform.ScaleX;
star1.Opacity = 0.4;
star1.Height = minHeight;
star1.Width = minWidth;
star1.Stretch = Stretch.UniformToFill;
star1.Margin = new Thickness(0, 0, 40, 0);
initialScale = ((CompositeTransform)star1.RenderTransform).ScaleX;
var transform = (CompositeTransform)star1.RenderTransform;
transform.ScaleX = initialScale;
transform.ScaleY = transform.ScaleX;
/* The rest of the condition check goes here
To keep the code simple the multiple condition statement are not added in this code snippet.
The complete code is available in the source code */


In displayRatingStar() method we check the value of rating variable and according to that change the Scale of the rating Images along with the change in its Opacity. We also add VibrateController in the Image click for better user feedback, which is optional. To know more on how to add VibrateController in UI element you can follow the article: Adding Vibration on UI elements in Windows Phone

Source Code

This page was last modified on 27 June 2013, at 04:56.
123 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.