Silverlight实用窍门系列：3.Silverlight鼠标动态绘制矩形【实例源码下载】

本节我们讲一个关于在Sivlerlight中动态绘制矩形框的小技巧。此技巧可以让用户自定义的绘制矩形框。此技巧的关键在于，在一个Canvas中使用其事件，来绘制矩形，注意这里选用Canvas是因为Canvas.Top和Canvas.Left是一个很好的定位方法。当用户想要动态绘制一个矩形的时候，用户按下鼠标左键(MouseLeftButtonDown事件)，记录当前鼠标点击的Canvas坐标，然后鼠标移动(MouseMove事件)的时候再记录当前鼠标移动到的点位，由此动态生成一个Rectangle矩形框。这个矩形框就会跟随你鼠标移动变换大小，当鼠标左键弹起(MouseLeftButtonUp事件)的时候,取消MouseLeftButtonDown事件的绑定。

      下面请大家看完整源代码：

MainPage.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 SLRectangle

{

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

        }

        private Rectangle rect; //声明一个矩形引用

        private Point origPoint; //设置一个鼠标点的引用

        private bool isAddMouseEvent = false; //标示是否添加了鼠标事件

        /// <summary>

        /// 鼠标左键按下去的时候产生相应的矩形框控件，添加相应的移动控件事件和鼠标左键弹起事件

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        private void Handle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

        {

            rect = new Rectangle();

            origPoint = e.GetPosition(AddUC);

            rect.SetValue(Canvas.LeftProperty, origPoint.X); //设置矩形的起始X坐标

            rect.SetValue(Canvas.TopProperty, origPoint.Y);  //设置矩形的起始Y坐标

            rect.Opacity = 1;          //设置本控件透明度

            rect.Fill = new SolidColorBrush(Colors.Blue);

            rect.RadiusX = 10;//为了让矩形美观一些设置了圆角属性

            rect.RadiusY = 10;

            AddUC.MouseMove += Handle_MouseMove; //为Canvas面板加载MouseMove事件

            AddUC.MouseLeftButtonUp += Handle_MouseLeftButtonUp;//为Canvas面板加载MouseLeftButtonUp事件

            AddUC.Children.Add(rect); //在Canvas面板中添加矩形

        }

        /// <summary>

        /// 当鼠标左键绘制完成，弹起鼠标的时候移除本页面的鼠标事件绑定。

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        private void Handle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

        {

            AddUC.MouseLeftButtonUp -= Handle_MouseLeftButtonUp;

            AddUC.MouseMove -= Handle_MouseMove;

        }

        /// <summary>

        /// 当鼠标按下去移动的时候，矩形框控件也相应的改变大小以形成相应的框

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        private void Handle_MouseMove(object sender, MouseEventArgs e)

        {

            Point curPoint = e.GetPosition(AddUC);

            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;

            }

        }

        private void button1_Click(object sender, RoutedEventArgs e)

        {

            //监测是否已经为鼠标绘制状态。如果不是那么则绑定为鼠标绘制状态，且设置此按钮为不可用状态

            if (isAddMouseEvent == false)

            {

                this.AddUC.MouseLeftButtonDown += Handle_MouseLeftButtonDown;

                isAddMouseEvent = true;

                this.button1.IsEnabled = false;

            }

        }

    }

}

MainPage.xaml

<UserControl x:Class="SLRectangle.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="1000" d:DesignWidth="1000" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid x:Name="LayoutRoot"  >

        <Canvas x:Name="AddUC"   HorizontalAlignment="Stretch"  Background="Black"   VerticalAlignment="Stretch" Width="1920" Height="1080">

        </Canvas>

        <Button Width="97" Height="30" Content="点我开始绘制矩形" x:Name="button1" Margin="15,10,0,0"   VerticalAlignment="Top" HorizontalAlignment="Left" Click="button1_Click"></Button>

    </Grid>

</UserControl>

        在本实例中，所有需要注释的地方在文中都已经写好注释。这是一个很小的小技巧，可是在实际项目中还是有一些使用的地方。比如说。我们要让用户自定义的在某一个有很多台机器设备的背景图片上自己设置很多机器的锚点，然后为这些锚点配置相关的机器信息。在这里我们就可以让用户自己在那些机器上绘制一些矩形。然后当绘制完毕，关联好数据后，我们就可以将用户的这个自定义配置的界面以及该页面上矩形的位置和大小以XML的形式存入数据库中，下次从数据库中取出来，然后还原即可呈现自定义好的节面。

        效果图如下：

        

        本实例为VS2010+Silverlight 4.0环境。由于时间有限，全新制作Demo，有不当之处请指教。

       点击请下载：SLRectangle.rar