[[5264]]

上图蓝色部分就是鼠标手势控制的部分，划过这块区域，浏览器的滚动条就会做出相应的反应。我写的这个程序只能适合在IE，Firefox我测试了一下没有反应，其他浏览器我并没有进行测试。

这个程序的设计目标：用Silverlight实现一个浮动在页面右下角的鼠标手势控制块，让用户用鼠标手势控制页面滚动，提供更好的用户浏览体验。

鼠标手势设计计划：

1.制作一个浮动DIV，承载Silverlight。

2.实现鼠标移动方向与速度识别

3.调用js控制scrollbar

4.测试

鼠标手势详细步骤：

1.制作一个浮动DIV，承载Silverlight。

Code
 1

 2  

用id为silverlightControlHost的DIV来承载Silverlight。用下面的js代码来使div浮动：

2.实现鼠标移动方向与速度识别

Code
 1 public MainPage()
 2        {
 3            InitializeComponent();
 4            timer.Completed += new EventHandler(timer_Completed);
 5        }
 6
 7        void timer_Completed(object sender, EventArgs e)
 8        {
 9            //throw new NotImplementedException();
10            if (Math.Abs(v_x) <= V_Min && Math.Abs(v_y) <= V_Min)
11            {
12                v_x = 0;
13                v_y = 0;
14                const_time = 0;
15                Current_Time = 0;
16            }
17            else
18            {
19                if (Current_Time < const_time)
20                {
21                    Current_Time++;
22                }
23                else
24                {
25                    if (Math.Abs(v_x) > V_Min)
26                    {
27                        v_x = Math.Sign(v_x) * (Math.Abs(v_x) - Math.Abs(dec));
28                    }
29                    if (Math.Abs(v_y) > V_Min)
30                    {
31                        v_y = Math.Sign(v_y) * (Math.Abs(v_y) - Math.Abs(dec));
32                    }
33                }
34                ScollBy(v_x, v_y);
35                timer.Begin();
36            }
37        }
38        //惯性计算
39        double dec = 0.3;
40        const double V_Min = 0.3;
41        double Current_Time = 0;
42
43
44        Point StartPoint;//开始点
45        Point EndPoint;//结束点
46        List TempPoints = new List();//点集合
47        bool IsRecording = true;//是否录制
48        double v_x;
49        double v_y;
50        double const_time;
51        public Storyboard timer = new Storyboard() { Duration = new Duration(new TimeSpan(0, 0, 0, 0, 10)) };
52        //timer.Interval=10;
53        
54        private void MainInput_MouseMove(object sender, MouseEventArgs e)
55        {
56            if (IsRecording)
57            {
58                TempPoints.Add(e.GetPosition(null));
59            }
60        }
61
62        private void MainInput_MouseEnter(object sender, MouseEventArgs e)
63        {
64            P.Points.Clear();
65            P.Points.Add(e.GetPosition(null));
66            IsRecording = true;
67            StartPoint = e.GetPosition(null);
68            TempPoints.Clear();
69            TempPoints.Add(StartPoint);
70        }
71
72        private void MainInput_MouseLeave(object sender, MouseEventArgs e)
73        {
74            IsRecording = false;
75            EndPoint = TempPoints[TempPoints.Count - 1];
76            v_x = (StartPoint.X - EndPoint.X) / TempPoints.Count;
77            v_y = (StartPoint.Y - EndPoint.Y) / TempPoints.Count;
78            const_time = 100 / TempPoints.Count;
79            P.Points.Add(EndPoint);
80            timer.Stop();
81            timer.Begin();
82        }

3.调用js控制scrollbar

Code
1public void ScollBy(double x, double y)
2        {
3            //window.scollBy(x,y);
4            //直接调用js
5  System.Windows.Browser.HtmlPage.Window.Eval

(string.Format("window.scrollBy({0},{1});",x,y));
6        }
4.测试。

以上就可以完成这样的一个功能了。

【编辑推荐】

1. Office 2010将使用Silverlight改善用户体验
2. 微软.NET平台主管谈Silverlight企业级开发
3. Flash与Silverlight多领域实测对比
4. 微软宣称Silverlight装机量超过三亿
5. 图解Silverlight 3的7个新功能