稳扎稳打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.voidcn.com/article/p-ounmxjds-tq.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">

        

        
        <StackPanel HorizontalAlignment="Left" MouseLeftButtonDown="StackPanel_MouseLeftButtonDown" >

                
                <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

<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(13) - 2.0交互之鼠标事件和键盘事件

相关推荐