乱弹琴 Silverlight 2.0 (6) 事件(event)

前言：Silverlight 2.0 Beta1 已经发布，加入了许多激动人心的新特性：WPF UI 框架、丰富的控件、丰富的网络支持、丰富的基础类库支持等。这是本人的学习笔记，写的比较乱，因此定名为乱弹琴 Silverlight 2.0 系列文章。

本篇介绍Silverlight中的事件。
Silverlight 2.0 Beta 中的事件并不多，可能是测试版的原因。本篇主要介绍鼠标事件和键盘事件，其它的事件大同小异。

鼠标键盘事件：

示例：
XAML：
<UserControl.Resources>
    <Style x:Name="test" TargetType="Button">
        <Setter Property="Canvas.Left" Value="50"></Setter>
        <Setter Property="Canvas.Top" Value="20"></Setter>
        <Setter Property="Width" Value="300"></Setter>
        <Setter Property="Height" Value="200"></Setter>
        <Setter Property="Background" Value="Green"></Setter>
        <Setter Property="FontSize" Value="24"></Setter>
    </Style>
</UserControl.Resources>

<Canvas x:Name="LayoutRoot"
        Background="DarkGreen"
        Width="800"
        Height="600">

    <Button x:Name="btnTest" Style="{StaticResource test}"
            MouseEnter="btnTest_MouseEnter"
            MouseLeave="btnTest_MouseLeave"
            MouseLeftButtonDown="btnTest_MouseLeftButtonDown"
            MouseLeftButtonUp="btnTest_MouseLeftButtonUp"
            MouseMove="btnTest_MouseMove"
            Click="btnTest_Click"
            KeyDown="btnTest_KeyDown">
    </Button>
    
    <TextBlock x:Name="txtPosition" Foreground="Yellow"></TextBlock>
</Canvas>
C#：
public partial class Page : UserControl
{
    bool isDown = false;    // 判断鼠标左键的状态，按下为true
    Point start;            // 鼠标左键按下时相对于按钮左上角的位置

    public Page()
    {
        InitializeComponent();
    }

    private void btnTest_MouseEnter(object sender, MouseEventArgs e)
    {
        // 鼠标进入按钮时设置按钮背景变为橙色
        btnTest.Background = new SolidColorBrush(Colors.Orange);      
    }

    private void btnTest_MouseLeave(object sender, MouseEventArgs e)
    {
        // 鼠标离开按钮时设置按钮背景变为绿色
        btnTest.Background = new SolidColorBrush(Colors.Green);
    }

    private void btnTest_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        // 鼠标按下鼠标左键时：
        // 记录相对于按钮左上角的位置
        // 标记鼠标左键为按下状态
        // 设置按钮背景变为红色
        start = e.GetPosition(btnTest);
        isDown = true;
        btnTest.Background = new SolidColorBrush(Colors.Red);
    }

    private void btnTest_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        // 鼠标弹起鼠标左键时：
        // 标记鼠标左键为弹起状态
        // 设置按钮背景为绿色
        isDown = false;
        btnTest.Background = new SolidColorBrush(Colors.Green);
    }

    private void btnTest_MouseMove(object sender, MouseEventArgs e)
    {
        // TextBlock显示鼠标相对于按钮左上角的坐标
        txtPosition.Text = string.Format("({0})", e.GetPosition(btnTest));

        // 若按钮为按下状态，拖动按钮，改变按钮位置
        if (isDown)
        {
            Canvas.SetLeft(btnTest, e.GetPosition(LayoutRoot).X - start.X);
            Canvas.SetTop(btnTest, e.GetPosition(LayoutRoot).Y - start.Y);
        }
    }

    private void btnTest_Click(object sender, RoutedEventArgs e)
    {
        // 鼠标单击时，设置按钮的文字为当前日期时间
        btnTest.Content = DateTime.Now.ToString();
    }

    private void btnTest_KeyDown(object sender, KeyEventArgs e)
    {
        switch(e.Key)
        {
            case Key.Left: // 左移按钮
                Canvas.SetLeft(btnTest, Canvas.GetLeft(btnTest) - 1);
                break;

            case Key.Up: // 上移按钮
                Canvas.SetTop(btnTest, Canvas.GetTop(btnTest) - 1);
                break;

            case Key.Right: //右移按钮
                Canvas.SetLeft(btnTest, Canvas.GetLeft(btnTest) + 1);
                break;

            case Key.Down: // 下移按钮
                Canvas.SetTop(btnTest, Canvas.GetTop(btnTest) + 1);
                break;
        }
    }
}
显示效果：






路由事件(RoutedEvent)：

路由事件是一种可以针对元素树中的多个侦听器（而不是仅针对引发该事件的对象）调用处理程序的事件。
在根元素定义的事件，从元素树的源元素向根元素冒泡，直到达到元素树的根。

示例：
XAML：
<Canvas x:Name="cvs" MouseLeftButtonDown="Canvas_MouseLeftButtonDown"
        Background="DarkGreen">
    <Rectangle x:Name="rect" Width="400" Height="400" Fill="Orange">            
    </Rectangle>
    
    <Button x:Name="btn" Width="300" Height="300" Background="Red">            
    </Button>
    
    <Ellipse x:Name="eps" Width="200" Height="200" Fill="Blue">            
    </Ellipse>
    
    <TextBox x:Name="txt" Width="100" Height="100" Background="Yellow">          
    </TextBox>
    
    <TextBlock x:Name="tbk" Width="100" Height="20" Foreground="DarkGreen">      
    </TextBlock>
</Canvas>
C#：
private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    FrameworkElement fe = e.Source as FrameworkElement;

    if (fe != null)
    {
        tbk.Text = fe.Name + ":\n" + fe.GetType().ToString();
    }
}
显示效果：






(演示可以看出，按钮是由多个元素多个部分构成的。)

结束语：
测试版的Silverlight 2.0 事件不是很完整，正式版释出后会加入其他事件，不过可以用JS与SL互操作扩展其他事件，如DoubleClick，等到JS与SL互操作时再介绍。