silverlight鼠标:Silverlight(13) - 2.0交互的鼠标事件和键盘事件

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

using ;
using .Collections.Generic;
using .Linq;
using .Net;
using .Windows;
using .Windows.Controls;
using .Windows.Documents;
using .Windows.Input;
using .Windows.Media;
using .Windows.Media.Animation;
using .Windows.Shapes;
　　
Silverlight20.Interactive
{
　　public partial Mouse : UserControl
　　{
　　　　public Mouse
　　　　{
　　　　　　InitializeComponent;
　　　　}
　　
　　　　void ellipse_MouseEnter(object sender, MouseEventArgs e)
　　　　{
　　　　　　ellipse.Fill = SolidColorBrush(Colors.Yellow);
　　　　}
　　
　　　　void ellipse_MouseLeave(object sender, MouseEventArgs e)
　　　　{
　　　　　　ellipse.Fill = SolidColorBrush(Colors.Red);
　　　　}
　　
　　　　private void ellipse_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
　　　　{
　　　　　　ellipse.Fill = SolidColorBrush(Colors.Yellow);
　　　　}
　　
　　　　private void ellipse_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
　　　　{
　　　　　　ellipse.Fill = 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 = 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)
　　　　{
　　　　　　 (_isMouseCaptured)
　　　　　　{
　　　　　　　　// 移动前和移动后鼠标 垂直方向 和 水平方向 位置差值
　　　　　　　　double v = e.GetPosition(null).Y - _mouseY;
　　　　　　　　double h = e.GetPosition(null).X - _mouseX;
　　
　　　　　　　　// 移动后 rectangle 对象相对于 Canvas 坐标
　　　　　　　　double Top = v + (double)rectangle.GetValue(Canvas.TopProperty);
　　　　　　　　double Left = h + (double)rectangle.GetValue(Canvas.LeftProperty);
　　
　　　　　　　　// 设置 rectangle 对象位置为新坐标.
　　　　　　　　rectangle.SetValue(Canvas.TopProperty, Top);
　　　　　　　　rectangle.SetValue(Canvas.LeftProperty, Left);
　　
　　　　　　　　// 更新鼠标当前坐标
　　　　　　　　_mouseY = e.GetPosition(null).Y;
　　　　　　　　_mouseX = e.GetPosition(null).X;
　　　　　　}
　　　　}
　　
　　　　private void rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
　　　　{
　　　　　　// ReleaseMouseCapture - 如果指定元素具有鼠标捕获则释放该捕获
　　　　　　rectangle.ReleaseMouseCapture;
　　　　　　_isMouseCaptured = false;
　　　　}
　　}
}

<!--
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>

using ;
using .Collections.Generic;
using .Linq;
using .Net;
using .Windows;
using .Windows.Controls;
using .Windows.Documents;
using .Windows.Input;
using .Windows.Media;
using .Windows.Media.Animation;
using .Windows.Shapes;
　　
Silverlight20.Interactive
{
　　public partial Keyboard : UserControl
　　{
　　　　public Keyboard
　　　　{
　　　　　　InitializeComponent;
　　
　　　　　　this.Loaded RoutedEventHandler(Keyboard_Loaded);
　　
　　　　　　// 为 UserControl 注册 KeyUp 事件
　　　　　　userControl.KeyUp 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 - 和事件相关键盘按键 [.Windows.Input.Key枚举]
　　　　　　switch (e.Key)
　　　　　　{
　　　　　　　　// 按 Up 键后 textBox 对象向 上 移动 1 个像素
　　　　　　　　// Up 键所对应 e.PlatformKeyCode 38
　　　　　　　　// 当获得 e.Key Key.Unknown 时可以使用 e.PlatformKeyCode 来确定用户所按键
　　　　　　　　 Key.Up:
　　　　　　　　　　textBox.SetValue(Canvas.TopProperty, y - 1);
　　　　　　　　　　;
　　
　　　　　　　　// 按 Down 键后 textBox 对象向 下 移动 1 个像素
　　　　　　　　// Down 键所对应 e.PlatformKeyCode 40
　　　　　　　　 Key.Down:
　　　　　　　　　　textBox.SetValue(Canvas.TopProperty, y + 1);
　　　　　　　　　　;
　　
　　　　　　　　// 按 Left 键后 textBox 对象向 左 移动 1 个像素
　　　　　　　　// Left 键所对应 e.PlatformKeyCode 37
　　　　　　　　 Key.Left:
　　　　　　　　　　textBox.SetValue(Canvas.LeftProperty, x - 1);
　　　　　　　　　　;
　　
　　　　　　　　// 按 Right 键后 textBox 对象向 右 移动 1 个像素
　　　　　　　　// Right 键所对应 e.PlatformKeyCode 39
　　　　　　　　 Key.Right:
　　　　　　　　　　textBox.SetValue(Canvas.LeftProperty, x + 1);
　　　　　　　　　　;
　　
　　　　　　　　default:
　　　　　　　　　　;
　　　　　　}
　　
　　　　　　// 同上:Key.W - 向上移动； Key.S - 向下移动； Key.A - 向左移动； Key.D - 向右移动
　　　　　　switch (e.Key)
　　　　　　{
　　　　　　　　// KeyEventArgs.Handled - 是否处理过此事件
　　
　　　　　　　　// 如果在文本框内敲 W 那么文本框会向上移动而且文本框内也会被输入 W
　　　　　　　　// 如果只想移动文本框而不输入 W 那么可以设置 KeyEventArgs.Handled = true 告知此事件已经被处理完毕
　　　　　　　　 Key.W:
　　　　　　　　　　textBox.SetValue(Canvas.TopProperty, y - 1);
　　　　　　　　　　e.Handled = true;
　　　　　　　　　　;
　　　　　　　　 Key.S:
　　　　　　　　　　textBox.SetValue(Canvas.TopProperty, y + 1);
　　　　　　　　　　e.Handled = true;
　　　　　　　　　　;
　　　　　　　　 Key.A:
　　　　　　　　　　textBox.SetValue(Canvas.LeftProperty, x - 1);
　　　　　　　　　　e.Handled = true;
　　　　　　　　　　;
　　　　　　　　 Key.D:
　　　　　　　　　　textBox.SetValue(Canvas.LeftProperty, x + 1);
　　　　　　　　　　e.Handled = true;
　　　　　　　　　　;
　　　　　　　　default:
　　　　　　　　　　;
　　　　　　}
　　　　}
　　
　　　　private void userControl_KeyUp(object sender, KeyEventArgs e)
　　　　{
　　　　　　/**//*
　　　　　　.Windows.Input.Keyboard.Modiers - 当前按下辅助键 [.Windows.Input.ModierKeys枚举]
　　　　　　　　ModierKeys.None - 无
　　　　　　　　ModierKeys.Alt - Alt 键
　　　　　　　　ModierKeys.Control - Ctrl 键
　　　　　　　　ModierKeys.Sht - Sht 键
　　　　　　　　ModierKeys.Windows - Windows 键
　　　　　　　　ModierKeys.Apple - Apple 键(苹果电脑)
　　　　　　*/
　　
　　　　　　// 按 Ctrl + M 则将 textBox 位置设置为其位置
　　　　　　 (.Windows.Input.Keyboard.Modiers ModierKeys.Control && e.Key Key.M)
　　　　　　{
　　　　　　　　textBox.SetValue(Canvas.LeftProperty, 0d);
　　　　　　　　textBox.SetValue(Canvas.TopProperty, 0d);
　　　　　　}
　　　　}
　　}
}

延伸阅读

• 2009-1-23-- silverlight:学Silverlight 2系列(8):使用样式封装Control控件观感
• 2009-1-23-- silverlight:使用Silverlight 2 和 VS 2008创建 Hello World 程序
• 2009-1-23-- silverlight:学Silverlight 2系列(10):使用用户Control控件
• 2009-1-23-- silverlight:Silverlight 2 手把手(的 4) 创建 Silverlight 2 Control控件
• 2009-1-23-- 微软silverlight:Silverlight 微软平台的再度膨胀
• 2009-1-23-- silverlight:Silverlight 2 (beta1)数据操作(3)——使用ADO.NET Data Service (Astoria)进行数据CRUD操作
• 2009-1-23-- silverlight:学Silverlight 2系列(26):基本图形
• 2009-1-23-- silverlight应用:使用Silverlight构建插件式应用程序( 4)
• 2009-1-23-- silverlight:在Silverlight中做单元测试
• 2009-1-23-- silverlight:学Silverlight 2系列(23):Silverlight和HTML混合的无窗口模式