Silverlight實現簡單鼠標手勢控制頁面滾動
作者：零末
看了MSDN的WebCast的《用Silverlight實現簡單鼠標手勢控制頁面滾動》視頻，筆者就他的講述寫出了一個小例子。希望對大家有所幫助。。
上圖藍色部分就是鼠標手勢控制的部分，劃過這塊區域，瀏覽器的滾動條就會做出相應的反應。我寫的這個程序只能適合在IE，Firefox我測試了一下沒有反應，其他瀏覽器我并沒有進行測試。
這個程序的設計目標：用Silverlight實現一個浮動在頁面右下角的鼠標手勢控制塊，讓用戶用鼠標手勢控制頁面滾動，提供更好的用戶瀏覽體驗。
鼠標手勢設計計劃：
1.制作一個浮動DIV，承載Silverlight。
2.實現鼠標移動方向與速度識別
3.調用js控制scrollbar
4.測試
鼠標手勢詳細步驟：
1.制作一個浮動DIV，承載Silverlight。
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<Point> TempPoints = new List<Point>();//點集合
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 (string.Format("window.scrollBy({0},{1});",x,y)); |
以上就可以完成這樣的一個功能了。
【編輯推薦】
責任編輯：彭凡
來源：
博客園
