精通Silverlight——12.6.2 动态绘制矩形示例

  本节将上节所学习的知识创建一个动态绘制矩形的示例，该示例可以形成类似绘图软件中的选择效果，示例的运行效果如图所示，可以用鼠标在画布上拖动，形成一个矩形选择框，松开鼠标则创建一个无填充的矩形。

示例程序的XAML代码如下所示：

<Canvas x:Name="parentCanvas"

        xmlns="http://schemas.microsoft.com/client/2007"

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

        Loaded="Page_Loaded"

        x:Class="MouseRectangle.Page;assembly=ClientBin/MouseRectangle.dll"

        Width="640"

        Height="480"

        >

  <!--为画布指定一个背景图象-->

  <Canvas.Background>

    <ImageBrush ImageSource="flower.jpg"/>

  </Canvas.Background>

</Canvas>

该示例的重点是使用.NET代码动态创建矩形，后置代码如下所示。

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace MouseRectangle

{

    public partial class Page : Canvas

    {

        //矩形对象，将在鼠标移动时动态创建

        Rectangle rc;

        //矩形对象是否正在被创建中

        bool bRectInCreation; 

        //矩形对象的右上角

        Point ptUpperLeftCorner;

        public void Page_Loaded(object o, EventArgs e)

        {

            // Required to initialize variables

            InitializeComponent();

            //初始化画布事件

            this.MouseLeftButtonDown += new MouseEventHandler(Page_MouseLeftButtonDown);

            this.MouseLeftButtonUp += new MouseEventHandler(Page_MouseLeftButtonUp);

            this.MouseMove += new MouseEventHandler(Page_MouseMove);

        }

        //定义鼠标移动动作。

        void Page_MouseMove(object sender, MouseEventArgs e)

        {

            //当矩形正在创建中时

            if (bRectInCreation)

            {

                //如果rc己经存在，则移除rc重新根据鼠标位置创建矩形。

                if (rc != null) Children.Remove(rc);

                //获取当前的鼠标位置

                Point p = e.GetPosition(this);

                //由于鼠标可能向上或向下拖动，因此，为了取得X和Y坐标，须要选取比较小的坐标值，以便于重新指定矩形在画布中的位置。

                double X = Math.Min(p.X, ptUpperLeftCorner.X);

                double Y = Math.Min(p.Y, ptUpperLeftCorner.Y);

                //不断的指定矩形的宽和高

                double W = Math.Abs(p.X - ptUpperLeftCorner.X);

                double H = Math.Abs(p.Y - ptUpperLeftCorner.Y);

                //创建新矩形。

                rc = new Rectangle();

                rc.SetValue<double>(Canvas.LeftProperty, X);

                rc.SetValue<double>(Canvas.TopProperty, Y);

                rc.Width = W; rc.Height = H;

                // 黄色, 3/4透明

                rc.Fill = new SolidColorBrush(Color.FromArgb(64, 255,255, 0));    

                //将矩形添加到画布

                Children.Add(rc);

            }

        }

        void Page_MouseLeftButtonUp(object sender, MouseEventArgs e)

        {

            if (bRectInCreation)

            {

                //为矩形设置边框，并去掉填充色，将填充色变为透明。

                rc.Stroke = new SolidColorBrush(Colors.Blue); rc.StrokeThickness = 1;

                rc.Fill = new SolidColorBrush(Color.FromArgb(0, 0, 0, 0));  // just a border at the end

            }

            bRectInCreation = false;

        }

        void Page_MouseLeftButtonDown(object sender, MouseEventArgs e)

        {

            //如果存在矩形，则移除该矩形

            if (rc != null) Children.Remove(rc);

            //获取当前的鼠标位置。

            Point p = e.GetPosition(this);

            //开始创建矩形

            bRectInCreation = true;

            //获取左上角的位置，也就是单击鼠标时的位置点。

            ptUpperLeftCorner = p;

        }

    }

}

示例代码使用了根画布的Children属性，调用其Remove方法移除矩形，在鼠标移动时，不停的创建矩形形成一种动态的拖动效果。