SilverLight3 cool开发(二) Mac Dock栏
上一篇中的问题至今没有解决,使用SL3创建的新项目都会预览报错,现在是开发环境的问题无疑了.今天在VS2010下使用SL2重做了一遍,结果写的那个手写识别服务无法兼容,没办法了,哪位大哥帮帮小弟?
今天来做一下用SilverLight开发Mac Dock栏,只能用VS2010+SL2了,效果没什么区别.
先贴几张效果图:
第一步:新建项目,这次做的是一个小插件,所以可以不用网站来承载,与上次有所不同
添加New Item(到这里机器又死了,关了重开,公司的电脑配置低啊),SilverLight User Control 2个
,一个用来显示每个小圆UserDockItem,另一个用来承载所有圆UserDock
第二步:定义小圆的功能事件
1.前台画小圆,并且定义小圆的原始大小与鼠标移动事件
| Width="30" Height="30" MouseMove="UserControl_MouseMove" > |
| <Grid x:Name="LayoutRoot" Background="Transparent"> |
| <Ellipse Fill="Red"> |
| </Ellipse> |
| </Grid> |
2.后台Coding
| internal UserDock Dock;//引用承载对象 |
| public UserDockItem() |
| { |
| InitializeComponent(); |
| } |
| /// <summary> |
| /// 求出鼠标到指定球的距离 |
| /// </summary> |
| /// <param name="mouse">鼠标位置</param> |
| /// <param name="target">到哪一个球</param> |
| public double CalculateDistance(MouseEventArgs mouse, UserDockItem target) |
| { |
| double mouseX = mouse.GetPosition(target).X - (target.ActualWidth / 2); |
| double mouseY = mouse.GetPosition(target).Y - (target.ActualHeight / 2); |
| double d = Math.Sqrt(mouseX*mouseX+mouseY*mouseY); |
| return d; |
| } |
| /// <summary> |
| /// 改变球大小 |
| /// </summary> |
| /// <param name="e"></param> |
| private void Change(MouseEventArgs e) |
| { |
| foreach (var item in Dock.items) |
| { |
| double d = CalculateDistance(e, item); |
| double z = Zoom(d, Dock.Sensitivity, Dock.MaxZoom); |
| item.Height = z * Dock.Size;//假定是正方型 |
| item.Width = z * Dock.Size; |
| } |
| } |
| /// <summary> |
| /// 返回单位放大缩小倍数 |
| /// </summary> |
| /// <param name="d">当前距离</param> |
| /// <param name="s">最大距离</param> |
| /// <param name="m">最大的倍数</param> |
| /// <returns></returns> |
| public double Zoom(double d, double s, double m) |
| { |
| double z = m * (d - s) * (d - s) / ((s * s) + 1); |
| if (z < 1) |
| return 1; |
| else |
| return z; |
| } |
| //鼠标移动 |
| private void UserControl_MouseMove(object sender, MouseEventArgs e) |
| { |
| Change(e); |
| } |
因为引用了UserDock里面定义的属性,所以当前页面的Dock.items目前还不存在,进入第二步
第二步:UserDock设置
1.前台
只需要将Grid改为StackPanel ,上次提到StackPanel 的作用是更直观的布局,这里改为水平排列
| <StackPanel Orientation="Horizontal" x:Name="LayoutRoot" Background="White"> |
| </StackPanel> |
2.后台
因为这是一个小控件,很多属性给调用者去设定,为以后新增功能提供接口
| internal List<SilverDockItem> items = new List<SilverDockItem>();//引用小圆 |
| public double MaxZoom{ get; set; } //最大放大倍数 |
| public double Sensitivity { get; set; } //灵敏度 |
| public double Size { get; set; } //小圆的尺寸,默认为正方形 |
| public UserDock() |
| { |
| InitializeComponent(); |
| } |
| //添加小圆方法 |
| public void AddItem(SilverDockItem item) |
| { |
| item.Dock = this; |
| item.Width = Size; |
| item.Height = Size; |
| items.Add(item); |
| LayoutRoot.Children.Add(item); |
| } |
| //删除小圆 |
| public void RemoveItem(SilverDockItem item) |
| { |
| items.Remove(item); |
| LayoutRoot.Children.Remove(item); |
| } |
第三步:调用控件
控件已经初步写好了,现在开始在MainPage.xaml.cs里面调用
| public MainPage() |
| { |
| InitializeComponent(); |
| //添加用户控件 |
| UserDock D = new UserDock(); |
| D.Sensitivity = 600;//敏感距离 |
| D.MaxZoom = 5;//最大倍数 |
| D.Size = 40;//位置 |
| LayoutRoot.Children.Add(D); |
| //添加10个小圆 |
| for (int i = 1; i <10;i++) |
| { |
| SilverDockItem S = new SilverDockItem(); |
| D.AddItem(S); |
| } |
| } |
总结:这个小实例比较简单,同时也有很多功能未完成.在这里个人认为难点在圆的公式的把握上,需要多次测试才能得到理想的效果.
