×
Namespaces

Variants
Actions

Qt及WP7自定义评级指示器

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon Porting.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata

代码示例
兼容于
文章
翻译:
最后由 hamishwillee 在 16 Jul 2013 编辑

这篇文章演示了如何在Qt和WP7下创建一个自定义评级指示器.

Contents

引言

这篇文章我们将会把 Custom Rating Indicator using Qt Quick 一文中介绍的功能迁移到WP7上。

实现

下面你将找到如何在Qt和WP7下都实现用户自定义指示器。

Qt

Qt下的实现方式, 请看文章Custom Rating Indicator using Qt Quick.

WP7

让我们来创建一个空的WP7项目 。我们把五个Images添加到一个StackPanel中,让所有的图像在一行中显示。

<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>

为了处理Images的缩放,我们开始就把ScaleX和ScaleY属性设置成1并将它运用到图像的RenderTransform属性. 每一个Image会获得一个事件处理器。当用户点击任意的Images时,相应的事件处理器会被调用,然后会调用displayRatingStar()方法。

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 */

 
}
在displayRatingStar()方法中我们根据评级Image的不透明变化和缩放的变化来检查rating变量的值。为了更好的用户反馈我们也将VibrateController添加到Image点击中, 这是可选的。为了知道更多有关如何将 VibrateController添加到UI元素中,你可以看这篇文章:Adding Vibration on UI elements in WP7

源代码

	此示例的完整源代码可以在这里获得: File:RatingIndicatorWP7.zip
This page was last modified on 16 July 2013, at 01:19.
110 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.

×