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

概述首先说说今天的控件能干什么？ 1，仿淘宝的评论星级控件，鼠标滑过星星，会变亮。 2，可以用来，展示某一类对象的状态，或者统计信息，比如说，某一类对象，有1~10不同的状态，10为满状态，那么该控件就能根据该对象的状态显示。 显示方法（状态为1的 亮一颗星，灰色的9颗星，状态为2的 亮2颗，灰色的8颗，以此类推） 该控件的属性 <my:StarsControl Number="6" Stars

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

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),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",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,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,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,7,

上下两张图片的星是不是不一样了，这就是IsComment属性为True 从左向右滑过灰色图片变亮，从右向左滑过时，变灰的效果
这个是ClickMe事件，点击星星时，d出当前对象的名字
在看IsComment设为false，只展示不能改变星星的状态
我鼠标在6的位置 星星没有变亮...
还有个定义事件应该判断
 public delegate voID Click(object sender,MousebuttonEventArgs e)        {            if (ClickMe != null)            {                ClickMe(sender,e);            }        }
MoveMe也一样..............

昨天本来做了一个动画的按钮，有点丑，放上去，又删掉了.....
周末了，大家周末玩的开心..............................................

总结

以上是内存溢出为你收集整理的silverlight 自定义控件基础篇（仿淘宝评论星级控件）全部内容，希望文章能够帮你解决silverlight 自定义控件基础篇（仿淘宝评论星级控件）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。