WPF-22：WPF绘制五角星改进版（增加半个五角星的绘制）

初步实现了一个绘制五角星的控件（http://blog.csdn.net/yysyangyangyangshan/article/details/9303005），但是在实际中有一种情况显示半颗五角星的。下面做一下改进，完善一下这个五角星控件。
功成名：TestFivePointStarLikeTaobao，
项目如图，

1、两种五角星的绘制方法
这两种计算坐标的方法比较重要。
五点画法，也是常用画法。

        /// <summary>         ///第一种画法 根据半径和圆心确定五个点         /// </summary>         /// <param name="center"></param>         /// <returns></returns>         private PointCollection GetFivePoint1(Point center,double r)         {             double h1 = r * Math.Sin(18 * Math.PI / 180);               double h2 = r * Math.Cos(18 * Math.PI / 180);               double h3 = r * Math.Sin(36 * Math.PI / 180);               double h4 = r * Math.Cos(36 * Math.PI / 180);               Point p1 = new Point(r, center.X);               Point p2 = new Point(r - h2, r - h1);               Point p3 = new Point(r - h3, r + h4);               Point p4 = new Point(r + h3, p3.Y);               Point p5 = new Point(r + h2, p2.Y);               List<Point> values = new List<Point>() { p1, p3, p5, p2, p4 };               PointCollection pcollect = new PointCollection(values);               return pcollect;         }

十点画法，这种比较方便画半颗五角星。

        /// <summary>         ///第二种画法 根据半径和圆心确定十个点         /// </summary>         /// <param name="center"></param>         /// <returns></returns>         private PointCollection GetFivePoint2(Point center, double r)         {             int i;               //两个圆的半径 和第一个点初始角度             //r1 = r / 2.5, r2 = r值的互换确定是正五角星还是倒五角星             double r1 = r / 2.5, r2 = r, g = 18;               double pi = Math.PI;               List<Point> values = new List<Point>(10);//十个点               List<Point> values1 = new List<Point>(5);//(内)外接五个点               List<Point> values2 = new List<Point>(5);//(外)内接五个点               for (i = 0; i < 5; i++)             {                 //计算10个点的坐标                 Point p1 = new Point(r1 * Math.Cos(g * pi / 180), r1 * Math.Sin(g * pi / 180));                   Point p2 = new Point(r2 * Math.Cos((g + 36) * pi / 180), r2 * Math.Sin((g + 36) * pi / 180));                   values1.Add(p1);                   values2.Add(p2);                   g += 72;             }             //左半边：3,4,5,6,7,8             //右半边：1,2,3,8,9,10             values.Add(values1[0]);//1             values.Add(values2[0]);//2             values.Add(values1[1]);//3             values.Add(values2[1]);//4             values.Add(values1[2]);//5             values.Add(values2[2]);//6             values.Add(values1[3]);//7             values.Add(values2[3]);//8             values.Add(values1[4]);//9             values.Add(values2[4]);//10                         PointCollection pcollect = new PointCollection(values);               return pcollect;         }

五角星类代码：

    public class FivePointStar:UserControl     {         private double radius = 20;           private double currentPart = 1;           private Brush selectBackground = new SolidColorBrush(Colors.YellowGreen);           private Brush unselectBackgroud = new SolidColorBrush(Colors.DarkGray);           /// <summary>         /// 半径         /// </summary>         public double Radius         {             get              {                object result = GetValue(RadiusProperty);                   if(result==null)                 {                     return radius;                 }                   return (double)result;             }               set             {                 SetValue(RadiusProperty, value);                   this.InvalidateVisual();             }         }           public static  DependencyProperty RadiusProperty =            DependencyProperty.Register("Radius", typeof(double), typeof(FivePointStar), new UIPropertyMetadata());           /// <summary>         /// 当前是否是一颗星         /// </summary>         public double CurrentPart         {             get             {                 object result = GetValue(CurrentPartProperty);                   if (result == null)                 {                     return currentPart;                 }                 return (double)result;             }               set             {                 SetValue(CurrentPartProperty, value);                   this.InvalidateVisual();             }         }           public static  DependencyProperty CurrentPartProperty =            DependencyProperty.Register("CurrentPart", typeof(double), typeof(FivePointStar), new UIPropertyMetadata());           /// <summary>         /// 选中颜色         /// </summary>         public Brush SelectBackground         {             get             {                 object result = GetValue(SelectBackgroundProperty);                   if (result == null)                 {                     return selectBackground;                 }                   return (Brush)result;             }               set             {                 SetValue(SelectBackgroundProperty, value);                   //this.InvalidateVisual();             }         }           public static  DependencyProperty SelectBackgroundProperty =            DependencyProperty.Register("SelectBackground", typeof(Brush), typeof(FivePointStar), new UIPropertyMetadata());           /// <summary>         /// 未选中颜色         /// </summary>         public Brush UnSelectBackground         {             get             {                 object result = GetValue(UnSelectBackgroundProperty);                   if (result == null)                 {                     return unselectBackgroud;                 }                   return (Brush)result;             }               set             {                 SetValue(UnSelectBackgroundProperty, value);             }         }           public static  DependencyProperty UnSelectBackgroundProperty =            DependencyProperty.Register("UnSelectBackground", typeof(Brush), typeof(FivePointStar), new UIPropertyMetadata());             public FivePointStar()             : base()         {             this.Loaded += new RoutedEventHandler(FivePointStar_Loaded);         }           void FivePointStar_Loaded(object sender, RoutedEventArgs e)         {             //如果使用第一种画法就要开启此注释             //this.MinHeight = Radius * 2;               //this.MaxHeight = Radius * 2;               //this.MinWidth = Radius * 2;               //this.MaxWidth = Radius * 2;               //this.Background = Brushes.Transparent;               this.MinHeight = 0;               this.MaxHeight = 0;               this.MinWidth = 0;               this.MaxWidth = 0;               this.Background = Brushes.Transparent;         }           protected override void OnRender(System.Windows.Media.DrawingContext dc)         {             base.OnRender(dc);               Point center = new Point();               PointCollection Points = GetFivePoint2(center,Radius);               Canvas ca = new Canvas();               if (CurrentPart == 1)             {                 Polygon plg = new Polygon();                   plg.Points = Points;                   plg.Stroke = Brushes.Transparent;                   plg.StrokeThickness = 2;                   plg.Fill = this.SelectBackground;                   plg.FillRule = FillRule.Nonzero;                   ca.Children.Add(plg);             }             else if (CurrentPart ==0)             {                 Polygon plg = new Polygon();                   plg.Points = Points;                   plg.Stroke = Brushes.Transparent;                   plg.StrokeThickness = 2;                   plg.Fill = this.UnSelectBackground;                   plg.FillRule = FillRule.Nonzero;                   ca.Children.Add(plg);             }             else             {                 //半边五角星的画法                 Polygon plg1 = new Polygon();                   Polygon plg2 = new Polygon();                   plg1.Points = Points;                   plg1.Stroke = Brushes.Transparent;                   plg1.StrokeThickness = 2;                   plg1.FillRule = FillRule.Nonzero;                   plg2.Points = Points;                   plg2.Stroke = Brushes.Transparent;                   plg2.StrokeThickness = 2;                   plg2.FillRule = FillRule.Nonzero;                   //左半边：3,4,5,6,7,8                 //右半边：1,2,3,8,9,10                 plg1.Points = new PointCollection()                  {                      Points[2],                     Points[3],                     Points[4],                     Points[5],                     Points[6],                     Points[7],                 };                   plg1.Fill = SelectBackground;                   plg2.Points = new PointCollection()                  {                      Points[0],                     Points[1],                     Points[2],                     Points[7],                     Points[8],                     Points[9],                 };                   plg2.Fill = UnSelectBackground;                   ca.Children.Add(plg1);                   ca.Children.Add(plg2);             }               ca.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;               ca.VerticalAlignment = System.Windows.VerticalAlignment.Stretch;               this.Content = ca;               //Brush b = new SolidColorBrush(Colors.Yellow);               //Pen p = new Pen(b, 2);               //var path = new Path();               //var gc = new GeometryConverter();               //path.Data = (Geometry)gc.ConvertFromString(string.Format("M {0} {1} {2} {3} {4} Z",             //    Points[0], Points[1], Points[2], Points[3], Points[4]));               //path.Fill = Brushes.Yellow;               //dc.DrawGeometry(b, p, path.Data);         }           /// <summary>         ///第一种画法 根据半径和圆心确定五个点         /// </summary>         /// <param name="center"></param>         /// <returns></returns>         private PointCollection GetFivePoint1(Point center,double r)         {             double h1 = r * Math.Sin(18 * Math.PI / 180);               double h2 = r * Math.Cos(18 * Math.PI / 180);               double h3 = r * Math.Sin(36 * Math.PI / 180);               double h4 = r * Math.Cos(36 * Math.PI / 180);               Point p1 = new Point(r, center.X);               Point p2 = new Point(r - h2, r - h1);               Point p3 = new Point(r - h3, r + h4);               Point p4 = new Point(r + h3, p3.Y);               Point p5 = new Point(r + h2, p2.Y);               List<Point> values = new List<Point>() { p1, p3, p5, p2, p4 };               PointCollection pcollect = new PointCollection(values);               return pcollect;         }           /// <summary>         ///第二种画法 根据半径和圆心确定十个点         /// </summary>         /// <param name="center"></param>         /// <returns></returns>         private PointCollection GetFivePoint2(Point center, double r)         {             int i;               //两个圆的半径 和第一个点初始角度             //r1 = r / 2.5, r2 = r值的互换确定是正五角星还是倒五角星             double r1 = r / 2.5, r2 = r, g = 18;               double pi = Math.PI;               List<Point> values = new List<Point>(10);//十个点               List<Point> values1 = new List<Point>(5);//(内)外接五个点               List<Point> values2 = new List<Point>(5);//(外)内接五个点               for (i = 0; i < 5; i++)             {                 //计算10个点的坐标                 Point p1 = new Point(r1 * Math.Cos(g * pi / 180), r1 * Math.Sin(g * pi / 180));                   Point p2 = new Point(r2 * Math.Cos((g + 36) * pi / 180), r2 * Math.Sin((g + 36) * pi / 180));                   values1.Add(p1);                   values2.Add(p2);                   g += 72;             }             //左半边：3,4,5,6,7,8             //右半边：1,2,3,8,9,10             values.Add(values1[0]);//1             values.Add(values2[0]);//2             values.Add(values1[1]);//3             values.Add(values2[1]);//4             values.Add(values1[2]);//5             values.Add(values2[2]);//6             values.Add(values1[3]);//7             values.Add(values2[3]);//8             values.Add(values1[4]);//9             values.Add(values2[4]);//10                         PointCollection pcollect = new PointCollection(values);               return pcollect;         }     }

这个可以直接使用，效果如下

2、多颗五角星控件
前台，

<UserControl x:Class="TestFivePointStarLikeTaobao.FivePointStarGroup"              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"               xmlns:d="http://schemas.microsoft.com/expression/blend/2008"               xmlns:local="clr-namespace:TestFivePointStarLikeTaobao"              mc:Ignorable="d">     <Grid x:Name="groupGrid" Background="Transparent">         <ListBox x:Name="lsbchildCategory" ItemsSource="{Binding ChildCategoryList,IsAsync=True}"                      Background="WhiteSmoke" BorderThickness="0">             <ListBox.ItemTemplate>                 <DataTemplate>                     <local:FivePointStar Radius="{Binding Radius}" CurrentPart="{Binding CurrentValue}" Tag="{Binding ID}" Margin="{Binding Margins}"                                          SelectBackground="{Binding SelectBackground}" UnSelectBackground="{Binding UnselectBackgroud}"                                          MouseDown="FivePointStar_MouseDown"/>                 </DataTemplate>             </ListBox.ItemTemplate>             <ListBox.ItemsPanel>                 <ItemsPanelTemplate>                     <StackPanel  VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Center"/>                 </ItemsPanelTemplate>             </ListBox.ItemsPanel>         </ListBox>     </Grid> </UserControl>

后台，

    /// <summary>     /// FivePointStarGroup.xaml 的交互逻辑     /// </summary>     public partial class FivePointStarGroup : UserControl     {         private double radius = 20;           private double itemsCount = 5;           private double selectCount = 5;           private Brush selectBackground = new SolidColorBrush(Colors.YellowGreen);           private Brush unselectBackgroud = new SolidColorBrush(Colors.DarkGray);             /// <summary>         /// 五角星半径         /// </summary>         public double Radius         {             get              {                object result = GetValue(RadiusProperty);                   if(result==null)                 {                     return radius;                 }                   return (double)result;             }               set             {                 SetValue(RadiusProperty, value);             }         }           public static  DependencyProperty RadiusProperty =            DependencyProperty.Register("Radius", typeof(double),             typeof(FivePointStarGroup), new UIPropertyMetadata());           /// <summary>         /// 五角星个数         /// </summary>         public double ItemsCount         {             get             {                 object result = GetValue(ItemsCountProperty);                   if (result == null)                 {                     return  itemsCount;                 }                   return (double)result;             }               set             {                 SetValue(ItemsCountProperty, value);                   InitialData();                   this.InvalidateVisual();             }         }           public static  DependencyProperty ItemsCountProperty =            DependencyProperty.Register("ItemsCount", typeof(double),            typeof(FivePointStar), new UIPropertyMetadata());           /// <summary>         /// 选中的五角星个数         /// </summary>         public double SelectCount         {             get             {                 object result = GetValue(SelectCountProperty);                   if (result == null)                 {                     return selectCount;                 }                   return (double)result;             }               set             {                 SetValue(SelectCountProperty, value);                   InitialData();                   this.InvalidateVisual();             }         }           public static  DependencyProperty SelectCountProperty =            DependencyProperty.Register("SelectCount", typeof(double),            typeof(FivePointStar), new UIPropertyMetadata());           public event RoutedEventHandler SelectCountChangeEvent         {             add { AddHandler(SelectCountChangePropertyEvent, value); }               remove { RemoveHandler(SelectCountChangePropertyEvent, value); }         }           /// <summary>         /// 选中颜色         /// </summary>         public Brush SelectBackground         {             get             {                 object result = GetValue(SelectBackgroundProperty);                   if (result == null)                 {                     return selectBackground;                 }                   return (Brush)result;             }               set             {                 SetValue(SelectBackgroundProperty, value);             }         }           public static  DependencyProperty SelectBackgroundProperty =            DependencyProperty.Register("SelectBackground", typeof(Brush),            typeof(FivePointStarGroup), new UIPropertyMetadata());           /// <summary>         /// 未选中颜色         /// </summary>         public Brush UnSelectBackground         {             get             {                 object result = GetValue(UnSelectBackgroundProperty);                   if (result == null)                 {                     return unselectBackgroud;                 }                   return (Brush)result;             }               set             {                 SetValue(UnSelectBackgroundProperty, value);             }         }           public static  DependencyProperty UnSelectBackgroundProperty =            DependencyProperty.Register("UnSelectBackground", typeof(Brush),             typeof(FivePointStarGroup), new UIPropertyMetadata());           public static  RoutedEvent SelectCountChangePropertyEvent =              EventManager.RegisterRoutedEvent("SelectCountChangeEvent",               RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(Control));           public FivePointStarGroup()         {             InitializeComponent();               this.Loaded += new RoutedEventHandler(FivePointStarGroup_Loaded);         }           void FivePointStarGroup_Loaded(object sender, RoutedEventArgs e)         {             InitialData();         }           private void InitialData()         {             List<FivePointStarModel> list = new List<FivePointStarModel>();               int count = Convert.ToInt32(this.ItemsCount);               if (count <= 0)             {                 count = Convert.ToInt32(this.itemsCount);             }               for (int i = 0; i < count; i++)             {                 FivePointStarModel item = new FivePointStarModel();                   item.ID = i + 1;                   item.Radius = Radius;                   item.SelectBackground = SelectBackground;                   item.UnselectBackgroud = UnSelectBackground;                   item.Margins = new Thickness(Radius, 0, Radius, 0);                   //在此设置星形显示的颜色                 if ((i + 1) > SelectCount && ((i + 1 - SelectCount) > 0) &&                      (i + 1 - SelectCount) < 1)                 {                     item.CurrentValue = 0.5;                 }                 else if ((i + 1) > SelectCount)                 {                     item.CurrentValue = 0;                 }                 else                 {                     item.CurrentValue = 1;                 }                   list.Add(item);             }               this.lsbchildCategory.ItemsSource = list;         }           private void FivePointStar_MouseDown(object sender, MouseButtonEventArgs e)         {             FivePointStar m = sender as FivePointStar;               if (m == null)             {                 return;             }               int index = Convert.ToInt32(m.Tag);               this.SelectCount = index;               RaiseEvent(new RoutedEventArgs(SelectCountChangePropertyEvent, sender));          }     }

用于绑定的类，

   public class FivePointStarModel:NotifyObject     {         private int id;           private double radius = 20;           private double currentValue = 1;           private Brush selectBackground = new SolidColorBrush(Colors.GreenYellow);           private Brush unselectBackgroud = new SolidColorBrush(Colors.DarkGray);           private Thickness margins = new Thickness(0);           public int ID         {             get { return id; }               set             {                 id = value;                   this.OnPropertyChanged("Radius");             }         }           public double Radius         {             get { return radius; }               set              {                  radius = value;                   this.OnPropertyChanged("Radius");             }         }           public double CurrentValue         {             get { return currentValue; }               set              {                 currentValue = value;                   this.OnPropertyChanged("CurrentValue");             }         }           public Brush SelectBackground         {             get { return selectBackground; }               set             {                 selectBackground = value;                   this.OnPropertyChanged("SelectBackground");             }         }           public Brush UnselectBackgroud         {             get { return unselectBackgroud; }               set             {                 unselectBackgroud = value;                   this.OnPropertyChanged("UnselectBackgroud");             }         }             public Thickness Margins         {             get { return margins; }               set             {                 margins = value;                   this.OnPropertyChanged("Radius");             }         }     }       public abstract class NotifyObject : INotifyPropertyChanged     {           public void OnPropertyChanged(string propname)         {             if (this.PropertyChanged != null)             {                 PropertyChanged(this, new PropertyChangedEventArgs(propname));             }         }           public event PropertyChangedEventHandler PropertyChanged;     }

这个控件中，增加了设置一颗五角星的三种状态：全选中、全部选中，选中半颗。
对于绑定的类，增加了Margin的绑定。
3、测试调用
前台，

<Window x:Class="TestFivePointStarLikeTaobao.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         Title="MainWindow" Height="446" Width="849" xmlns:my="clr-namespace:TestFivePointStarLikeTaobao">     <Grid>         <my:FivePointStarGroup HorizontalAlignment="Stretch" Margin="136,65,361,281" x:Name="fivePointStarGroup1"                                 VerticalAlignment="Stretch" SelectBackground="GreenYellow" Radius="30" Visibility="Visible"                                UnSelectBackground="DarkGray" ItemsCount="5" SelectCount="5" />         <TextBox Height="30" HorizontalAlignment="Left" Margin="202,232,0,0" Name="textBox1" VerticalAlignment="Top" Width="120"  FontSize="18" />         <Button Content="设 置" Height="46" HorizontalAlignment="Left" Margin="365,192,0,0" Name="button1" VerticalAlignment="Top" Width="142" FontSize="18" Click="button1_Click" />         <TextBox Height="30" HorizontalAlignment="Left" Margin="202,159,0,0" Name="textBox2" VerticalAlignment="Top" Width="120" FontSize="18"/>         <TextBlock Height="23" HorizontalAlignment="Left" Margin="136,232,0,0" Name="textBlock1" Text="选 中：" VerticalAlignment="Top" FontSize="18"/>         <TextBlock Height="23" HorizontalAlignment="Left" Margin="136,159,0,0" Name="textBlock2" Text="总 数：" VerticalAlignment="Top"  FontSize="18"/>         <my:FivePointStar HorizontalAlignment="Left" Margin="666,232,0,0" x:Name="fivePointStar1" VerticalAlignment="Top" Height="0" Width="0" Radius="30"                           CurrentPart="1"/>     </Grid> </Window>

后台，

    /// <summary>     /// MainWindow.xaml 的交互逻辑     /// </summary>     public partial class MainWindow : Window     {         public MainWindow()         {             InitializeComponent();               InitialData();               this.fivePointStarGroup1.SelectCountChangeEvent += new RoutedEventHandler(fivePointStarGroup1_SelectCountChangeEvent);         }           private void InitialData()         {             this.textBox1.Text = this.fivePointStarGroup1.SelectCount.ToString();               this.textBox2.Text = this.fivePointStarGroup1.ItemsCount.ToString();         }           void fivePointStarGroup1_SelectCountChangeEvent(object sender, RoutedEventArgs e)         {             InitialData();         }           private void button1_Click(object sender, RoutedEventArgs e)         {             double selectCount = Convert.ToDouble(this.textBox1.Text);               int allCount = Convert.ToInt32(this.textBox2.Text);               if (allCount < selectCount)             {                 MessageBox.Show("参数设置错误!");                   return;             }             this.fivePointStarGroup1.ItemsCount = allCount;               this.fivePointStarGroup1.SelectCount = selectCount;         }     } 

最终效果图，

这样可以适用于大部分的评级功能。
代码下载： http://download.csdn.net/detail/yysyangyangyangshan/5743911