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

<a href="http://webabcd.blog.51cto.com/1787395/342790" target="_blank">[索引页]</a>

<a href="http://down.51cto.com/data/100302" target="_blank">[源码下载]</a>

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

介绍

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

示例

1、Mouse.xaml

&lt;UserControl x:Class="Silverlight20.Interactive.Mouse" 

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt; 

        &lt;!--路由事件是一种可以针对元素树中的多个侦听器（而不是仅针对引发该事件的对象）调用处理程序的事件--&gt; 

        &lt;!-- 

        MouseLeftButtonDown, MouseLeftButtonUp和MouseMove均为向上冒泡的路由事件 

        本例的事件路由为：Ellipse -&gt; StackPanel -&gt; UserControl 或 Rectangle -&gt; Canvas -&gt; StackPanel -&gt; UserControl 

        如果不想向上冒泡，则可以使用 MouseButtonEventArgs.Handled = true 告知事件已被处理 

        --&gt; 

        &lt;StackPanel HorizontalAlignment="Left" MouseLeftButtonDown="StackPanel_MouseLeftButtonDown" &gt; 

                &lt;!-- 

                MouseEnter - 鼠标进入时触发的事件（显然，此事件不能冒泡） 

                MouseLeave - 鼠标离开时触发的事件（显然，此事件不能冒泡） 

                MouseLeftButtonDown - 鼠标左键单击按下时触发的事件 

                MouseLeftButtonUp - 鼠标左键单击按下并放开时触发的事件 

                MouseMove - 鼠标移动时触发的事件 

                --&gt; 

                &lt;Ellipse x:Name="ellipse" Width="200" Height="100" Fill="Red" Margin="5"    

                        MouseEnter="ellipse_MouseEnter"    

                        MouseLeave="ellipse_MouseLeave" 

                        MouseLeftButtonDown="ellipse_MouseLeftButtonDown" 

                        MouseLeftButtonUp="ellipse_MouseLeftButtonUp" 

                &gt; 

                &lt;/Ellipse&gt; 

                &lt;Canvas Margin="5"&gt; 

                        &lt;!--用于演示拖放的矩形--&gt; 

                        &lt;Rectangle x:Name="rectangle" Fill="Blue" Width="50" Height="50" 

                                MouseLeftButtonDown="rectangle_MouseLeftButtonDown" 

                                MouseLeftButtonUp="rectangle_MouseLeftButtonUp" 

                                MouseMove="rectangle_MouseMove" 

                        /&gt; 

                &lt;/Canvas&gt; 

        &lt;/StackPanel&gt; 

&lt;/UserControl&gt;

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) 

                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

&lt;!-- 

KeyDown - 鼠标按下时触发的事件 

KeyUp - 鼠标按下并放开时触发的事件 

--&gt; 

KeyDown和KeyUp均为向上冒泡的路由事件，本例的事件路由为：TextBox -&gt; Canvas -&gt; UserControl 

&lt;UserControl x:Class="Silverlight20.Interactive.Keyboard" 

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    

        x:Name="userControl" 

        KeyDown="userControl_KeyDown"&gt; 

        &lt;Canvas&gt; 

                &lt;TextBox x:Name="textBox" Text="TextBox" /&gt; 

        &lt;/Canvas&gt; 

Keyboard.xaml.cs

        public partial class Keyboard : UserControl 

                public Keyboard() 

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

                                // 按 Left 键后 textBox 对象向 左 移动 1 个像素 

                                // Left 键所对应的 e.PlatformKeyCode == 37 

                                case Key.Left: 

                                        textBox.SetValue(Canvas.LeftProperty, x - 1); 

                                // 按 Right 键后 textBox 对象向 右 移动 1 个像素 

                                // Right 键所对应的 e.PlatformKeyCode == 39    

                                case Key.Right: 

                                        textBox.SetValue(Canvas.LeftProperty, x + 1); 

                                default: 

                        // 同上：Key.W - 向上移动； Key.S - 向下移动； Key.A - 向左移动； Key.D - 向右移动 

                                // KeyEventArgs.Handled - 是否处理过此事件 

                                // 如果在文本框内敲 W ，那么文本框会向上移动，而且文本框内也会被输入 W 

                                // 如果只想移动文本框，而不输入 W ，那么可以设置 KeyEventArgs.Handled = true 告知此事件已经被处理完毕 

                                case Key.W: 

                                        e.Handled = true; 

                                case Key.S: 

                                case Key.A: 

                                case Key.D: 

                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 &amp;&amp; e.Key == Key.M) 

                                textBox.SetValue(Canvas.LeftProperty, 0d); 

                                textBox.SetValue(Canvas.TopProperty, 0d); 

OK

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