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()來開始動畫。