【需求来源】#
在开发韩剧TV UWP过程中,遇到了星级评分的控件问题,在安卓和html中很容易用现有的*实现星级评分,搜索了一下目前UWP还未有相关文章,在WPF的一篇文章中使用Photo shop+VS blend+ProgressBar使用自定义进度条的方式实现了自定义进度条,详情点击。这个方法可以联想到星级评分上,使用PS做出5颗星星,并且挖空中间,然后使用评分与ProgressBar绑定,这样实现精确的填充评分。另一种方法就是使用图标素材和集合控件使用小算法算出半星,全星,空星的数量,从而得到星级评分。
此文章,主要介绍后者的实现。
【实现方式】#
[初步设计]#
首先,我自己画了三种星星,分别命名为rank_star_full.png,rank_star_half.png,rank_star_blank.png。以满分为100分来计算,每颗星星20分,这样将Rank评分除以20就得到了一个double的星星数。小数部分超过小于0.5按半星计算,大于0.5按满星计算,剩下的空星使用5减去前面的满星和半星就可以得到。然后使用一个集合分别加入这些数量的对应图片,即可完成。
[图标素材]#
提供三张图片以供学习使用
[xmal]#
<GridView HorizontalAlignment="Left" SelectionMode="None" IsItemClickEnabled="False" Name="gridStars" ItemsSource="rankstars"> <GridView.ItemTemplate> <DataTemplate> <Border Width="20"> <Image Source="{Binding}"/> </Border> </DataTemplate> </GridView.ItemTemplate> </GridView>
使用自定义星级评分控件
<ctl:StarsRankGridView HorizontalAlignment="Left" VerticalAlignment="Center" Rank="{x:Bind serie.series.rank}"/>
[后台代码]#
//rank属性注册
public double Rank { get { return (double)GetValue(RankProperty); } set { SetValue(RankProperty, value); } } public static readonly DependencyProperty RankProperty =DependencyProperty.Register ( "Rank", typeof(double), typeof(UserControl), new PropertyMetadata(0, new PropertyChangedCallback(Initial)) );
//初始化图片集合
private static void Initial(DependencyObject d, DependencyPropertyChangedEventArgs e) { if (e.NewValue!=null) { StarsRankGridView starsRankGridView = (StarsRankGridView)d; starsRankGridView.starsList = starsRankGridView.AddImgsToList(starsRankGridView.starsList, (double)e.NewValue / 20); starsRankGridView.gridStars.ItemsSource = starsRankGridView.starsList; } } public ObservableCollection<string> AddImgsToList(ObservableCollection<string> imgs ,double rank) { int full_StarsNums = (int)rank; int half_StarsNums = (rank - (int)rank) > 0.5 ? 1 : 0; int balnk_StarNums = 5 - full_StarsNums - half_StarsNums; for (int i = 0; i < full_StarsNums; i++) { starsList.Add("/Assets/Icons/rank_star_full.png"); } for (int i = 0; i < half_StarsNums; i++) { starsList.Add("/Assets/Icons/rank_star_half.png"); } for (int i = 0; i < balnk_StarNums; i++) { starsList.Add("/Assets/Icons/rank_star_blank.png"); } return imgs; }
【测试】#