用 Silverlight 开发围棋在线对弈程序(一)UI 雏形
2009-03-31 12:01:59 来源:WEB开发网重构后的代码 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
Tags:Silverlight 开发 围棋
编辑录入:爽爽 [复制链接] [打 印]- ››开发Android 日历教程
- ››开发学院总结 Win 8实用技巧大全
- ››开发学院原创教程:把win8的IE10放桌面上方法(非...
- ››silverlight全屏显示图片
- ››Silverlight MVVM 模式(一) 切近实战
- ››开发者眼中的Windows Phone和Android
- ››开发学院教你用SQL 语句最快速清空MySQL 数据表的...
- ››Silverlight for Windows Phone 7开发系列(1):...
- ››Silverlight for Windows Phone 7开发系列(2):...
- ››Silverlight for Windows Phone 7开发系列(3):...
- ››Silverlight for Windows Phone 7开发系列(4):...
- ››开发一个自己的HTML在线编辑器(一)
更多精彩
赞助商链接