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

 

【測試】