用 Silverlight 开发围棋在线对弈程序（一）UI 雏形

核心提示： Page.xaml.cs:using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;

Page.xaml.cs:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

　

namespace WoodFoxWeiQi.UI

{

　　　　　　 public partial class Page : UserControl

　　　　　　 {

　　　　　　　　　　　　　 public Page()

　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　 InitializeComponent();

　

　　　　　　　　　　　　　　　　　　　　 canvasBoard.MouseLeftButtonDown += new MouseButtonEventHandler(canvasBoard_MouseLeftButtonDown);

　　　　　　　　　　　　　　　　　　　　 canvasBoard.SizeChanged += new SizeChangedEventHandler(canvasBoard_SizeChanged);

　

　　　　　　　　　　　　　　　　　　　　 btnGo.Click += new RoutedEventHandler(btnGo_Click);

　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　 // 因为 Canvas 的尺寸是根据父控件的尺寸在运行时计算得到的，所以需要在 SizeChanged 方法里

　　　　　　　　　　　　　 // 才能获得其实际尺寸

　　　　　　　　　　　　　 void canvasBoard_SizeChanged(object sender, SizeChangedEventArgs e)

　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　 canvasBoard.Children.Clear();

　　　　　　　　　　　　　　　　　　　　 CreateBoardElements();

　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　 double boardSize;　　　 // 棋盘宽度（不包含坐标）

　　　　　　　　　　　　　 double cellSize;　　　　 // 网格宽度

　　　　　　　　　　　　　 double starSize;　　　　 // 星位的小圆点的直径

　　　　　　　　　　　　　 double stoneSize;　　　 // 棋子直径

　

　　　　　　　　　　　　　 // 创建棋盘上的网格线，星位，坐标等显示元素

　　　　　　　　　　　　　 private void CreateBoardElements()

　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　 // 确保使用一个正方形区域作为棋盘显示区域

　　　　　　　　　　　　　　　　　　　　 boardSize = Math.Min(canvasBoard.ActualHeight, canvasBoard.ActualWidth);

　

　　　　　　　　　　　　　　　　　　　　 // 根据棋盘尺寸计算出相应的其他尺寸

　　　　　　　　　　　　　　　　　　　　 cellSize = boardSize / 20;

　　　　　　　　　　　　　　　　　　　　 starSize = cellSize / 4;

　　　　　　　　　　　　　　　　　　　　 stoneSize = cellSize * 0.8;

　

　　　　　　　　　　　　　　　　　　　　 for (int i = 1; i <= 19; i++)

　　　　　　　　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　　　　　　　 // 添加水平网格线

　　　　　　　　　　　　　　　　　　　　　　　　　　 var lineHorizontal = new Line();

　　　　　　　　　　　　　　　　　　　　　　　　　　 lineHorizontal.X1 = cellSize;

　　　　　　　　　　　　　　　　　　　　　　　　　　 lineHorizontal.X2 = cellSize * 19;

　　　　　　　　　　　　　 　　　　　　　　　　　　　 lineHorizontal.Y1 = lineHorizontal.Y2 = cellSize * i;

　

　　　　　　　　　　　　　　　　　　　　　　　　　　 lineHorizontal.Stroke = new SolidColorBrush(Colors.Black);

　　　　　　　　　　　　　　　　　　　　　　　　　　 lineHorizontal.StrokeThickness = 1.0;

　

　　　　　　　　　　　　　　　　　　　　　　　　　　 canvasBoard.Children.Add(lineHorizontal);

　

　　　　　　　　　　　　　　　　　　　　　　　　　　 // 添加垂直网格线

　　　　　　　　　　　　　　　　　　　　　　　　　　 var lineVertical = new Line();

　　　　　　　　　　　　　　　　　　　　　　　　　　 lineVertical.Y1 = cellSize;

　　　　　　　　　　　　　　　　　　　　　　　　　　 lineVertical.Y2 = cellSize * 19;

　　　　　　　　　　　　　　　　　　　　　　　　　　 lineVertical.X1 = lineVertical.X2 = cellSize * i;

　

　　　　　　　　　　　　　　　　　　　　　　　　　　 lineVertical.Stroke = new SolidColorBrush(Colors.Black);

　　　　　　　　　　　　　　　　　　　　　　　　　　 lineVertical.StrokeThickness = 1.0;

　

　　　　　　　　　　　　　　　　　　　　　　　　　　 canvasBoard.Children.Add(lineVertical);

　　　　　　　　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　　　　　　　　 // 添加9个星位的标志

　　　　　　　　　　　　　　　　　　　　 for (int i = 4; i <= 16; i += 6)

　　　　　　　　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　　　　　　　 for (int j = 4; j <= 16; j += 6)

　　　　　　　　　　　　　　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 double x = i * cellSize - starSize / 2;

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 double y = j * cellSize - starSize / 2;

　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 Ellipse ellipseStar = new Ellipse();

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ellipseStar.Stroke = new SolidColorBrush(Colors.Black);

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ellipseStar.Fill = new SolidColorBrush(Colors.Black);

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ellipseStar.Width = ellipseStar.Height = starSize;

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ellipseStar.SetValue(Canvas.LeftProperty, x);

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ellipseStar.SetValue(Canvas.TopProperty, y);

　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 canvasBoard.Children.Add(ellipseStar);

　　　　　　　　　　　　　　　　　　　　　　　　　　 }

　　　　　　　　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　　　　　　　　 // 画横坐标

　　　　　　　　　　　　　　　　　　　　 for (int i = 1; i <= 19; i++)

　　　　　　　　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　　　　　　　 var txtLabel = new TextBlock();

　　　　　　　　　　　　　　　　　　　　　　　　　　 txtLabel.FontSize = 11.0;

　　　　　　　　　　　　　　　　　　　　　　　　　　 txtLabel.FontWeight = FontWeights.Thin;

　　　　　　　　　　　　　　　　　　　　　　　　　　 txtLabel.Text = i.ToString();

　

　　　　　　　　　　　　　　　　　　　　　　　　　 txtLabel.SetValue(Canvas.LeftProperty, i * cellSize - txtLabel.ActualWidth / 2);

　　　　　　　　　　　　　　　　　　　　　　　　　 txtLabel.SetValue(Canvas.TopProperty, cellSize / 2 - txtLabel.ActualHeight / 2);

　　　　　　　　　　　　　　　　　　　　　　　　　　 txtLabel.Text = i.ToString();

　

　　　　　　　　　　　　　　　　　　　　　　　　　　 canvasBoard.Children.Add(txtLabel);

　　　　　　　　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　　　　　　　　 // 画纵坐标

　　　　　　　　　　　　　　　　　　　　 char c = 'A';

　　　　　　　　　　　　　　　　　　　　 for (int i = 1; i <= 19; i++)

　　　　　　　　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　　　　　　　 var txtLabel = new TextBlock();

　　　　　　　　　　　　　　　　　　　　　　　　　　 txtLabel.FontSize = 11.0;

　　　　　　　　　　　　　　　　　　　　　　　　　　 txtLabel.FontWeight = FontWeights.Thin;

　　　　　　　　　　　　　　　　　　　　　　　　　　 txtLabel.Text = i.ToString();

　

　　　　　　　　　　　　　　　　　　　　　　　　　 txtLabel.SetValue(Canvas.LeftProperty, cellSize / 2 - txtLabel.ActualWidth / 2);

　　　　　　　　　　　　　　　　　　　　　　　　　 txtLabel.SetValue(Canvas.TopProperty, i * cellSize - txtLabel.ActualHeight / 2);

　　　　　　　　　　　　　　　　　　　　　　　　　　 txtLabel.Text = (c++).ToString();

　

　　　　　　　　　　　　　　　　　　　　　　　　　　 canvasBoard.Children.Add(txtLabel);

　　　　　　　　　　　　　　　　　　　　 }

　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　 void canvasBoard_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　 var pos = e.GetPosition(canvasBoard);

　　　　　　　　　　　　　　　　　　　　 MessageBox.Show("Clicked on board, X: " + pos.X + ", Y: " + pos.Y);

　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　 private void btnGo_Click(object sender, RoutedEventArgs e)

　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　 // 放置一个测试的棋子（白子）

　　　　　　　　　　　　　　　　　　　　 Ellipse e1 = new Ellipse();

　　　　　　　　　　　　　　　　　　　　 e1.Stroke = new SolidColorBrush(Colors.Black);

　　　　　　　　　　　　　　　　　　　　 e1.Fill = new SolidColorBrush(Colors.White);

　　　　　　　　　　　　　　　　　　　　 e1.Width = e1.Height = stoneSize;

　

　　　　　　　　　　　　　　　　　　　　 double x = 17 * cellSize - stoneSize / 2;

　　　　　　　　　　　　　　　　　　　　 double y = 4 * cellSize - stoneSize / 2;

　

　　　　　　　　　　　　　　　　　　　　 e1.SetValue(Canvas.LeftProperty, x);

　　　　　　　　　　　　　　　　　　　　 e1.SetValue(Canvas.TopProperty, y);

　

　　　　　　　　　　　　　　　　　　　　 canvasBoard.Children.Add(e1);

　

　　　　　　　　　　　　　　　　　　　　 // 再放一个黑子，带手数显示的

　　　　　　　　　　　　　　　　　　　　 Ellipse e2 = new Ellipse();

　　　　　　　　　　　　　　　　　　　　 e2.Stroke = new SolidColorBrush(Colors.Black);

　　　　　　　　　　　　　　　　　　　　 e2.Fill = new SolidColorBrush(Colors.Black);

　　　　　　　　　　　　　　　　　　　　 e2.Width = e2.Height = stoneSize;

　

　　　　　　　　　　　　　　　　　　　　 double x2 = 16 * cellSize - stoneSize / 2;

　　　　　　　　　　　　　　　　　　　　 double y2 = 4 * cellSize - stoneSize / 2;

　

　　　　　　　　　　　　　　　　　　　　 e2.SetValue(Canvas.LeftProperty, x2);

　　　　　　　　　　　　　　　　　　　　 e2.SetValue(Canvas.TopProperty, y2);

　

　　　　　　　　　　　　　　　　　　　　 canvasBoard.Children.Add(e2);

　

　　　　　　　　　　　　　　　　　　　　 // 绘制手数显示的 Label

　　　　　　　　　　　　　　　　　　　　 TextBlock lbl2 = new TextBlock();

　　　　　　　　　　　　　　　　　　　　 lbl2.FontSize = 10.0;

　　　　　　　　　　　　　　　　　　　　 lbl2.FontWeight = FontWeights.Thin;

　　　　　　　　　　　　　　　　　　　　 lbl2.Text = "203";

　　　　　　　　　　　　　　　　　　　　 lbl2.Foreground = new SolidColorBrush(Colors.White);

　

　　　　　　　　　　　　　　　　　　　　 lbl2.SetValue(Canvas.LeftProperty, 16 * cellSize - lbl2.ActualWidth / 2);

　　　　　　　　　　　　　　　　　　　　 lbl2.SetValue(Canvas.TopProperty, 4 * cellSize - lbl2.ActualHeight / 2);

　

　　　　　　　　　　　　　　　　　　　　 canvasBoard.Children.Add(lbl2);

　

　　　　　　　　　　　　　 }

　　　　　　 }

}