Custom rating indicator in Qt and WP7
somnathbanik
(Talk | contribs) (Somnathbanik - - →WP7) |
hamishwillee
(Talk | contribs) m (Hamishwillee - Addition to article of: Category:Windows Phone 7.5) |
||
| (9 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
| − | [[Category: | + | [[Category:Code Examples]][[Category:Windows Phone]][[Category:Porting]][[Category:Qt Quick]][[Category:UI]] |
{{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 WP7.}} | ||
| Line 18: | Line 18: | ||
==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 WP7. | ||
| − | + | <gallery widths=250px heights=400px> | |
| + | File:RatingIndicatorWP7.png|Custom Rating Indicator in WP7 | ||
| + | File:RatingIndicatorQML.png|Custom Rating Indicator in Qt | ||
| + | </gallery> | ||
| + | |||
==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 WP7. | ||
== Qt == | == Qt == | ||
| − | For Implementation in Qt, | + | For Implementation in Qt, see article [[Custom Rating Indicator using Qt Quick]]. |
==WP7== | ==WP7== | ||
| Line 40: | Line 44: | ||
</Image.RenderTransform> | </Image.RenderTransform> | ||
</Image> | </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> | </StackPanel> | ||
</code> | </code> | ||
To play with the scale of the [http://msdn.microsoft.com/en-us/library/system.windows.controls.image.aspx Images] we set the ''ScaleX'' and ''ScaleY'' property initially to ''1'' and apply it to Image’s {{Icode|RenderTransform}} property. | To play with the scale of the [http://msdn.microsoft.com/en-us/library/system.windows.controls.image.aspx Images] we set the ''ScaleX'' and ''ScaleY'' property initially to ''1'' and apply it to Image’s {{Icode|RenderTransform}} property. | ||
Each [http://msdn.microsoft.com/en-us/library/system.windows.controls.image.aspx Image] has got an event handler. When user clicks on any of the [http://msdn.microsoft.com/en-us/library/system.windows.controls.image.aspx Images] the corresponding event handler gets called which then calls the {{Icode|displayRatingStar()}} method. | Each [http://msdn.microsoft.com/en-us/library/system.windows.controls.image.aspx Image] has got an event handler. When user clicks on any of the [http://msdn.microsoft.com/en-us/library/system.windows.controls.image.aspx Images] the corresponding event handler gets called which then calls the {{Icode|displayRatingStar()}} method. | ||
| − | <code cpp> | + | <code cpp-qt> |
void displayRatingStar() | void displayRatingStar() | ||
{ | { | ||
| Line 75: | Line 83: | ||
} | } | ||
| − | + | /* 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 */ | ||
| + | |||
} | } | ||
</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. | + | 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]. |
==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]][[Category:Windows Phone 7.5]] |
Latest revision as of 08:14, 30 November 2012
This article demonstrates how to create a custom Rating Indicator in Qt and WP7.
Article Metadata
Code Example
Source file: Media: RatingIndicatorWP7.zip
Tested with
Devices(s): Windows Phone
Compatibility
Platform(s): Windows Phone 7.1
Platform Security
Signing Required: Self-Signed
Article
Keywords: Rating Indicator
Created: somnathbanik
(29 Apr 2013)
Last edited: hamishwillee
(30 Nov 2012)
Contents |
Introduction
In this article we will port Custom Rating Indicator using Qt Quick to WP7.
Custom Rating Indicator in WP7
Custom Rating Indicator in Qt
Implementation
On below you can find how to implement the Custom Rating Indicator for both Qt and WP7.
Qt
For Implementation in Qt, see article Custom Rating Indicator using Qt Quick.
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 this Article.
Source Code
- The full source code of the example is available here: File:RatingIndicatorWP7.zip
