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

核心提示： 重构后的代码 Page.xaml.cs (每个方法代码大概5～10行左右)：using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using

重构后的代码 Page.xaml.cs (每个方法代码大概5～10行左右)：

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 += canvasBoard_MouseLeftButtonDown;

　　　　　　　　　　　　　　　　　　　　 canvasBoard.SizeChanged += canvasBoard_SizeChanged;

　

　　　　　　　　　　　　　　　　　　　　 btnGo.Click += btnGo_Click;

　　　　　　　　　　　　　　　　　　　　 chkShowAxisLabels.Checked += chkShowAxisLabels_Checked;

　　　　　　　　　　　　　　　　　　　　 chkShowAxisLabels.Unchecked += chkShowAxisLabels_Checked;

　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　 #region Fields

　　　　　　　　　　　　　 private readonly Brush brush_White = new SolidColorBrush(Colors.White);

　　　　　　　　　　　　　 private readonly Brush brush_Black = new SolidColorBrush(Colors.Black);

　

　　　　　　　　　　　　　 private readonly List<TextBlock> yAxisLabels = new List<TextBlock>(20);

　　　　　　　　　　　　　 private readonly List<TextBlock> xAxisLabels = new List<TextBlock>(20);

　

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

　　　　　　　　　　　　　 double cellSize;　　　　 // 网格宽度

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

　　　　　　　　　　　　　 double stoneSize;　　　 // 棋子直径

　　　　　　　　　　　　　 #endregion

　

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

　　　　　　　　　　　　　 // 才能获得其实际尺寸

　　　　　　　　　　　　　 void canvasBoard_SizeChanged(object sender, SizeChangedEventArgs e)

　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　 canvasBoard.Children.Clear();

　　　　　　　　　　　　　　　　　　　　 CreateBoardElements();

　　　　　　　　　　　　　 }

　　　　　　　

　　　　　　　　　　　　　 void canvasBoard_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　 var pos = e.GetPosition(canvasBoard);

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

　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　 void btnGo_Click(object sender, RoutedEventArgs e)

　　　　　　　　　　　　　 {

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

　　　　　　　　　　　　　　　　　　　 var e1 = BuildCircle(stoneSize, 17 * cellSize, 4 * cellSize, brush_Black, brush_White);

　

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

　　　　　　　　　　　　　　　　　　　 var e2 = BuildCircle(stoneSize, 16 * cellSize, 4 * cellSize, brush_Black, brush_Black);

　

　　　　　　　　　　　　　　　　　　　　 // 绘制手数显示的 Label

　　　　　　　　　　　　　　　　　　　　 var lbl2 = BuildLabel("203", brush_White, 10.0, 16 * cellSize, 4 * cellSize);

　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　 // 显示或隐藏坐标轴

　　　　　　　　　　　　　 void chkShowAxisLabels_Checked(object sender, RoutedEventArgs e)

　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　 var show = chkShowAxisLabels.IsChecked.HasValue && chkShowAxisLabels.IsChecked.Value;

　　　　　　　　　　　　　　　　　　　　 foreach (var label in xAxisLabels.Union(yAxisLabels))

　　　　　　　　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　　　　　　　 label.Visibility = show ? Visibility.Visible : Visibility.Collapsed;

　　　　　　　　　　　　　　　　　　　　 }

　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　 #region Builder methods for children elements

　

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

　　　　　　　　　　　　　 void CreateBoardElements()

　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　 CalculateSizes();

　

　　　　　　　　　　　　　　　　　　　　 BuildGridLines();

　

　　　　　　　　　　　　　　　　　　　　 BuildStarPointMarks();

　

　　　　　　　　　　　　　　　　　　　　 BuildXAxisLabels();

　

　　　　　　　　　　　　　　　　　　　　 BuildYAxisLabels();

　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　 // 计算必要的一些尺寸定义值

　　　　　　　　　　　　　 void CalculateSizes()

　　　　　　　　　　　　　 {

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

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

　

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

　　　　　　　　　　　　　　　　　　　　 cellSize = boardSize / 20;

　　　　　　　　　　　　　　　　　　　　 starSize = cellSize / 4;

　　　　　　　　　　　　　　　　　　　　 stoneSize = cellSize * 0.8;

　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　 // 添加网格线

　　　　　　　　　　　　　 void BuildGridLines()

　　　　　　　　　　　　　 {

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

　　　　　　　　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　　　　　　　 // 添加水平网格线

　　　　　　　　　　　　　　　　　　　　　　　　　　 BuildLine(cellSize, cellSize * i, cellSize * 19, cellSize * i);

　

　　　　　　　　　　　　　　　　　　　　　　　　　　 // 添加垂直网格线

　　　　　　　　　　　　　　　　　　　　　　　　　　 BuildLine(cellSize * i, cellSize, cellSize * i, cellSize * 19);

　　　　　　　　　　　　　　　　　　　　 }

　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　 // 添加9个星位的标志

　　　　　　　　　　　　　 void BuildStarPointMarks()

　　　　　　　　　　　　　 {

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

　　　　　　　　　　　　　　　　　　　　 {

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

　　　　　　　　　　　　　　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 BuildCircle(starSize, i * cellSize, j * cellSize, brush_Black, brush_Black);

　　　　　　　　　　　　　　　　　　　　　　　　　　 }

　　　　　　　　　　　　　　　　　　　　 }

　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　 // 画横坐标

　　　　　　　　　　　　　 void BuildXAxisLabels()

　　　　　　　　　　　　　 {

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

　　　　　　　　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　　　　　　　 var lbl = BuildLabel(i.ToString(), brush_Black, 11.0, i * cellSize, cellSize / 2);

　

　　　　　　　　　　　　　　　　　　　　　　　　　　 xAxisLabels.Add(lbl);

　　　　　　　　　　　　　　　　　　　　 }

　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　 // 画纵坐标

　　　　　　　　　　　　　 void BuildYAxisLabels()

　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　 var c = 'A';

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

　　　　　　　　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　　　　　　　 var text = (c++).ToString();

　　　　　　　　　　　　　　　　　　　　　　　　　　 var lbl = BuildLabel(text, brush_Black, 11.0, cellSize / 2, i * cellSize);

　

　　　　　　　　　　　　　　　　　　　　　　　　　　 yAxisLabels.Add(lbl);

　　　　　　　　　　　　　　　　　　　　 }

　　　　　　　　　　　　　 }

　　　　　　　　　　　　　 #endregion

　

　　　　　　　　　　　　　 #region Basic builder methods

　

　　　　　　　　　　　　　 Line BuildLine(double x1, double y1, double x2, double y2)

　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　 var line = new Line {

　　　　　　　　　　　　　　　　　　　　　　　　　　 X1 = x1,

　　　　　　　　　　　　　　　　　　　　　　　　　　 X2 = x2,

　　　　　　　　　　　　　　　　　　　　　　　　　　 Y1 = y1,

　　　　　　　　　　　　　　　　　　　　　　　　　　 Y2 = y2,

　　　　　　　　　　　　　　　　　　　　　　　　　　 Stroke = brush_Black,

　　　　　　　　　　　　　　　　　　　　　　　　　　 StrokeThickness = 1.0

　　　　　　　　　　　　　　　　　　　　 };

　　　　　　　　　　　　　　　　　　　　 canvasBoard.Children.Add(line);

　

　　　　　　　　　　　　　　　　　　　　 return line;

　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　 Ellipse BuildCircle(double diameter, double centerX, double centerY, Brush stroke, Brush fill)

　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　 var ellipse = new Ellipse { Stroke = stroke, Fill = fill };

　　　　　　　　　　　　　　　　　　　　 ellipse.Width = ellipse.Height = diameter;

　　　　　　　　　　　　　　　　　　　　 ellipse.SetValue(Canvas.LeftProperty, centerX - diameter / 2);

　　　　　　　　　　　　　　　　　　　　 ellipse.SetValue(Canvas.TopProperty, centerY - diameter / 2);

　

　　　　　　　　　　　　　　　　　　　　 canvasBoard.Children.Add(ellipse);

　　　　　　　　　　　　　　　　　　　　 return ellipse;

　　　　　　　　　　　　　 }

　

　　　　　　　　　　　　　 // 创建 Label

　　　　　　　　　　　　　 TextBlock BuildLabel(string text, Brush foreground, double fontSize,

　　　　　　　　　　　　　　　　　　　　 double centerX, double centerY)

　　　　　　　　　　　　　 {

　　　　　　　　　　　　　　　　　　　　 var lbl = new TextBlock {

　　　　　　　　　　　　　　　　　　　　　　　　　　 FontSize = fontSize,

　　　　　　　　　　　　　　　　　　　　　　　　　　 FontWeight = FontWeights.Thin,

　　　　　　　　　　　　　　　　　　　　　　　　　　 Text = text,

　　　　　　　　　　　　　　　　　　　　　　　　　　 Foreground = foreground

　　　　　　　　　　　　　　　　　　　　 };

　

　　　　　　　　　　　　　　　　　　　　 lbl.SetValue(Canvas.LeftProperty, centerX - lbl.ActualWidth / 2);

　　　　　　　　　　　　　　　　　　　　 lbl.SetValue(Canvas.TopProperty, centerY - lbl.ActualHeight / 2);

　

　　　　　　　　　　　　　　　　　　　　 canvasBoard.Children.Add(lbl);

　

　　　　　　　　　　　　　　　　　　　　 return lbl;

　　　　　　　　　　　　　 }

　　　　　　　　　　　　　 #endregion

　　　　　　 }

}

系列文章：

用 Silverlight 开发围棋在线对弈程序（二）MVC