Silverlight 中用鼠标同时选中和移动多个控件

在设计 WinForm 程序时，我们可以很方便的同时选择窗体上的多个控件来调整控件的位置。在 Silverlight 应用程序中有时我们也想实现同样的功能，以提供更好的用户体验。本文将要介绍的就是在 Silverlight 程序中实现同时选中和移动多个控件。

1、实现鼠标拖动选择时显示所选区域

2、移动所选区域时同时移动在该区域内的控件

要实现鼠标拖动选择时显示所选区域功能，可以在鼠标拖动时在 Canvas 容器中动态添加一个 Rectangle 来显示类似在 Windows 资源管理器拖动选择文件时的选择框。实现前面所述功能的操作：在 Canvas 容器中按下鼠标左键并拖动鼠标来修改选择区域，选定目标区域后松开鼠标按键，这时显示一个表示所选区域的矩形选框。由实现的操作可知，我们需要在鼠标左键按下时在 Canvas 容器中添加一个矩形框，然后在鼠标移动时根据鼠标的位置更新矩形框的大小，最后在鼠标左键弹起显示最终的选择区域并查找出在选择区域中的控件。

private Point origPoint; /* 鼠标点击的位置 */
private Rectangle rect; /* 选择的区域 */
private Rect selectedRect; /* 选择的矩形区域 */
private bool isMultipleSelected;
private List<FrameworkElement> selectedElements = new List<FrameworkElement>();

public MainPage()
{
InitializeComponent();

this.rootCanvas.MouseLeftButtonDown += Handle_MouseLeftButtonDown;
}

private void Handle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (e.OriginalSource is Canvas)
{
if (rect != null)
{
isMultipleSelected = false;

rootCanvas.Children.Remove(rect);
rect = null;
}
else
{
isMultipleSelected = true;

rect = new Rectangle();
origPoint = e.GetPosition(rootCanvas);

rootCanvas.Children.Add(rect);
rect.SetValue(Canvas.LeftProperty, origPoint.X);
rect.SetValue(Canvas.TopProperty, origPoint.Y);

rect.Fill = new SolidColorBrush(Colors.LightGray);
rect.Stroke = new SolidColorBrush(Colors.Black);
rect.StrokeThickness = 3;
rect.Opacity = .5;

rect.MouseLeftButtonDown += Handle_MouseLeftButtonDown;

rootCanvas.MouseMove += Handle_MouseMove;
rootCanvas.MouseLeftButtonUp += Handle_MouseLeftButtonUp;
}
}
else if (e.OriginalSource is Rectangle)
{
isMultipleSelected = false;

origPoint = e.GetPosition(rootCanvas);

rect.MouseMove += Handle_MouseMove;
rect.MouseLeftButtonUp += Handle_MouseLeftButtonUp;
rect.CaptureMouse();

/*
* 查找在选择范围内的控件
*
*/

double rLeft = (double)rect.GetValue(Canvas.LeftProperty);
double rTop = (double)rect.GetValue(Canvas.TopProperty);

foreach (FrameworkElement item in rootCanvas.Children)
{
double cLeft = (double)item.GetValue(Canvas.LeftProperty);
double cTop = (double)item.GetValue(Canvas.TopProperty);

Rect rc1 = new Rect(selectedRect.X, selectedRect.Y, selectedRect.Width, selectedRect.Height);
Rect rc2 = new Rect(cLeft, cTop, item.ActualWidth, item.ActualHeight);
rc1.Intersect(rc2); /* 判断控件所在的矩形区域与选择的矩形区域是否相交 */
if (rc1 != Rect.Empty)
{
if (!selectedElements.Contains(item))
selectedElements.Add(item);
}
}
}
}

private void Handle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
if (isMultipleSelected)
{
/* 所选区域的矩形 */
selectedRect = new Rect((double)rect.GetValue(Canvas.LeftProperty),
(double)rect.GetValue(Canvas.TopProperty), rect.Width, rect.Height);

rootCanvas.MouseLeftButtonUp -= Handle_MouseLeftButtonUp;
rootCanvas.MouseMove -= Handle_MouseMove;
}
}

private void Handle_MouseMove(object sender, MouseEventArgs e)
{
if (isMultipleSelected)
{
Point curPoint = e.GetPosition(rootCanvas);
if (curPoint.X > origPoint.X)
{
rect.Width = curPoint.X - origPoint.X;
}
if (curPoint.X < origPoint.X)
{
rect.SetValue(Canvas.LeftProperty, curPoint.X);
rect.Width = origPoint.X - curPoint.X;
}
if (curPoint.Y > origPoint.Y)
{
rect.Height = curPoint.Y - origPoint.Y;
}
if (curPoint.Y < origPoint.Y)
{
rect.SetValue(Canvas.TopProperty, curPoint.Y);
rect.Height = origPoint.Y - curPoint.Y;
}
}
}

注意对下侧边缘的判断要用容器的高减去 rect（选择区域）的高，对于右侧边缘的判断同样要用容器的宽减去 rect 的宽，这是因为通过e.GetPosition(UIElement).X和e.GetPosition(UIElement).Y取得值是 UIElement 的左侧和顶部距容器左侧和顶部的值。

        2、对于第二个问题，如果某个控件被选中，只要将该选择区域扩大把控件所在的矩形区域包含在内即可实现（可以通过Rect的Union方法实现），修改后的代码如下：

  foreach (FrameworkElement item in rootCanvas.Children)
{
    double cLeft = (double)item.GetValue(Canvas.LeftProperty);
    double cTop = (double)item.GetValue(Canvas.TopProperty);

    Rect rc1 = new Rect(selectedRect.X, selectedRect.Y, selectedRect.Width, selectedRect.Height);
    Rect rc2 = new Rect(cLeft, cTop, item.ActualWidth, item.ActualHeight);
    rc1.Intersect(rc2); /* 判断控件所在的矩形区域与选择的矩形区域是否相交 */
    if (rc1 != Rect.Empty)
    {
        /*  扩展 selectedRect 使其将 rc2 包含在内    */
        selectedRect.Union(rc2);
        /*  重新设置选择区域的大小和位置   */
        rect.SetValue(Canvas.TopProperty, selectedRect.Y);
        rect.SetValue(Canvas.LeftProperty, selectedRect.X);
        rect.SetValue(Canvas.WidthProperty, selectedRect.Width);
        rect.SetValue(Canvas.HeightProperty, selectedRect.Height);

        if (!selectedElements.Contains(item))
            selectedElements.Add(item);
    }
}