一,需求來源

　　在開發韓劇TV UWP過程中,遇到了星級評分的控件問題,在安卓和html中很容易用現有的輪子實現星級評分，搜索了一下目前UWP還未有相關文章，在WPF的一篇文章中使用Photo shop+VS blend+ProgressBar使用自定義進度條的方式實現了自定義進度條，詳情點擊。這個方法可以聯想到星級評分上，使用PS做出5顆星星，並且挖空中間，然後使用評分與ProgressBar綁定，這樣實現精確的填充評分。另一種方法就是使用圖標素材和集合控件使用小算法算出半星，全星，空星的數量，從而得到星級評分。

　　此文章，主要介紹後者的實現。

二,自定義控件

①初步設計

②圖標素材

提供三張圖片以供學習使用

③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;
        }

完整代碼

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

三,測試

UWP開發---DIY星級評分控件