×
Namespaces

Variants
Actions
(Difference between revisions)

Custom rating indicator in Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Text replace - "<code cpp>" to "<code cpp-qt>")
hamishwillee (Talk | contribs)
m (Hamishwillee -)
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Code Examples]][[Category:Windows Phone]][[Category:Porting]][[Category:Qt Quick]][[Category:UI]]
+
[[Category:Porting Windows Phone and Qt]][[Category:Code Examples]][[Category:Windows Phone 8]][[Category:Windows Phone 7.5]]
{{Abstract| This article demonstrates how to create a custom Rating Indicator in Qt and WP7.}}
+
{{Abstract| This article demonstrates how to create a custom Rating Indicator in Qt and Windows Phone.}}
  
 
{{ArticleMetaData
 
{{ArticleMetaData
 
|sourcecode= [[Media: RatingIndicatorWP7.zip]]<!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= [[Media: RatingIndicatorWP7.zip]]<!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|installfile=<!-- Link to installation file (e.g. [[Media:FacebookPlus.sis]]) -->
 
|installfile=<!-- Link to installation file (e.g. [[Media:FacebookPlus.sis]]) -->
|devices= Windows Phone <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
+
|devices= Nokia Lumia 820, Lumia 920
|sdk= [http://www.developer.nokia.com/Develop/Windows_Phone/Tools/ Windows Phone SDK 7.1]
+
|sdk= [http://www.microsoft.com/en-us/download/details.aspx?id=35471 Windows Phone SDK 8.0], Windows Phone SDK 7.1, Qt SDK 1.2
|platform= Windows Phone 7.1 <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
+
|platform= Windows Phone 8.0/ 7.1
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|signing=Self-Signed<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|signing=Self-Signed<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= Rating Indicator <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= Rating Indicator <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
|id= <!-- Article Id (Knowledge base articles only) -->
+
|creationdate= 20120429
|creationdate= 29th April, 2012<!-- Format YYYYMMDD -->
+
|author= [[User: somnathbanik]]
|author= [[User: somnathbanik]] <!-- Display as link [[User:username]] -->
+
 
}}
 
}}
 
==Introduction==
 
==Introduction==
In this article we will port [http://www.developer.nokia.com/Community/Wiki/Custom_Rating_Indicator_using_Qt_Quick Custom Rating Indicator using Qt Quick] to WP7.   
+
In this article we will port [http://www.developer.nokia.com/Community/Wiki/Custom_Rating_Indicator_using_Qt_Quick Custom Rating Indicator using Qt Quick] to Windows Phone.   
 
<gallery widths=250px heights=400px>
 
<gallery widths=250px heights=400px>
 
File:RatingIndicatorWP7.png|Custom Rating Indicator in WP7
 
File:RatingIndicatorWP7.png|Custom Rating Indicator in WP7
Line 24: Line 23:
  
 
==Implementation==  
 
==Implementation==  
On below you can find how to implement  the Custom Rating Indicator for both Qt and WP7.
+
On below you can find how to implement  the Custom Rating Indicator for both Qt and Windows Phone.
  
 
== Qt ==
 
== Qt ==
Line 89: Line 88:
 
   }
 
   }
 
</code>
 
</code>
In {{Icode|displayRatingStar()}} method we check the value of ''rating'' variable and according to that change the ''Scale'' of the rating [http://msdn.microsoft.com/en-us/library/system.windows.controls.image.aspx Images ]along with the change in its ''Opacity''.  We also add [http://msdn.microsoft.com/en-us/library/microsoft.devices.vibratecontroller%28v=VS.92%29.aspx VibrateController]  in the [http://msdn.microsoft.com/en-us/library/system.windows.controls.image.aspx Image] click for better user feedback, which is optional. To know more on how to add [http://msdn.microsoft.com/en-us/library/microsoft.devices.vibratecontroller%28v=VS.92%29.aspx VibrateController] in UI element you can follow this [http://www.developer.nokia.com/Community/Wiki/Adding_Vibration_on_UI_elements_in_WP7 Article].
+
In {{Icode|displayRatingStar()}} method we check the value of ''rating'' variable and according to that change the ''Scale'' of the rating [http://msdn.microsoft.com/en-us/library/system.windows.controls.image.aspx Images ]along with the change in its ''Opacity''.  We also add [http://msdn.microsoft.com/en-us/library/microsoft.devices.vibratecontroller%28v=VS.92%29.aspx VibrateController]  in the [http://msdn.microsoft.com/en-us/library/system.windows.controls.image.aspx Image] click for better user feedback, which is optional. To know more on how to add [http://msdn.microsoft.com/en-us/library/microsoft.devices.vibratecontroller%28v=VS.92%29.aspx VibrateController] in UI element you can follow the article: [[Adding Vibration on UI elements in Windows Phone]]
  
 
==Source Code==
 
==Source Code==
 
* The full source code of the example is available here: [[File: RatingIndicatorWP7.zip]]
 
* The full source code of the example is available here: [[File: RatingIndicatorWP7.zip]]

Latest revision as of 07:56, 27 June 2013

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
Compatibility
Platform(s): Windows Phone 8.0/ 7.1
Windows Phone 8
Windows Phone 7.5
Platform Security
Signing Required: Self-Signed
Article
Keywords: Rating Indicator
Created: somnathbanik (29 Apr 2012)
Last edited: hamishwillee (27 Jun 2013)

Contents

[edit] Introduction

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

[edit] Implementation

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

[edit] Qt

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

[edit] WP7

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"
Source="star.png"
Stretch="None"
RenderTransformOrigin="0.5,0.5"
MouseLeftButtonDown="star1_MouseLeftButtonDown" Opacity="1">
<Image.RenderTransform>
<CompositeTransform
ScaleX="1" ScaleY="1"
TranslateX="0" TranslateY="0"/>
</Image.RenderTransform>
</Image>
 
<!-- 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 -->
 
</StackPanel>

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()
{
iVibrateController.Start(TimeSpan.FromMilliseconds(100));
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;
}
else
{
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

[edit] Source Code

This page was last modified on 27 June 2013, at 07:56.
110 page views in the last 30 days.
×