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);

        } 

    }

 

总结:这个小实例比较简单,同时也有很多功能未完成.在这里个人认为难点在圆的公式的把握上,需要多次测试才能得到理想的效果.

 

源码下载