UWP开发---DIY星级评分控件

一,需求来源

　　在开发韩剧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 PropertyChangedCallback(Initial))
);

//初始化图片集合

private static void Initial(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (e.NewValue!=null)
            {
                StarsRankGridView starsRankGridView = (StarsRankGridView)d;
                starsRankGridView.starsList = starsRankGridView.AddImgsToList(starsRankGridView.starsList, ();
                starsRankGridView.gridStars.ItemsSource = starsRankGridView.starsList;
            }

        }
        public ObservableCollection<string> AddImgsToList(ObservableCollection<string> imgs ,double rank)
        {
            int full_StarsNums = (int)rank;
             : ;
             - full_StarsNums - half_StarsNums;
            ; i < full_StarsNums; i++)
            {
                starsList.Add("/Assets/Icons/rank_star_full.png");
            }
            ; i < half_StarsNums; i++)
            {
                starsList.Add("/Assets/Icons/rank_star_half.png");
            }
            ; i < balnk_StarNums; i++)
            {
                starsList.Add("/Assets/Icons/rank_star_blank.png");
            }
            return imgs;
        }

完整代码

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

//https://go.microsoft.com/fwlink/?LinkId=234236 上介绍了“用户控件”项模板

namespace 韩剧TV.controls
{
    public sealed partial class StarsRankGridView : UserControl
    {
        public double Rank
        {
            get { return (double)GetValue(RankProperty); }
            set { SetValue(RankProperty, value); }
        }
        public ObservableCollection<string> starsList = new ObservableCollection<string>();
        public StarsRankGridView()
        {
            this.InitializeComponent();
        }
        public static readonly DependencyProperty RankProperty = DependencyProperty.Register
            (
                "Rank",
                typeof(double),
                typeof(UserControl),
                , 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, ();
                starsRankGridView.gridStars.ItemsSource = starsRankGridView.starsList;
            }

        }
        public ObservableCollection<string> AddImgsToList(ObservableCollection<string> imgs ,double rank)
        {
            int full_StarsNums = (int)rank;
             : ;
             - full_StarsNums - half_StarsNums;
            ; i < full_StarsNums; i++)
            {
                starsList.Add("/Assets/Icons/rank_star_full.png");
            }
            ; i < half_StarsNums; i++)
            {
                starsList.Add("/Assets/Icons/rank_star_half.png");
            }
            ; i < balnk_StarNums; i++)
            {
                starsList.Add("/Assets/Icons/rank_star_blank.png");
            }
            return imgs;
        }
    }
}

完整代码

三,测试