大佬教程收集整理的这篇文章主要介绍了silverlight 自定义控件基础篇（仿淘宝评论星级控件），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
首先说说今天的控件能干什么？1，仿淘宝的评论星级控件，鼠标滑过星星，会变亮。
2，可以用来，展示某一类对象的状态，或者统计信息，比如说，某一类对象，有1~10不同的状态，10为满状态，那么该控件就能根据该对象的状态显示。
显示方法（状态为1的 亮一颗星，灰色的9颗星，状态为2的 亮2颗，灰色的8颗，以此类推）
该控件的属性
@H_874_32@@H_874_32@ <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，相当于每颗星星的点击事件
@H_236_20@moveMe，相当于每颗星星鼠标移动事件
StarsControl的XAML
@H_874_32@<UserControl x:Class="TestDemo.StarsControl" xmlns="http://scheR_359_11845@as.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://scheR_359_11845@as.microsoft.com/winfx/2006/xaml" xmlns:mc="http://scheR_359_11845@as.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://scheR_359_11845@as.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);//给每个星星注册@L_151_29@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;@H_874_32@<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事件，点击星星时，弹出当前对象的名字
在看IsComment设为false，只展示不能改变星星的状态
我鼠标在6的位置 星星没有变亮...
还有个定义事件应该判断
public delegate void Click(object sender,MouseButtonEventArgs E) { if (ClickMe != null) { ClickMe(sender,E); } }@H_236_20@moveMe也一样..............
昨天本来做了一个动画的按钮，有点丑，放上去，又删掉了.....
周末了，大家周末玩的开心..............................................
以上是大佬教程为你收集整理的silverlight 自定义控件基础篇（仿淘宝评论星级控件）全部内容，希望文章能够帮你解决silverlight 自定义控件基础篇（仿淘宝评论星级控件）所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
