一步一步學Silverlight 2系列（5）：實現(xiàn)簡單的拖放功能

louisasea 2008-04-17

展開全文

一步一步學Silverlight 2系列（5）：實現(xiàn)簡單的拖放功能

概述

Silverlight 2 Beta 1版本發(fā)布了，無論從Runtime還是Tools都給我們帶來了很多的驚喜，如支持框架語言Visual Basic, Visual C#, IronRuby, Ironpython，對JSON、Web Service、WCF以及Sockets的支持等一系列新的特性?！兑徊揭徊綄WSilverlight 2系列》文章帶您快速進入Silverlight 2開發(fā)。

本文為系列文章第五篇，利用前面講過的鼠標事件處理實現(xiàn)簡單的拖放功能。

準備XAML

在實現(xiàn)拖放功能中，分為三個步驟：

1.按下鼠標，觸發(fā)MouseLeftButtonDown事件，選擇要拖動的對象。

2.移動鼠標，觸發(fā)MouseMove事件，移動選擇的對象。

3.放開鼠標，觸發(fā)MouseLeftButtonUp事件，停止捕捉事件。

做一個簡單的界面，用一個按鈕來顯示拖放，如下XAML聲明：

<Canvas Background="#46461F">
    <Button 
       MouseLeftButtonDown="OnMouseDown" 
       MouseMove="OnMouseMove"
       MouseLeftButtonUp="OnMouseUp" 
       Canvas.Left="50" Canvas.Top="50" Background="Red"
       FontSize="18"
       Width="160" Height="80">
        <Button.Content>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"
                        VerticalAlignment="Center">
                <Image Source="smile_6.png"></Image>
                <TextBlock Text="拖動我" VerticalAlignment="Center" Margin="10"></TextBlock>
            </StackPanel>
        </Button.Content>
    </Button>
</Canvas>

這里為了界面顯示效果，使用了控件模板，后續(xù)會專門講到。

開始拖放操作

開始拖放操作，實現(xiàn)MouseLeftButtonDown事件處理程序，用兩個全局變量來記錄當前鼠標的位置和鼠標是否保持移動。

bool trackingMouseMove = false;
Point mousePosition;

void OnMouseDown(object sender, MouseButtonEventArgs e)
{
    FrameworkElement element = sender as FrameworkElement;
    mousePosition = e.GetPosition(null);
    trackingMouseMove = true;
    if (null != element)
    {
        element.CaptureMouse();
        element.Cursor = Cursors.Hand;
    }
}

移動對象

移動對象，實現(xiàn)MouseMove事件處理程序，計算元素的位置并更新，同時更新鼠標的位置。

void OnMouseMove(object sender, MouseEventArgs e)
{
    FrameworkElement element = sender as FrameworkElement;
    if (trackingMouseMove)
    {
        double deltaV = e.GetPosition(null).Y - mousePosition.Y;
        double deltaH = e.GetPosition(null).X - mousePosition.X;
        double newTop = deltaV + (double)element.GetValue(Canvas.TopProperty);
        double newLeft = deltaH + (double)element.GetValue(Canvas.LeftProperty);

        element.SetValue(Canvas.TopProperty, newTop);
        element.SetValue(Canvas.LeftProperty, newLeft);

        mousePosition = e.GetPosition(null);
    }
}

完成拖放操作

完成拖放操作，實現(xiàn)MouseLeftButtonUp事件處理程序。

void OnMouseUp(object sender, MouseButtonEventArgs e)
{
    FrameworkElement element = sender as FrameworkElement;
    trackingMouseMove = false;
    element.ReleaseMouseCapture();

    mousePosition.X = mousePosition.Y = 0;
    element.Cursor = null;
}