稳扎稳打Silverlight(13) - 2.0交互之鼠标事件和键盘事件

简介:
[索引页]
[源码下载]


稳扎稳打Silverlight(13) - 2.0交互之鼠标事件和键盘事件


作者: webabcd


介绍
Silverlight 2.0 人机交互:响应用户的鼠标操作和键盘操作
    MouseEnter - 鼠标进入时触发的事件(显然,此事件不能冒泡)
    MouseLeave - 鼠标离开时触发的事件(显然,此事件不能冒泡)
    MouseLeftButtonDown - 鼠标左键单击按下时触发的事件
    MouseLeftButtonUp - 鼠标左键单击按下并放开时触发的事件
    MouseMove - 鼠标移动时触发的事件
    MouseEventArgs.GetPosition() - 鼠标相对于指定元素的坐标
    MouseButtonEventArgs.Handled - 此事件是否已被处理
    KeyDown - 鼠标按下时触发的事件
    KeyUp - 鼠标按下并放开时触发的事件
    KeyEventArgs.Key - 与事件相关的键盘的按键 [System.Windows.Input.Key枚举]
    KeyEventArgs.Handled - 是否处理过此事件
    System.Windows.Input.Keyboard.Modifiers - 当前按下的辅助键 [System.Windows.Input.ModifierKeys枚举]


在线DEMO
http://webabcd.blog.51cto.com/1787395/342779 


示例
1、Mouse.xaml
<UserControl x:Class="Silverlight20.Interactive.Mouse" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
         
        <!--路由事件是一种可以针对元素树中的多个侦听器(而不是仅针对引发该事件的对象)调用处理程序的事件--> 
         
        <!-- 
        MouseLeftButtonDown, MouseLeftButtonUp和MouseMove均为向上冒泡的路由事件 
        本例的事件路由为:Ellipse -> StackPanel -> UserControl 或 Rectangle -> Canvas -> StackPanel -> UserControl 
        如果不想向上冒泡,则可以使用 MouseButtonEventArgs.Handled = true 告知事件已被处理 
        --> 
        <StackPanel HorizontalAlignment="Left" MouseLeftButtonDown="StackPanel_MouseLeftButtonDown" > 

                <!-- 
                MouseEnter - 鼠标进入时触发的事件(显然,此事件不能冒泡) 
                MouseLeave - 鼠标离开时触发的事件(显然,此事件不能冒泡) 
                 
                MouseLeftButtonDown - 鼠标左键单击按下时触发的事件 
                MouseLeftButtonUp - 鼠标左键单击按下并放开时触发的事件 
                MouseMove - 鼠标移动时触发的事件 
                --> 
                <Ellipse x:Name="ellipse" Width="200" Height="100" Fill="Red" Margin="5"    
                        MouseEnter="ellipse_MouseEnter"    
                        MouseLeave="ellipse_MouseLeave" 
                        MouseLeftButtonDown="ellipse_MouseLeftButtonDown" 
                        MouseLeftButtonUp="ellipse_MouseLeftButtonUp" 
                > 
                </Ellipse> 

                <Canvas Margin="5"> 

                        <!--用于演示拖放的矩形--> 
                        <Rectangle x:Name="rectangle" Fill="Blue" Width="50" Height="50" 
                                MouseLeftButtonDown="rectangle_MouseLeftButtonDown" 
                                MouseLeftButtonUp="rectangle_MouseLeftButtonUp" 
                                MouseMove="rectangle_MouseMove" 
                        /> 
                         
                </Canvas> 

        </StackPanel> 
</UserControl>
 
Mouse.xaml.cs
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 
 
namespace Silverlight20.Interactive 

         public partial  class Mouse : UserControl 
        { 
                 public Mouse() 
                { 
                        InitializeComponent(); 
                } 
 
                 void ellipse_MouseEnter( object sender, MouseEventArgs e) 
                { 
                        ellipse.Fill =  new SolidColorBrush(Colors.Yellow); 
                } 
 
                 void ellipse_MouseLeave( object sender, MouseEventArgs e) 
                { 
                        ellipse.Fill =  new SolidColorBrush(Colors.Red); 
                } 
 
                 private  void ellipse_MouseLeftButtonUp( object sender, MouseButtonEventArgs e) 
                { 
                        ellipse.Fill =  new SolidColorBrush(Colors.Yellow); 
                } 
 
                 private  void ellipse_MouseLeftButtonDown( object sender, MouseButtonEventArgs e) 
                { 
                        ellipse.Fill =  new SolidColorBrush(Colors.Blue); 
 
                         // MouseButtonEventArgs.Handled - 此事件是否已被处理 
                         //         false - 未被处理,事件的路由为向上冒泡 
                         //         true - 已被处理,事件的路由为不再冒泡 
                        e.Handled =  true
                } 
 
                 private  void StackPanel_MouseLeftButtonDown( object sender, MouseButtonEventArgs e) 
                { 
                         // 如果鼠标单击 rectangle 对象,则 会 执行到此句 
                         // 如果鼠标单击 ellipse 对象,则 不会 执行到此句,因为之前 ellipse 对象的 MouseLeftButtonDown 事件中已经设置 e.Handled = true ,所以事件不会冒泡至此 
                        ellipse.Fill =  new SolidColorBrush(Colors.Black); 
                } 
                 
 
 
                 // 是否正在捕获鼠标 
                 private  bool _isMouseCaptured; 
 
                 // 鼠标垂直方向上的坐标 
                 private  double _mouseY; 
 
                 // 鼠标水平方向上的坐标 
                 private  double _mouseX; 
 
                 private  void rectangle_MouseLeftButtonDown( object sender, MouseButtonEventArgs e) 
                { 
                         // MouseButtonEventArgs.GetPosition() - 鼠标相对于指定元素的坐标 
                        _mouseY = e.GetPosition( null).Y; 
                        _mouseX = e.GetPosition( null).X; 
 
                         // CaptureMouse() - 在指定的元素上捕获鼠标 
                        rectangle.CaptureMouse(); 
                        _isMouseCaptured =  true
                } 
 
                 public  void rectangle_MouseMove( object sender, MouseEventArgs e) 
                { 
                         if (_isMouseCaptured) 
                        { 
                                 // 移动前和移动后的鼠标 垂直方向 和 水平方向 的位置的差值 
                                 double v = e.GetPosition( null).Y - _mouseY; 
                                 double h = e.GetPosition( null).X - _mouseX; 
 
                                 // 移动后的 rectangle 对象相对于 Canvas 的坐标 
                                 double newTop = v + ( double)rectangle.GetValue(Canvas.TopProperty); 
                                 double newLeft = h + ( double)rectangle.GetValue(Canvas.LeftProperty); 
 
                                 // 设置 rectangle 对象的位置为新的坐标. 
                                rectangle.SetValue(Canvas.TopProperty, newTop); 
                                rectangle.SetValue(Canvas.LeftProperty, newLeft); 
 
                                 // 更新鼠标的当前坐标 
                                _mouseY = e.GetPosition( null).Y; 
                                _mouseX = e.GetPosition( null).X; 
                        } 
                } 
 
                 private  void rectangle_MouseLeftButtonUp( object sender, MouseButtonEventArgs e) 
                { 
                         // ReleaseMouseCapture() - 如果指定的元素具有鼠标捕获,则释放该捕获 
                        rectangle.ReleaseMouseCapture(); 
                        _isMouseCaptured =  false
                } 
        } 
}
 
 
2、Keyboard.xaml
<!-- 
KeyDown - 鼠标按下时触发的事件 
KeyUp - 鼠标按下并放开时触发的事件 
--> 
<!-- 
KeyDown和KeyUp均为向上冒泡的路由事件,本例的事件路由为:TextBox -> Canvas -> UserControl 
--> 
<UserControl x:Class="Silverlight20.Interactive.Keyboard" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
        x:Name="userControl" 
        KeyDown="userControl_KeyDown"> 
         
        <Canvas> 
                         
                <TextBox x:Name="textBox" Text="TextBox" /> 
                 
        </Canvas> 
         
</UserControl>
 
Keyboard.xaml.cs
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Documents; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 
 
namespace Silverlight20.Interactive 

         public partial  class Keyboard : UserControl 
        { 
                 public Keyboard() 
                { 
                        InitializeComponent(); 
 
                         this.Loaded +=  new RoutedEventHandler(Keyboard_Loaded); 
 
                         // 为 UserControl 注册 KeyUp 事件 
                        userControl.KeyUp +=  new KeyEventHandler(userControl_KeyUp); 
                } 
 
                 void Keyboard_Loaded( object sender, RoutedEventArgs e) 
                { 
                         // 让 UserControl 获得焦点,这样该 UserControl 内的元素才能监听到键盘事件 
                        userControl.Focus(); 
                } 
 
                 private  void userControl_KeyDown( object sender, KeyEventArgs e) 
                { 
                         // 获取 textBox 对象的相对于 Canvas 的 x坐标 和 y坐标 
                         double x = ( double)textBox.GetValue(Canvas.LeftProperty); 
                         double y = ( double)textBox.GetValue(Canvas.TopProperty); 
 
                         // KeyEventArgs.Key - 与事件相关的键盘的按键 [System.Windows.Input.Key枚举] 
                         switch (e.Key) 
                        { 
                                 // 按 Up 键后 textBox 对象向 上 移动 1 个像素 
                                 // Up 键所对应的 e.PlatformKeyCode == 38    
                                 // 当获得的 e.Key == Key.Unknown 时,可以使用 e.PlatformKeyCode 来确定用户所按的键 
                                 case Key.Up: 
                                        textBox.SetValue(Canvas.TopProperty, y - 1); 
                                         break
 
                                 // 按 Down 键后 textBox 对象向 下 移动 1 个像素 
                                 // Down 键所对应的 e.PlatformKeyCode == 40 
                                 case Key.Down: 
                                        textBox.SetValue(Canvas.TopProperty, y + 1); 
                                         break
 
                                 // 按 Left 键后 textBox 对象向 左 移动 1 个像素 
                                 // Left 键所对应的 e.PlatformKeyCode == 37 
                                 case Key.Left: 
                                        textBox.SetValue(Canvas.LeftProperty, x - 1); 
                                         break
 
                                 // 按 Right 键后 textBox 对象向 右 移动 1 个像素 
                                 // Right 键所对应的 e.PlatformKeyCode == 39    
                                 case Key.Right: 
                                        textBox.SetValue(Canvas.LeftProperty, x + 1); 
                                         break
 
                                 default
                                         break
                        } 
 
                         // 同上:Key.W - 向上移动; Key.S - 向下移动; Key.A - 向左移动; Key.D - 向右移动 
                         switch (e.Key) 
                        { 
                                 // KeyEventArgs.Handled - 是否处理过此事件 
 
                                 // 如果在文本框内敲 W ,那么文本框会向上移动,而且文本框内也会被输入 W 
                                 // 如果只想移动文本框,而不输入 W ,那么可以设置 KeyEventArgs.Handled = true 告知此事件已经被处理完毕 
                                 case Key.W: 
                                        textBox.SetValue(Canvas.TopProperty, y - 1); 
                                        e.Handled =  true
                                         break
                                 case Key.S: 
                                        textBox.SetValue(Canvas.TopProperty, y + 1); 
                                        e.Handled =  true
                                         break
                                 case Key.A: 
                                        textBox.SetValue(Canvas.LeftProperty, x - 1); 
                                        e.Handled =  true
                                         break
                                 case Key.D: 
                                        textBox.SetValue(Canvas.LeftProperty, x + 1); 
                                        e.Handled =  true
                                         break
                                 default
                                         break
                        } 
                } 
 
                 private  void userControl_KeyUp( object sender, KeyEventArgs e) 
                { 
                         /* 
                        System.Windows.Input.Keyboard.Modifiers - 当前按下的辅助键 [System.Windows.Input.ModifierKeys枚举] 
                                ModifierKeys.None - 无 
                                ModifierKeys.Alt - Alt 键 
                                ModifierKeys.Control - Ctrl 键 
                                ModifierKeys.Shift - Shift 键 
                                ModifierKeys.Windows - Windows 键 
                                ModifierKeys.Apple - Apple 键(苹果电脑) 
                        */
 
 
                         // 按 Ctrl + M 则将 textBox 的位置设置为其初始位置 
                         if (System.Windows.Input.Keyboard.Modifiers == ModifierKeys.Control && e.Key == Key.M) 
                        { 
                                textBox.SetValue(Canvas.LeftProperty, 0d); 
                                textBox.SetValue(Canvas.TopProperty, 0d); 
                        } 
                } 
        } 
}
 
 

     本文转自webabcd 51CTO博客,原文链接: http://blog.51cto.com/webabcd/343044 ,如需转载请自行联系原作者


相关文章
|
Web App开发 UED
一起谈.NET技术,Silverlight与HTML双向交互
  Silverlight具备很好的用户体验,但有时需要在页面的布局上进行特殊处理,比如作为webpart集成到Sharepoint中等等。   HTML和Silverlight之间的双向交互可以更灵活的使用Silverlight进行开发,上午摸索了一下,记录在此。
1041 0

热门文章

最新文章