1.移动的矩形

 序：从今天开始，我将带领你们一步一步的学会如何使用C#开发一套WPF版本的OA系统，过程当中我会尽可能的开源，并对相关小技巧进行解释和介绍。

     多余的话很少说了，最后来句发自肺腑的话吧：本系列目的是帮助新手党快速入门，解决问题有思路，不要重新手党变成伸手党。

     前言：WPF开发的是桌面应用程序，即将全面取代Winform，而且Windows 7集成.NET3.5+框架。Xaml 语言是其布局页面语言，能够理解成web项目中的html +css+js.

     好了，本篇帖子的目的是稍微普及下wpf框架和xaml语言。我将作一个矩形，该矩形会随着鼠标的移动也移动。

     首先咱们新建一个WPF项目，接下来打开Window1.xaml进入视图代码编辑器，这里咱们这样写：

<Window x:Class="ultratekflyWpf.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" >
    <Canvas x:Name="Carrier" Width="800" Height="600" Background="Wheat" MouseLeftButtonDown="Carrier_MouseLeftButtonDown" />
</Window>

　 x:Class 指的是 程序集名.类名。 xmlns 是引用程序集的规范写法。 第二行，第三行，表示 从.net框架中 引用 =号后面的程序集供给咱们当前的程序使用， xlmns：x 这个x是咱们给他后面的程序集起的一个别名，方便咱们在下面的xaml代码中使用。 譬如 x:name. 

　在该Windows 标记下， 第一个子布局容器是 canvas(也是惟一一个)，canvas布局容器的特色相似于 winform的panel，经过padding 和margin 属性来控制其内容控件的位置。而后咱们注册了 该canvas的鼠标左击事件。 在左击该canvas时 将触发该事件。  不要将背景色去掉，不然在Canvas中无内容时，无背景色将影响Fill填充宽高从而没法实现MouseLeftButtonDown点击事件)。Canvas做为容器能够实现它内部的控件任意的绝对定位，能够很方便的处理物体的移动。

     界面容器元素布局好了，那么接下来就动态建立物体对象了：

 Rectangle rect;
        public Window1()
        {
            InitializeComponent();
            rect = new Rectangle();
            rect.Fill = new SolidColorBrush(Colors.Red);
            rect.Width = 50;
            rect.Height = 50;
            rect.RadiusX = 5;
            rect.RadiusY = 5;
            Carrier.Children.Add(rect);
            Canvas.SetLeft(rect, 0);
            Canvas.SetTop(rect, 0);
        }

　　

 这里我建立了一个50*50象素，圆角5*5红色的方块对象，而且将它做为子控件添加进Carrier中，而且初始化它在Carrier中的位置: Canvas.SetLeft(rect, 0); Canvas.SetTop(rect, 0);

     对象准备好了，那么接下来就是实现动画了。咱们要实现的是鼠标点哪它就移动到哪：

    private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {

            //建立移动动画

            Point p = e.GetPosition(Carrier);

            Storyboard storyboard = new Storyboard();

            //建立X轴方向动画

            DoubleAnimation doubleAnimation = new DoubleAnimation(

              Canvas.GetLeft(rect),

              p.X,

              new Duration(TimeSpan.FromMilliseconds(500))

            );

            Storyboard.SetTarget(doubleAnimation, rect);

            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Left)"));

            storyboard.Children.Add(doubleAnimation);

            //建立Y轴方向动画

            doubleAnimation = new DoubleAnimation(

              Canvas.GetTop(rect),

              p.Y,

              new Duration(TimeSpan.FromMilliseconds(500))

            );

            Storyboard.SetTarget(doubleAnimation, rect);

            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("(Canvas.Top)"));

            storyboard.Children.Add(doubleAnimation);

            //将动画动态加载进资源内

            if (!Resources.Contains("rectAnimation"))
            {

                Resources.Add("rectAnimation", storyboard);

            }

            //动画播放

            storyboard.Begin();

        }

　　 从上面代码咱们能够看到，首先获取鼠标点击点相对于Carrier中的坐标位置p，而后建立故事板storyboard和Double类型动画doubleAnimation，doubleAnimation有3个参数，分别表明开始值，结束值，动画经历时间，接着经过Storyboard.SetTarget()和Storyboard.SetTargetProperty()分别设置动画的目标及要修改的动画目标属性，再下来将doubleAnimation添加进storyboard中，这样重复两次分别实现X轴和Y轴方向的动画。一切就绪后，经过代码storyboard.Begin()来开始动画。