silverlight 自定义控件基础篇（仿淘宝评论星级控件）

黄瓜黄瓜

墨衍会员 · AI 创作全网分发码龄15年

关注

原创最新推荐文章于 2026-04-06 03:03:42 发布 3k 阅读 AI 写同款· GEO 优化 ›

一套好用的 wpfUI控件源码一套好用的 wpfUI控件源码一套好用的 wpfUI控件源码一套好用的 wpfUI控件源码一套好用的 wpfUI控件源码一套好用的 wpfUI控件源码立即下载

首先说说今天的控件能干什么？

1，仿淘宝的评论星级控件，鼠标滑过星星，会变亮。

2，可以用来，展示某一类对象的状态，或者统计信息，比如说，某一类对象，有1~10不同的状态，10为满状态，那么该控件就能根据该对象的状态显示。

显示方法（状态为1的亮一颗星，灰色的9颗星，状态为2的亮2颗，灰色的8颗，以此类推）

该控件的属性

   <my:StarsControl Number="6" Stars="{Binding Num}" IsComment="True"  Margin="5" ClickMe="StarsControl_ClickMe" MoveMe="StarsControl_MoveMe" ></my:StarsControl>

1，Number，要显示的总星数量，比如6，总共显示6颗星（如果用作评论星级，代表满级6星）

2，Stars,该对象的状态，也就是将会亮多少颗星，其他的星（灰色）

3，IsComment,表示该控件是否能鼠标滑过，更改星的状态。true表示更改，false表示只用来展示，不更改

事件

ClickMe，相当于每颗星星的点击事件

MoveMe，相当于每颗星星鼠标移动事件

StarsControl的XAML

<UserControl x:Class="TestDemo.StarsControl"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="800" d:DesignWidth="300">
    <!--将每个StankPanel做为容器，将星星添加进来-->
     <StackPanel Orientation="Horizontal" x:Name="item" Loaded="item_Loaded" >

    </StackPanel>

</UserControl>

后置代码.cs

 public partial class StarsControl : UserControl//评论星级，或显示信誉度
    {
        public StarsControl()
        {
            InitializeComponent();
        }

        //定义要显示的星星个数,默认5
        public static readonly DependencyProperty NumberProperty = DependencyProperty.Register("Number", typeof(int), typeof(StarsControl), new PropertyMetadata(5,new PropertyChangedCallback(NumberPropertyChanged)));


        public int Number
        {
            get { return (int)GetValue(NumberProperty); }
            set { SetValue(NumberProperty, value); }
        }
        public static void NumberPropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
        {
            StarsControl starts = (StarsControl)obj;
            starts.Number = (int)args.NewValue;
        }


        //定义是用来显示用户信誉度，还是评星级的
        public static readonly DependencyProperty IsCommentProperty = DependencyProperty.Register("IsComment", typeof(bool), typeof(StarsControl), new PropertyMetadata(true, new PropertyChangedCallback(IsCommentPropertyChanged)));

         public bool  IsComment
        {
            get { return (bool)GetValue(IsCommentProperty); }
            set { SetValue(IsCommentProperty, value); }
        }
        public static void IsCommentPropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
        {
            StarsControl starts = (StarsControl)obj;
            starts.IsComment = (bool)args.NewValue;
        }

        //该用户信誉度，总的信誉度是Number,默认亮4颗
        public static readonly DependencyProperty StarsProperty = DependencyProperty.Register("Stars", typeof(int), typeof(StarsControl), new PropertyMetadata(new PropertyChangedCallback(StarsPropertyChanged)));


        public int Stars
        {
            get { return (int)GetValue(StarsProperty); }
            set { SetValue(StarsProperty, value); }
        }

        public static void StarsPropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
        {
            StarsControl test = (StarsControl)obj;
            string img = "/TestDemo;component/images/1.png";//亮的星星图片
            string img1 = "/TestDemo;component/images/0.png";//不亮的星星图片
         
            if ((int)args.NewValue >= test.Number)//判断该用户是的应该亮多少颗星
            {
                for (int i = 0; i < test.Number; i++)
                {
                    test.item.Children.Add(new Image() { Source = new BitmapImage(new Uri(img, UriKind.RelativeOrAbsolute)), Cursor = Cursors.Hand, ToolTip = new ToolTip() { Content = i + 1 } });
                }
            }
            else
            {
                int num = test.Number - (int)args.NewValue; //该用户没有达到满信誉，则算出不亮的星星有几颗
                int i;
                for (i = 0; i < (int)args.NewValue; i++)
                {
                    test.item.Children.Add(new Image() { Source = new BitmapImage(new Uri(img, UriKind.RelativeOrAbsolute)), Cursor = Cursors.Hand,ToolTip = new ToolTip() { Content=i+1 }});
                    
                }
              for (int j = 0; j < num; j++) //将不亮的星星加入StankPanel
                {
                    test.item.Children.Add(new Image() { Source = new BitmapImage(new Uri(img1, UriKind.RelativeOrAbsolute)), Cursor = Cursors.Hand, ToolTip = new ToolTip() { Content=i+j+1 } });

                }
            
            }
        }

        public Point InP;
        public Point OutP;
       
        private void item_Loaded(object sender, RoutedEventArgs e)
        {
            foreach (var v in ((StackPanel)sender).Children)//给所有的星星注册事件MouseMove，MouseLeave，MouseEnter
            {
                ((Image)v).MouseMove += new MouseEventHandler(StarsControl_MouseMove);
                ((Image)v).MouseLeave += new MouseEventHandler(StarsControl_MouseLeave);
                ((Image)v).MouseEnter += new MouseEventHandler(StarsControl_MouseEnter);
                ((Image)v).MouseLeftButtonDown += new MouseButtonEventHandler(StarsControl_MouseLeftButtonDown);//给每个星星注册一个MouseLeftButtonDown事件

            }
        }

        public delegate void Click(object sender, MouseButtonEventArgs e);
        public event Click ClickMe; //定义ClickMe事件，在调用此控件时，可以用该事件操作单个星星
        void StarsControl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            ClickMe(sender, e);
        }

        int result = 0;//记录鼠标是不是第一进入控件
        void StarsControl_MouseEnter(object sender, MouseEventArgs e)
        {
            if (result == 0)//
            {
                InP.X = e.GetPosition((Image)sender).X + 10;//第一次，获取当前坐标将x+10
            }
            else {
                InP = e.GetPosition((Image)sender);//不是第一次 则就获取当前坐标
                result = 1;
            }
           
        }

        void StarsControl_MouseLeave(object sender, MouseEventArgs e)
        {
            if (result == 0)
            {
                OutP.X = e.GetPosition((Image)sender).X  -10;//第一次，获取当前坐标将x-10
            }
            else
            {
                OutP = e.GetPosition((Image)sender);//不是第一次 则就获取当前坐标
                result = 1;
            };
        }
        public delegate void Move(object sender, MouseEventArgs e);
        public event Move MoveMe; //定义移动事件（调用该控件，如果要在鼠标移动到每个星上更改对象的时候用）

        //为什么第一次进去和离开要加10和减10，是因为如果一开始 将鼠标移到最后一颗星上，在下面的判断中是相当的，就不会产生变化
        void StarsControl_MouseMove(object sender, MouseEventArgs e)
        {
            MoveMe(sender, e);
            if (((bool)GetValue(IsCommentProperty))==true)//如果是用作评论星级的
            {
                string img = "/TestDemo;component/images/1.png";
                string img1 = "/TestDemo;component/images/0.png";


                if (InP.X < OutP.X) //如果鼠标进入时的坐标小于出去时的坐标，就以为着鼠标在从左向右移动，将所有移过的星星变亮（加载亮星星的路径）
                {
                    ((Image)sender).Source = new BitmapImage(new Uri(img, UriKind.RelativeOrAbsolute));

                }
                else
                {
                    //从右向左在移动，星星变灰
                    ((Image)sender).Source = new BitmapImage(new Uri(img1, UriKind.RelativeOrAbsolute));
                }
                //第一颗星星永远亮着
                ((Image)item.Children[0]).Source = new BitmapImage(new Uri(img, UriKind.RelativeOrAbsolute));

            }
        }
    }

以上StarsControl控件已经Ok，下面调用

xaml

 <StackPanel  Name="stackPanel1"   >
        <ItemsControl  x:Name="Item">

            <ItemsControl.Template>
                <ControlTemplate TargetType="ItemsControl">
                    <Border BorderBrush="Aqua" BorderThickness="1" CornerRadius="15">
                        <ItemsPresenter/>
                    </Border>
                </ControlTemplate>
            </ItemsControl.Template>

            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                   <StackPanel Orientation="Horizontal" >
                        <TextBlock  Text="{Binding Name}" Margin="10"></TextBlock>
                        <my:StarsControl x:Name="starts" Number="6" Stars="{Binding Num}" IsComment="True"  Margin="5" ClickMe="StarsControl_ClickMe" MoveMe="StarsControl_MoveMe" ></my:StarsControl>
                        <TextBlock  Text="信誉度" Margin="10"></TextBlock>
                        <TextBlock  Text="{Binding Num}" Margin="10"></TextBlock>
                    </StackPanel>
                 </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

      
    </StackPanel>

后置代码绑定

public class person 
    
    {
        private string name;

        public string Name
        {
            get { return name; }
            set { name = value; }
        }
        private int num;

        public int Num
        {
            get { return num; }
            set { num = value; }
        }
    }

List<person> list = new List<person>();
            list.Add(new person() { Name = "Jack", Num = 2 });
            list.Add(new person() { Name = "Jack", Num = 3 });
            list.Add(new person() { Name = "Jack", Num = 4 });
            list.Add(new person() { Name = "Jack", Num = 5 });
            list.Add(new person() { Name = "Jack", Num = 6 });
            list.Add(new person() { Name = "Jack", Num = 7 });

            Item.ItemsSource = list;

我是做了一个多条数据的绑定，当然可以直接赋值

<my:StarsControl x:Name="starts" Number="6" Stars="5" IsComment="True"  Margin="5" ></my:StarsControl>

好了，看看效果

总共显示6颗星，对象的状态为2,3,4,5,6,7 和直接赋值的5，星都是可以更改的因为IsComment为True嘛，

还有两个事件

 private void StarsControl_ClickMe(object sender, MouseButtonEventArgs e)
        {
            MessageBox.Show(((person)((Image)sender).DataContext).Name);  
        }

        private void StarsControl_MoveMe(object sender, MouseEventArgs e)
        {
            MessageBox.Show(((person)((Image)sender).DataContext).Name);  
        }

加载没错，jack的Num是2,3,4,5,6,7,

上下两张图片的星是不是不一样了，这就是IsComment属性为True 从左向右滑过灰色图片变亮，从右向左滑过时，变灰的效果

这个是ClickMe事件，点击星星时，弹出当前对象的名字

在看IsComment设为false，只展示不能改变星星的状态

我鼠标在6的位置星星没有变亮...

还有个定义事件应该判断

 public delegate void Click(object sender, MouseButtonEventArgs e);
        public event Click ClickMe; //定义ClickMe事件，在调用此控件时，可以用该事件操作单个星星
        void StarsControl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (ClickMe != null)
            {
                ClickMe(sender, e);
            }
        }

MoveMe也一样..............

昨天本来做了一个动画的按钮，有点丑，放上去，又删掉了.....

周末了，大家周末玩的开心..............................................