UWP开发---DIY星级评分控件
2024-09-20 06:05:35
一,需求来源
在开发韩剧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; } } }
完整代码
三,测试
最新文章
- SSIS 实例——将SQL获取的信息传递到Email中
- find命令
- jQuery的封装和扩展方式
- 云计算仿真软件Cloudsim介绍以及类的功能介绍
- Html模板
- php5.5安装及phpmyadmin&;nginx配置php模块
- spring中context:property-placeholder/元素
- 在thinkphp框架模板中引用session
- B - 娜娜梦游仙境系列——跳远女王
- 输出排名第k的法雷级数的值;
- Mac RTX
- [简历] JAVA 软件工程师
- (java) Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity.
- birkenfeld / sphinx-contrib — Bitbucket
- hdu_3182_Hamburger Magi(状压DP)
- ●BZOJ 3309 DZY Loves Math
- i春秋misc部分writeup
- dubbo在idea下的使用创建 服务者,消费者 注册中心
- 05-TypeScript中的方法新功能(下)
- thinkphp5 列表页数据分页查询3-带搜索条件