Silverlight2 边学边练 之一 五子棋

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

XAML Code：

<UserControl x:Class="WuZi.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas x:Name="parentCanvas" MouseLeftButt Background="BurlyWood">
    </Canvas>
</UserControl>

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;
            }
        }

效果图

至此一个五子棋的雏形完成，还可以进行其他功能完善。例如，将棋子摆放整齐、判定输赢等等，大家可以举一反三。
本例参考自Apress《Pro Silverlight 2 in C# 2008》CHAPTER 4 ■ DEPENDENCY PROPERTIES AND ROUTED EVENTS