随笔 - 616, 文章 - 0, 评论 - 10492
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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

Posted on 2008-11-13 07:55  webabcd  阅读(8118)  评论(19编辑  收藏
[索引页]
[源码下载]


稳扎稳打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://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
[源码下载]