最近在看《Pro Silverlight 2 in C# 2008》，个人感觉这本书写的不错。
全书采用彩色印刷，可以使读者立刻看到程序运行的最后效果。虽然说是高级教程，
但看起来还是非常通俗易懂，个别地方可能有些难度需要仔细研究下。
书看了不少光看不练难免会感觉生疏。结合书中的示例举一反三做一些东东，
同时也和正在学习Silverlight的朋友交流下经验。根据第四章关于Mouse Event的示例，
改编成一个五子棋游戏。

XAML Code：

C# Code：

首先，画出一个15×15的棋盘。

public Page()
     ...{
        InitializeComponent();
        int offset = 0;        //横竖各15条线         for (int i = 0; i <= 15; i++)
        ...{
           //垂直线             Line lineX = new Line();
           lineX.Stroke = new SolidColorBrush(Colors.Black);
           lineX.X1 = 10 + offset;
           lineX.Y1 = 10;
           lineX.X2 = 10 + offset;
           lineX.Y2 = 610;
           parentCanvas.Children.Add(lineX);
           //水平线
             Line lineY = new Line();
           lineY.Stroke = new SolidColorBrush(Colors.Black);
           lineY.X1 = 10;
           lineY.Y1 = 10 + offset;
           lineY.X2 = 610;
           lineY.Y2 = 10 + offset;
           parentCanvas.Children.Add(lineY);
           //线间距             offset += 40;
         }
      }

当点击棋盘时，按次序显示黑白子。

//跟踪棋子是否被拖拽      private bool isDragging = false;
     //当棋子被点击时，记录相对于棋子的坐标值。      private Point mouseOffset;        
     //判断黑子      private int num = 0;
     private void canvas_Click(object sender, MouseButtonEventArgs e)
     ...{
         //当鼠标没进行拖拽时，创建棋子。
          if (!isDragging)
         ...{
           int y;
           y = num % 2;
           Ellipse ellipse = new Ellipse();
           //判断棋子的颜色，奇数黑、偶数白。             if (y == 0)
           ...{
              ellipse.Fill = new SolidColorBrush(Colors.Black);
           }
           else
           ...{
              ellipse.Fill = new SolidColorBrush(Colors.White);
           }           //设置棋子大小             ellipse.Width = 40;
           ellipse.Height = 40;           //改变棋子鼠标形状(手型)
           ellipse.Cursor = Cursors.Hand;           //根据鼠标位置定位棋子的坐标
             Point point = e.GetPosition(this);
           ellipse.SetValue(Canvas.TopProperty, point.Y - ellipse.Height / 2);
           ellipse.SetValue(Canvas.LeftProperty, point.X - ellipse.Width / 2);
           //跟踪鼠标左键操作             ellipse.MouseLeftButtonDown += ellipse_MouseDown;
           //添加棋子
             parentCanvas.Children.Add(ellipse);
           num++;
         }
     }

鼠标操作跟踪

//按住鼠标左键      private void ellipse_MouseDown(object sender, MouseButtonEventArgs e)
     ...{
         //对棋子进行拖拽
          isDragging = true;
         Ellipse ellipse = (Ellipse)sender;
         //获取相对棋子的坐标值，以棋子左上角为(0,0)点          mouseOffset = e.GetPosition(ellipse);
         //跟踪鼠标其他操作
          ellipse.MouseMove += ellipse_MouseMove;
         ellipse.MouseLeftButtonUp += ellipse_MouseUp;
         //捕获鼠标位置，将棋子与鼠标绑定
          ellipse.CaptureMouse();
        }        //鼠标移动         private void ellipse_MouseMove(object sender, MouseEventArgs e)
        ...{
            if (isDragging)
            ...{
                Ellipse ellipse = (Ellipse)sender;
                //获取相对Canvas的坐标值
                  Point point = e.GetPosition(this);
                //移动棋子
                  ellipse.SetValue(Canvas.TopProperty, point.Y - mouseOffset.Y);
                ellipse.SetValue(Canvas.LeftProperty, point.X - mouseOffset.X);
            }
        }        //放开鼠标左键
         private void ellipse_MouseUp(object sender, MouseButtonEventArgs e)
        ...{
            if (isDragging)
            ...{
                Ellipse ellipse = (Ellipse)sender;
                //取消鼠标操作跟踪                  ellipse.MouseMove -= ellipse_MouseMove;
                ellipse.MouseLeftButtonUp -= ellipse_MouseUp;
                ellipse.ReleaseMouseCapture();
                isDragging = false;
            }
        }

效果图

至此一个五子棋的雏形完成，还可以进行其他功能完善。例如，将棋子摆放整齐、判定输赢等等，大家可以举一反三。