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

核心提示：本文源代码下载地址:http://flashview.ddvip.com/2008_11/Silverlight.rar 介绍Silverlight 2.0 人机交互：响应用户的鼠标操作和键盘操作MouseEnter - 鼠标进入时触发的事件（显然，此事件不能冒泡）MouseLeave - 鼠标离开时触发的事件（显然，

本文源代码下载地址:

http://flashview.ddvip.com/2008_11/Silverlight.rar

介绍

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://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html

示例

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

OK

相关文章：

稳扎稳打Silverlight(1) - 1.0实例之电子表

稳扎稳打Silverlight(2) - 1.0实例之支持录音和回放的钢琴(Silverlight+ASP.NET AJAX+DLINQ)

Silverlight 2.0

稳扎稳打Silverlight(3) - 2.0控件之Border, Button, Calendar, Canvas, CheckBox, ComboBox

稳扎稳打Silverlight(4) - 2.0控件之DataGrid, DatePicker, Grid, GridSplitter, HyperlinkButton, Image

稳扎稳打Silverlight(5) - 2.0控件之ListBox, MediaElement, MultiScaleImage, PasswordBox, ProgressBar, RadioButton

稳扎稳打Silverlight(6) - 2.0控件之ScrollViewer, Slider, StackPanel, TabControl, TextBlock, TextBox, ToggleButton

稳扎稳打Silverlight(7) - 2.0图形之Ellipse, Line, Path, Polygon, Polyline, Rectangle

稳扎稳打Silverlight(8) - 2.0图形之基类System.Windows.Shapes.Shape

稳扎稳打Silverlight(9) - 2.0画笔之SolidColorBrush, ImageBrush, VideoBrush, LinearGradientBrush, RadialGradientBrush

稳扎稳打Silverlight(10) - 2.0其它之Transform详解，以及UIElement和FrameworkElement的常用属性

稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画

稳扎稳打Silverlight(12) - 2.0外观之样式, 模板, 视觉状态和视觉状态管理器

作者：webabcd

出处：http://www.cnblogs.com/webabcd/archive/2007/02/24/655035.html