2014-11-20 50 views
1

我遇到了一些麻烦,通过Windows Phone绑定和一系列图像来解决问题。假设我的平均评分在1 - 10之间,而且我有5个图像,例如星级评分系统。现在我想显示该图像的平均评分。每颗恒星的价值为2,所以5星填充的平均评分为10,1.5星填充的平均评分为3.所以一些将被填充,一些空的或一半填满。Windows Phone高级绑定

我的XAML的样子:

<Image HorizontalAlignment="Left" VerticalAlignment="Top" Margin="150,-20,0,0" Source="/Images/icon_star.png" Stretch="None"/> 
<Image HorizontalAlignment="Left" VerticalAlignment="Top" Margin="166,-20,0,0" Source="/Images/icon_star.png" Stretch="None"/> 
<Image HorizontalAlignment="Left" VerticalAlignment="Top" Margin="182,-20,0,0" Source="/Images/icon_star_half.png" Stretch="None"/> 
<Image HorizontalAlignment="Left" VerticalAlignment="Top" Margin="198,-20,0,0" Source="/Images/icon_star_empty.png" Stretch="None"/> 
<Image HorizontalAlignment="Left" VerticalAlignment="Top" Margin="214,-20,0,0" Source="/Images/icon_star_empty.png" Stretch="None"/> 

这是我的模型:

​​

在Android中很容易的RatingBar Widget或使用列表适配器填充相似图片:

Map<Integer, ImageView> vars = new HashMap<Integer, ImageView>(); 
    vars.put(1, view.star_1); 
    vars.put(2, view.star_2); 
    vars.put(3, view.star_3); 
    vars.put(4, view.star_4); 
    vars.put(5, view.star_5); 

while(i <= 5) { 
     if(i <= rate) { 
       ImageView star = vars.get(i); 
       star.setImageDrawable(getContext().getResources().getDrawable(R.drawable.icon_star)); 
     } else { 
      if(rate % 2 != 0 && i == (int)(Math.round(rate))) { 
       ImageView star = vars.get(i); 
       star.setImageDrawable(getContext().getResources().getDrawable(R.drawable.icon_star_half)); 
      } else { 
       ImageView star = vars.get(i); 
       star.setImageDrawable(getContext().getResources().getDrawable(R.drawable.icon_star_dis)); 
      } 
     } 
     i++; 
    } 

在iOS中,我使用了图像和IBOutletcollection和cellForRowAtIndexPath。

对于Windows我使用绑定,但我无法让我的头围绕此。

+0

这http://www.codeproject.com/Articles/189242/XAML-Masking-for-WPF-Silverlight-and-WP-Rating-co – 2014-11-20 21:19:29

+0

如何限制这些星星仅返回.5,1,1.5,2,2.5等? – 2014-11-20 21:26:50

+0

您可以使用十个不同的BitmapSources,其中第一个显示五个空星,最后显示五个满星。现在您编写一个绑定转换器,将double值(1和10之间)转换为相应的BitmapImage。 – Clemens 2014-11-20 21:55:55

回答

0

此操作对于简单绑定而言太复杂。

你想要做的是创建一个“评级”用户控件。然后添加一个Value依赖项属性。这意味着你可以这样做:

<local:Rating Value="{Binding rating}"/> 

本身会处理用户输入,约束值.5倍数的控制等