在Windows 8/WP/Silverlight/WPF下创建五角星

最近用到一个使用五角星做评级的小控件，用Path创建了一个五角星的控件，贴出代码及效果：

效果：

图片比较小，凑合看吧，贴出来现在使用的两个控件的代码。

第一个是单个的五角星控件，支持设置五角星大小、FillColor，Stroke等。

下面的代码是在Win8的程序下写的，如果在其他平台下，可以找到关键代码拷贝过去。

UcOneStarView.xaml

<UserControlx:Class="App1.Common.UserControls.UcOneStarView"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:App1.Common.UserControls"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"d:DesignHeight="300"d:DesignWidth="400"><Grid Name="grdRoot"></Grid>
</UserControl>

UcOneStarView.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI;
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;
using Windows.UI.Xaml.Shapes;// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236namespace App1.Common.UserControls
{public sealed partial class UcOneStarView : UserControl{public int StarSize{get { return (int)GetValue(StarHeightProperty); }set { SetValue(StarHeightProperty, value); }}// Using a DependencyProperty as the backing store for StarHeight.  This enables animation, styling, binding, etc...public static readonly DependencyProperty StarHeightProperty =DependencyProperty.Register("StarSize", typeof(int), typeof(UcOneStarView), new PropertyMetadata(100));public bool IsFill{get { return (bool)GetValue(IsFillProperty); }set { SetValue(IsFillProperty, value); }}// Using a DependencyProperty as the backing store for IsFill.  This enables animation, styling, binding, etc...public static readonly DependencyProperty IsFillProperty =DependencyProperty.Register("IsFill", typeof(bool), typeof(UcOneStarView), new PropertyMetadata(true));public Color StarFillColor{get { return (Color)GetValue(StarFillColorProperty); }set { SetValue(StarFillColorProperty, value); }}// Using a DependencyProperty as the backing store for StarFillColor.  This enables animation, styling, binding, etc...public static readonly DependencyProperty StarFillColorProperty =DependencyProperty.Register("StarFillColor", typeof(Color), typeof(UcOneStarView), new PropertyMetadata(Colors.Red));public Color StarStroke{get { return (Color)GetValue(StarStrokeProperty); }set { SetValue(StarStrokeProperty, value); }}// Using a DependencyProperty as the backing store for StarStroke.  This enables animation, styling, binding, etc...public static readonly DependencyProperty StarStrokeProperty =DependencyProperty.Register("StarStroke", typeof(Color), typeof(UcOneStarView), new PropertyMetadata(Colors.White));public UcOneStarView(){this.InitializeComponent();this.Loaded += UcOneStarView_Loaded;}void UcOneStarView_Loaded(object sender, RoutedEventArgs e){Path pathRoot = CreateAStar(StarSize, IsFill ? 100 : 0, StarFillColor, StarStroke);grdRoot.Children.Add(pathRoot);}/// <summary>/// 创建一个五角星的Path/// </summary>/// <param name="sizeBase"></param>/// <param name="percent">smaller than 100 && larger than 0</param>/// <param name="colorFill"></param>/// <param name="colorStroke"></param>private Path CreateAStar(double sizeBase, double percent, Color colorFill, Color colorStroke){//定义PathPath pathRoot = new Path();pathRoot.Fill = new SolidColorBrush(colorFill);pathRoot.Stroke = new SolidColorBrush(colorStroke);PathGeometry pathData = new PathGeometry();PathFigureCollection pathFigureCollection = new PathFigureCollection();PathFigure pathFigure1 = new PathFigure();pathFigure1.StartPoint = new Point(sizeBase, 0);PathSegmentCollection pathSegments = new PathSegmentCollection();Point p1 = new Point(sizeBase, 0);//各定点连线中间部分长度的1/2double length1 = sizeBase / (Math.Tan(GetRadianByAngle(72d)) + Math.Tan(GetRadianByAngle(54d)));//圆中心到五角星各顶点连线的距离double length2 = sizeBase * Math.Sin(GetRadianByAngle(18d));Point p2 = new Point(sizeBase + length1, sizeBase - length2);Point p3 = new Point(sizeBase + length2 * Math.Tan(GetRadianByAngle(72d)), sizeBase - length2);Point p4 = new Point(p2.X + length1 * 2 * Math.Sin(GetRadianByAngle(18d)), p2.Y + length1 * 2 * Math.Cos(GetRadianByAngle(18d)));Point p5 = new Point(sizeBase + sizeBase * Math.Sin(GetRadianByAngle(36d)), sizeBase + sizeBase * Math.Cos(GetRadianByAngle(36d)));Point p6 = new Point(sizeBase, sizeBase + length2 / Math.Cos(GetRadianByAngle(36d)));Point p7 = new Point(sizeBase - sizeBase * Math.Sin(GetRadianByAngle(36d)), p5.Y);Point p8 = new Point(sizeBase - length2 / Math.Cos(GetRadianByAngle(36d)), p4.Y);Point p9 = new Point(sizeBase - sizeBase * Math.Sin(GetRadianByAngle(72d)), p3.Y);Point p10 = new Point(sizeBase - length1, sizeBase - length2);pathSegments.Add(new LineSegment() { Point = p2 });pathSegments.Add(new LineSegment() { Point = p3 });pathSegments.Add(new LineSegment() { Point = p4 });pathSegments.Add(new LineSegment() { Point = p5 });pathSegments.Add(new LineSegment() { Point = p6 });pathSegments.Add(new LineSegment() { Point = p7 });pathSegments.Add(new LineSegment() { Point = p8 });pathSegments.Add(new LineSegment() { Point = p9 });pathSegments.Add(new LineSegment() { Point = p10 });pathFigure1.Segments = pathSegments;pathFigure1.IsClosed = true;pathFigureCollection.Add(pathFigure1);pathData.Figures = pathFigureCollection;pathRoot.Data = pathData;if (percent > 0){double boundWith = Math.Abs(p3.X - p9.X);double boundHeight = boundWith;//根据Star要显示的百分比来进行显示颜色Size rectSize = new Size(boundWith * percent / 100d, boundHeight);Rect rect = new Rect(new Point(p9.X, p1.Y), rectSize);pathRoot.Clip = new RectangleGeometry() { Rect = rect };}return pathRoot;}/// <summary>/// 把角度值转换成弧度/// </summary>/// <param name="angle">角度值</param>/// <returns>弧度值</returns>private double GetRadianByAngle(double angle){return angle * Math.PI / 180d;}}
}

第二个是将每个五角星组合起来的控件

UcStarsView.xaml

<UserControlx:Class="App1.Common.UserControls.UcStarsView"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:App1.Common.UserControls"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"d:DesignHeight="300"d:DesignWidth="400"><StackPanel Name="spRoot" Orientation="{Binding StarOrientation}"></StackPanel>
</UserControl>

UcStarsView.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI;
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;
using Windows.UI.Xaml.Shapes;// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236namespace App1.Common.UserControls
{public sealed partial class UcStarsView : UserControl{public int StarSize{get { return (int)GetValue(StarSizeProperty); }set { SetValue(StarSizeProperty, value); }}// Using a DependencyProperty as the backing store for StarSize.  This enables animation, styling, binding, etc...public static readonly DependencyProperty StarSizeProperty =DependencyProperty.Register("StarSize", typeof(int), typeof(UcStarsView), new PropertyMetadata(100));public Color StarFillColor{get { return (Color)GetValue(StarFillColorProperty); }set { SetValue(StarFillColorProperty, value); }}// Using a DependencyProperty as the backing store for StarFillColor.  This enables animation, styling, binding, etc...public static readonly DependencyProperty StarFillColorProperty =DependencyProperty.Register("StarFillColor", typeof(Color), typeof(UcStarsView), new PropertyMetadata(Colors.Red));public Color StarStroke{get { return (Color)GetValue(StarStrokeProperty); }set { SetValue(StarStrokeProperty, value); }}// Using a DependencyProperty as the backing store for StarStroke.  This enables animation, styling, binding, etc...public static readonly DependencyProperty StarStrokeProperty =DependencyProperty.Register("StarStroke", typeof(Color), typeof(UcStarsView), new PropertyMetadata(Colors.White));/// <summary>/// 大于0小于等于StarMaxNumber的整数/// </summary>public int Rating{get { return (int)GetValue(RatingProperty); }set{if (Rating < 0){throw new ArithmeticException("Rating should be larger than Zero.");}else{if (Rating <= StarMaxNumber){SetValue(RatingProperty, value);}else{throw new ArithmeticException("The number is larger than StarMaxNumber.");}}}}// Using a DependencyProperty as the backing store for Rating.  This enables animation, styling, binding, etc...public static readonly DependencyProperty RatingProperty =DependencyProperty.Register("Rating", typeof(int), typeof(UcStarsView), new PropertyMetadata(5));public Orientation StarOrientation{get { return (Orientation)GetValue(StarOrientationProperty); }set { SetValue(StarOrientationProperty, value); }}// Using a DependencyProperty as the backing store for StarOrientation.  This enables animation, styling, binding, etc...public static readonly DependencyProperty StarOrientationProperty =DependencyProperty.Register("StarOrientation", typeof(Orientation), typeof(UcStarsView), new PropertyMetadata(Orientation.Horizontal));public int StarMaxNumber{get { return (int)GetValue(StarMaxNumberProperty); }set { SetValue(StarMaxNumberProperty, value); }}// Using a DependencyProperty as the backing store for StarMaxNumber.  This enables animation, styling, binding, etc...public static readonly DependencyProperty StarMaxNumberProperty =DependencyProperty.Register("StarMaxNumber", typeof(int), typeof(UcStarsView), new PropertyMetadata(5));/// <summary>/// 五角星之间的距离/// </summary>public double StarMargin{get { return (double)GetValue(StarMarginProperty); }set { SetValue(StarMarginProperty, value); }}// Using a DependencyProperty as the backing store for StarMargin.  This enables animation, styling, binding, etc...public static readonly DependencyProperty StarMarginProperty =DependencyProperty.Register("StarMargin", typeof(double), typeof(UcStarsView), new PropertyMetadata(5));public UcStarsView(){this.InitializeComponent();this.DataContext = this;this.Loaded += UcStarsView_Loaded;}void UcStarsView_Loaded(object sender, RoutedEventArgs e){for (int i = 0; i < Rating; i++){UcOneStarView star = CreateStar(true);star.StarFillColor = StarFillColor;star.Margin = new Thickness(0, 0, StarMargin, 0);spRoot.Children.Add(star);}for (int i = 0; i < StarMaxNumber - Rating; i++){UcOneStarView star = CreateStar(false);star.StarFillColor = Colors.Transparent;star.Margin = new Thickness(0, 0, StarMargin, 0);spRoot.Children.Add(star);}}private UcOneStarView CreateStar(bool isFill){UcOneStarView star = new UcOneStarView();star.StarSize = StarSize;star.StarStroke = StarStroke;star.IsFill = isFill;return star;}}
}http://go.microsoft.com/fwlink/?LinkId=234236namespace App1.Common.UserControls
{public sealed partial class UcStarsView : UserControl{public int StarSize{get { return (int)GetValue(StarSizeProperty); }set { SetValue(StarSizeProperty, value); }}// Using a DependencyProperty as the backing store for StarSize.  This enables animation, styling, binding, etc...public static readonly DependencyProperty StarSizeProperty =DependencyProperty.Register("StarSize", typeof(int), typeof(UcStarsView), new PropertyMetadata(100));public Color StarFillColor{get { return (Color)GetValue(StarFillColorProperty); }set { SetValue(StarFillColorProperty, value); }}// Using a DependencyProperty as the backing store for StarFillColor.  This enables animation, styling, binding, etc...public static readonly DependencyProperty StarFillColorProperty =DependencyProperty.Register("StarFillColor", typeof(Color), typeof(UcStarsView), new PropertyMetadata(Colors.Red));public Color StarStroke{get { return (Color)GetValue(StarStrokeProperty); }set { SetValue(StarStrokeProperty, value); }}// Using a DependencyProperty as the backing store for StarStroke.  This enables animation, styling, binding, etc...public static readonly DependencyProperty StarStrokeProperty =DependencyProperty.Register("StarStroke", typeof(Color), typeof(UcStarsView), new PropertyMetadata(Colors.White));/// <summary>/// 大于0小于等于StarMaxNumber的整数/// </summary>public int Rating{get { return (int)GetValue(RatingProperty); }set{if (Rating < 0){throw new ArithmeticException("Rating should be larger than Zero.");}else{if (Rating <= StarMaxNumber){SetValue(RatingProperty, value);}else{throw new ArithmeticException("The number is larger than StarMaxNumber.");}}}}// Using a DependencyProperty as the backing store for Rating.  This enables animation, styling, binding, etc...public static readonly DependencyProperty RatingProperty =DependencyProperty.Register("Rating", typeof(int), typeof(UcStarsView), new PropertyMetadata(5));public Orientation StarOrientation{get { return (Orientation)GetValue(StarOrientationProperty); }set { SetValue(StarOrientationProperty, value); }}// Using a DependencyProperty as the backing store for StarOrientation.  This enables animation, styling, binding, etc...public static readonly DependencyProperty StarOrientationProperty =DependencyProperty.Register("StarOrientation", typeof(Orientation), typeof(UcStarsView), new PropertyMetadata(Orientation.Horizontal));public int StarMaxNumber{get { return (int)GetValue(StarMaxNumberProperty); }set { SetValue(StarMaxNumberProperty, value); }}// Using a DependencyProperty as the backing store for StarMaxNumber.  This enables animation, styling, binding, etc...public static readonly DependencyProperty StarMaxNumberProperty =DependencyProperty.Register("StarMaxNumber", typeof(int), typeof(UcStarsView), new PropertyMetadata(5));/// <summary>/// 五角星之间的距离/// </summary>public double StarMargin{get { return (double)GetValue(StarMarginProperty); }set { SetValue(StarMarginProperty, value); }}// Using a DependencyProperty as the backing store for StarMargin.  This enables animation, styling, binding, etc...public static readonly DependencyProperty StarMarginProperty =DependencyProperty.Register("StarMargin", typeof(double), typeof(UcStarsView), new PropertyMetadata(5));public UcStarsView(){this.InitializeComponent();this.DataContext = this;this.Loaded += UcStarsView_Loaded;}void UcStarsView_Loaded(object sender, RoutedEventArgs e){for (int i = 0; i < Rating; i++){UcOneStarView star = CreateStar(true);star.StarFillColor = StarFillColor;star.Margin = new Thickness(0, 0, StarMargin, 0);spRoot.Children.Add(star);}for (int i = 0; i < StarMaxNumber - Rating; i++){UcOneStarView star = CreateStar(false);star.StarFillColor = Colors.Transparent;star.Margin = new Thickness(0, 0, StarMargin, 0);spRoot.Children.Add(star);}}private UcOneStarView CreateStar(bool isFill){UcOneStarView star = new UcOneStarView();star.StarSize = StarSize;star.StarStroke = StarStroke;star.IsFill = isFill;return star;}}
}

在Windows 8/WP/Silverlight/WPF下创建五角星相关推荐

win服务器创建文件夹命令行,怎样在windows的cmd命令行下创建删除文件和文件夹...
在window下我们往往通过'右键=>新建'命令来创建文件和文件夹,但有时会遇到以点开头的文件,比如.log,这种文件用鼠标新建是新建不了的,这时我们可以在DOS下用命令行来创建.所以在这里我 ...
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(11月28日-12月4日)
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(11月28日-12月4日) 本周Silverlight学习资源更新 Silverlight HttpUtil 封 ...
分享Silverlight/WPF/Windows Phone一周学习导读(10月1日-10月15日)
分享Silverlight/WPF/Windows Phone一周学习导读(10月1日-10月15日) 本周Silverlight学习资源更新: [Silverlight入门系列]ListboxIte ...
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(1月16日-2月5日)
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(1月16日-2月5日) 本周Silverlight学习资源更新 WIn2003部署Silverlight coo ...
分享Silverlight/WPF/Windows Phone一周学习导读(1月17日-1月23日)
上周微软Silverlight团队发布"微软发布Silverlight Native Extensions 1.0 - 扩展OOB应用功能",对于Silverlight开发人员而言 ...
分享Silverlight/WPF/Windows Phone一周学习导读(10月30日-11月6日)
分享Silverlight/WPF/Windows Phone一周学习导读(10月30日-11月6日) 本周Silverlight学习资源更新 Silverlight 定位 niejunhua [学习 ...
分享Silverlight/WPF/Windows Phone一周学习导读(8月15日-8月19日)
分享Silverlight/WPF/Windows Phone一周学习导读(8月15日-8月19日) 本周Silverlight学习资源更新: Silverlight Tools 4安装时的错误提示 ...
分享Silverlight/WPF/Windows Phone一周学习导读(3月1日-3月5日)
休假一个月,没有更新Silverlight/WPF/Windows Phone学习导读.从本周开始继续分享每周最新的Silverlight/WPF/Windows Phone开发学习导读. 本周Sil ...
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(4月16日-4月22日)
分享Silverlight/WPF/Windows Phone/HTML5一周学习导读(4月16日-4月22日) 本周Silverlight学习资源更新银光中国网友原创:Silverlight中获取 ...

在Windows 8/WP/Silverlight/WPF下创建五角星

在Windows 8/WP/Silverlight/WPF下创建五角星相关推荐

最新文章

热门文章