WPF介绍和简单的2D跳棋程序
WPF（Windows Presentation Foundation）是微软推出的基于Windows Vista的用户界面框架，属于.NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架，真正做到了分离界面设计人员与开发人员的工作；同时它提供了全新的多媒体交互用户图形界面。(来自百度百科)
在WPF的框架下，可以使用C#和xmal语言来设计界面。两种设计方法各自的好处，xmal语言是一种标记性语言，使用比较简单和灵活。C#下设计和一般的设计差别不大，但是要注意WPF下的类和接口等。具体的可以参考相关的教程。
关于WPF的入门，可以购买刘铁猛的《深入浅出WPF》，这是一本很好的书，这是他的博客：http://blog.csdn.net/fantasiax ，上面有很多很好的文章，值得一看。
既然WPF可以用来设计很好的界面，所以利用它来做一个简单的跳棋游戏。这里主要使用的C#来设计，下面是主要的程序。程序写的很好乱，没有按照一定的编码规则进行设计和类的设计很差，但是这个程序是我2天之内写出来的，大家可以看看。
源代码：
代码
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Text;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Data;
using
System.Windows.Documents;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Imaging;
using
System.Windows.Navigation;
using
System.Windows.Shapes;
namespace
WPF3
{
///
<summary>
///
Interaction logic for MainWindow.xaml
///
</summary>
public
partial
class
MainWindow : Window
{
Canvas mainPanel
=
new
Canvas();
const
int
North
=
1
;
const
int
NorthWest
=
2
;
const
int
SouthWest
=
3
;
const
int
South
=
4
;
const
int
SouthEast
=
5
;
const
int
NorthEast
=
6
;
const
int
TotalChess
=
10
;
//
the total chesss on the panel for one player
Point center;
double
r;
const
int
APlayer
=
1
;
int
AEnterZoon
=
0
;
const
int
BPlayer
=
-
1
;
int
BEnterZoon
=
0
;
Choise choise
=
new
Choise();
Brush Bs;
public
MainWindow()
{
InitializeComponent();
this
.Content
=
mainPanel;
DrawMailPanel();
center
=
GetCenter();
r
=
GetR();
DrawPanel();
}
///
<summary>
///
this function draw the outline of the mainpanel
///
</summary>
public
void
DrawMailPanel()
{
this
.Width
=
800
;
this
.Height
=
600
;
LinearGradientBrush myLinearGradientBrush
=
new
LinearGradientBrush();
myLinearGradientBrush.GradientStops.Add(
new
GradientStop(Colors.Red,
0.0
));
myLinearGradientBrush.GradientStops.Add(
new
GradientStop(Colors.LimeGreen,
0.5
));
myLinearGradientBrush.GradientStops.Add(
new
GradientStop(Colors.Yellow,
1.0
));
mainPanel.Background
=
myLinearGradientBrush;
}
//
//
draw the whole panel
//
public
void
DrawPanel()
{
choise.r
=
r
*
7
/
(
1.732
*
30
);
int
flag
=
0
;
for
(
int
i
=
0
; i
<
7
; i
++
)
{
flag
=
i
+
1
;
PointCollection PC
=
GetPoints(r, flag);
DrawPoly(PC, flag);
}
List
<
KeyValuePair
<
double
, Point
>>
LKP
=
new
List
<
KeyValuePair
<
double
, Point
>>
();
for
(
int
i
=
0
; i
<
6
; i
++
)
{
flag
=
i
+
1
;
PointCollection newPC
=
GetChessPoints(r
*
14
/
15
, flag);
//
used to ommit the same point
for
(
int
j
=
0
; j
<
newPC.Count; j
++
)
{
int
FlagOfDraw
=
0
;
Point p
=
newPC.ElementAt(j);
double
key
=
(p.Y
-
center.Y)
/
(p.X
-
center.X);
KeyValuePair
<
double
,Point
>
kp
=
new
KeyValuePair
<
double
,Point
>
(key,p);
if
(Math.Abs(key
-
1.732
)
<
0.001
||
Math.Abs(key
+
1.732
)
<
0.001
||
Math.Abs(key)
<
0.001
)
{
for
(
int
k
=
0
;k
<
LKP.Count;k
++
)
{
if
(Math.Abs(key
-
LKP.ElementAt(k).Key)
<
0.001
)
{
if
(clacNorm(p,LKP.ElementAt(k).Value)
==
0
)
{
FlagOfDraw
=
1
;
break
;
}
}
}
}
if
(
0
==
FlagOfDraw)
{
LKP.Add(kp);
DrawPoint(p, flag, r
/
30
);
}
}
}
DrawPoint(center, flag, r
/
30
);
}
//
//
get the center of the panel
//
public
Point GetCenter()
{
Point center
=
new
Point();
center.X
=
this
.Width
/
2
; center.Y
=
this
.Height
/
2
;
return
center;
}
//
//
get the radius
//
public
double
GetR()
{
return
this
.Height
>
this
.Width
?
this
.Width
*
2
/
5
:
this
.Height
*
2
/
5
;
}
//
//
return a collection of points
//
public
PointCollection GetPoints(
double
radius,
int
flag)
{
PointCollection PC
=
new
PointCollection();
double
Offset1
=
radius
/
2
*
Math.Tan(
30
*
Math.PI
/
180
);
double
Offset2
=
radius
/
2
/
Math.Cos(
30
*
Math.PI
/
180
);
//
return a set of points which represent the three points in a triangle
switch
(flag)
{
case
North:
PC.Add(
new
Point(center.X
-
Offset1, center.Y
-
radius
/
2
));
PC.Add(
new
Point(center.X, center.Y
-
radius));
PC.Add(
new
Point(center.X
+
Offset1, center.Y
-
radius
/
2
));
Bs
=
Brushes.Yellow;
break
;
case
NorthWest:
PC.Add(
new
Point(center.X
-
Offset1, center.Y
-
radius
/
2
));
PC.Add(
new
Point(center.X
-
Offset1
-
Offset2, center.Y
-
radius
/
2
));
PC.Add(
new
Point(center.X
-
Offset2, center.Y));
Bs
=
Brushes.Green;
break
;
case
SouthWest:
PC.Add(
new
Point(center.X
-
Offset2, center.Y));
PC.Add(
new
Point(center.X
-
Offset1
-
Offset2, center.Y
+
radius
/
2
));
PC.Add(
new
Point(center.X
-
Offset1, center.Y
+
radius
/
2
));
Bs
=
Brushes.Orange;
break
;
case
South:
PC.Add(
new
Point(center.X
-
Offset1, center.Y
+
radius
/
2
));
PC.Add(
new
Point(center.X, center.Y
+
radius));
PC.Add(
new
Point(center.X
+
Offset1, center.Y
+
radius
/
2
));
Bs
=
Brushes.Red;
break
;
case
SouthEast:
PC.Add(
new
Point(center.X
+
Offset2, center.Y));
PC.Add(
new
Point(center.X
+
Offset1
+
Offset2, center.Y
+
radius
/
2
));
PC.Add(
new
Point(center.X
+
Offset1, center.Y
+
radius
/
2
));
Bs
=
Brushes.Blue;
break
;
case
NorthEast:
PC.Add(
new
Point(center.X
+
Offset1, center.Y
-
radius
/
2
));
PC.Add(
new
Point(center.X
+
Offset1
+
Offset2, center.Y
-
radius
/
2
));
PC.Add(
new
Point(center.X
+
Offset2, center.Y));
Bs
=
Brushes.Purple;
break
;
default
:
//
draw the center origon.
PC.Add(
new
Point(center.X
-
Offset1, center.Y
-
radius
/
2
));
PC.Add(
new
Point(center.X
-
Offset2, center.Y));
PC.Add(
new
Point(center.X
-
Offset1, center.Y
+
radius
/
2
));
PC.Add(
new
Point(center.X
+
Offset1, center.Y
+
radius
/
2
));
PC.Add(
new
Point(center.X
+
Offset2, center.Y));
PC.Add(
new
Point(center.X
+
Offset1, center.Y
-
radius
/
2
));
Bs
=
Brushes.LightYellow;
break
;
}
return
PC;
}
//
//
get tht position of the chess,the return result is only a set of points
//
public
PointCollection GetChessPoints(
double
radius,
int
flag)
{
PointCollection PC
=
GetPoints(radius, flag);
PointCollection NewPC
=
new
PointCollection();
Point[] MiddleP
=
new
Point[
5
];
PC.Add(center);
PC.Add(PC.ElementAt(
0
));
for
(
int
i
=
0
; i
<
PC.Count
-
1
; i
++
)
{
Point[] p
=
new
Point[
3
];
GetMiddlePoint(PC.ElementAt(i),PC.ElementAt(i
+
1
),p);
MiddleP[i]
=
p[
1
];
for
(
int
j
=
0
; j
<
p.Length; j
++
)
{
NewPC.Add(p[j]);
}
NewPC.Add(PC.ElementAt(i));
}
NewPC.RemoveAt(NewPC.Count
-
1
);
Point[] MiddlePP
=
new
Point[
5
];
MiddleP[
4
]
=
MiddleP[
0
];
for
(
int
i
=
0
; i
<
4
; i
++
)
{
MiddlePP[i]
=
new
Point((MiddleP[i].X
+
MiddleP[i
+
1
].X)
/
2
, (MiddleP[i].Y
+
MiddleP[i
+
1
].Y)
/
2
);
NewPC.Add(MiddlePP[i]);
}
MiddlePP[
4
]
=
MiddlePP[
0
];
for
(
int
i
=
0
; i
<
4
; i
++
)
{
NewPC.Add(
new
Point((MiddlePP[i].X
+
MiddlePP[i
+
1
].X)
/
2
, (MiddlePP[i].Y
+
MiddlePP[i
+
1
].Y)
/
2
));
}
NewPC.Add(
new
Point((MiddlePP[
0
].X
+
MiddlePP[
2
].X)
/
2
, (MiddlePP[
0
].Y
+
MiddlePP[
2
].Y)
/
2
));
return
NewPC;
}
//
//
get the innner point on a line.
//
public
void
GetMiddlePoint(Point p1, Point p2,Point[] p)
{
for
(
int
i
=
0
; i
<
p.Length; i
++
)
{
p[i]
=
new
Point(p1.X
+
(p2.X
-
p1.X)
*
(i
+
1
)
/
4
, p1.Y
+
(p2.Y
-
p1.Y)
*
(i
+
1
)
/
4
);
}
}
//
//
draw a polygon in the panel.
//
public
void
DrawPoly(PointCollection PC,
int
flag)
{
if
(flag
>
7
||
flag
<
1
)
{
MessageBox.Show(
"
Error: The input flag is error.Please change the falg!
"
);
return
;
}
Polygon DrawPolygon
=
new
Polygon();
DrawPolygon.Fill
=
Bs;
DrawPolygon.Stroke
=
Brushes.Black;
DrawPolygon.StrokeThickness
=
0.5
;
DrawPolygon.Points
=
PC;
//
this is a drawing procedure.
mainPanel.Children.Add(DrawPolygon);
}
///
<summary>
///
draw a point using a cirsle(ellipse)
///
</summary>
///
<param name="PC"></param>
///
<param name="flag"></param>
public
void
DrawPoint(Point p,
int
flag,
double
EllipseR)
{
if
(flag
>
6
||
flag
<
1
)
{
MessageBox.Show(
"
Error: The input flag is error.Please change the falg!
"
);
return
;
}
Ellipse ellipse
=
new
Ellipse();
ellipse.Stroke
=
System.Windows.Media.Brushes.Black;
if
(p.Y
<
center.Y
-
r
/
2
||
p.Y
>
center.Y
+
r
/
2
)
{
if
(flag
==
1
&&
p.Y
<
center.Y
-
r
/
2
){ellipse.Fill
=
Brushes.Yellow;}
else
if
(flag
==
4
&&
p.Y
>
center.Y
+
r
/
2
) { ellipse.Fill
=
Brushes.Red; }
}
else
{
ellipse.Fill
=
System.Windows.Media.Brushes.Chocolate;
}
Canvas.SetTop(ellipse, p.Y
-
EllipseR);
Canvas.SetLeft(ellipse, p.X
-
EllipseR);
ellipse.Width
=
2
*
EllipseR;
ellipse.Height
=
2
*
EllipseR;
ellipse.MouseLeftButtonDown
+=
new
MouseButtonEventHandler(ellipse_MouseLeftButtonDown);
ellipse.MouseRightButtonDown
+=
new
MouseButtonEventHandler(ellipse_MouseRightButtonDown);
mainPanel.Children.Add(ellipse);
}
///
<summary>
///
when you press on one ellipse, will trigger this handler.
///
</summary>
///
<param name="sender"></param>
///
<param name="e"></param>
void
ellipse_MouseLeftButtonDown(
object
sender, MouseButtonEventArgs e)
{
Ellipse ellipse
=
sender
as
Ellipse;
if
(choise.IsChoosing())
{
//
you have pressed a ellipse,then your action reprensent that you are moving a chess
//
so we need to determine the valitity of your action.
Point SelectP
=
new
Point(Canvas.GetLeft(ellipse), Canvas.GetTop(ellipse));
Point OriginalP
=
choise.GetChoise();
double
ratio
=
clacNorm(SelectP,OriginalP);
//
MessageBox.Show(ratio.ToString());
if
(ellipse.Fill
==
Brushes.Chocolate)
{
UIElementCollection iter
=
mainPanel.Children;
Ellipse OriginalEllipse
=
new
Ellipse();
Point OriginallEllipsePoint
=
new
Point();
for
(
int
i
=
0
; i
<
iter.Count; i
++
)
{
if
(iter[i]
is
Ellipse)
{
OriginalEllipse
=
iter[i]
as
Ellipse;
OriginallEllipsePoint
=
new
Point(Canvas.GetLeft(OriginalEllipse), Canvas.GetTop(OriginalEllipse));
if
(clacNorm(OriginalP, OriginallEllipsePoint)
<
0.001
)
{
break
;
}
}
}
if
(Math.Abs(ratio
-
1
)
<
0.001
)
{
//
this is ok,have no chess on the it.
//
MessageBox.Show(ratio.ToString());
OriginalEllipse.Fill
=
Brushes.Chocolate;
ellipse.Fill
=
choise.GetBrush();
choise.SetChoosing(
false
);
clacResult(SelectP.Y,OriginalP.Y);
choise.setFlagOfPlayer(
-
choise.GetFlagOfPlayer());
}
else
{
int
FLagOfMove
=
0
;
for
(
int
i
=
0
; i
<
iter.Count; i
++
)
{
if
(iter[i]
is
Ellipse)
{
Ellipse MiddleEllipse
=
iter[i]
as
Ellipse;
Point MiddleP
=
new
Point(Canvas.GetLeft(MiddleEllipse), Canvas.GetTop(MiddleEllipse));
double
SM
=
Math.Abs(clacNorm(SelectP, MiddleP));
double
OM
=
Math.Abs(clacNorm(OriginallEllipsePoint, MiddleP));
if
(Math.Abs(OM
+
SM
-
ratio)
<
0.001
&&
OM
>
0.001
&&
SM
>
0.001
)
{
//
MessageBox.Show();
if
(MiddleEllipse.Fill
==
Brushes.Chocolate)
{
FLagOfMove
=
0
;
break
;
}
else
{
FLagOfMove
+=
1
;
}
}
//
MessageBox.Show(FLagOfMove.ToString());
}
}
//
MessageBox.Show((FLagOfMove-ratio+1).ToString());
if
(Math.Abs(FLagOfMove
-
ratio
+
1
)
<
0.001
)
{
OriginalEllipse.Fill
=
Brushes.Chocolate;
ellipse.Fill
=
choise.GetBrush();
choise.SetChoosing(
false
);
clacResult(SelectP.Y, OriginalP.Y);
choise.setFlagOfPlayer(
-
choise.GetFlagOfPlayer());
}
}
}
}
else
if
(
!
choise.IsChoosing()
&&
ellipse.Fill
!=
Brushes.Chocolate)
{
//
you don't choose any ellipse
if
(choise.GetFlagOfPlayer()
==
APlayer)
{
if
(ellipse.Fill
!=
Brushes.Yellow)
{
MessageBox.Show(
"
please wait,it is not your turn.
"
);
return
;
}
}
else
{
if
(ellipse.Fill
!=
Brushes.Red)
{
MessageBox.Show(
"
please wait,it is not your turn.
"
);
return
;
}
}
choise.SetChoosing(
true
);
choise.SetChoise(
new
Point(Canvas.GetLeft(ellipse),Canvas.GetTop(ellipse)));
choise.setBrush(ellipse.Fill);
ellipse.Fill
=
Brushes.DarkOrchid;
}
}
void
ellipse_MouseRightButtonDown(
object
sender, MouseButtonEventArgs e)
{
Ellipse ellipse
=
sender
as
Ellipse;
Point p
=
new
Point(Canvas.GetLeft(ellipse),Canvas.GetTop(ellipse));
//
MessageBox.Show(clacNorm(choise.GetChoise(), p).ToString());
if
(choise.IsChoosing()
&&
clacNorm(choise.GetChoise(),p)
==
0
&&
ellipse.Fill
==
Brushes.DarkOrchid)
{
//
you have choose a ellipse,use this method to cancel this choice.
choise.SetChoosing(
false
);
ellipse.Fill
=
choise.GetBrush();
}
}
public
void
clacResult(
double
NewY,
double
OldY)
{
if
(choise.GetFlagOfPlayer()
==
APlayer
&&
NewY
>
center.Y
+
r
/
2
&&
OldY
<
center.Y
+
r
/
2
)
{
AEnterZoon
++
;
if
(AEnterZoon
==
TotalChess)
{
MessageBox.Show(
"
Game Over!
"
);
}
}
else
if
(choise.GetFlagOfPlayer()
==
BPlayer
&&
NewY
<
center.Y
-
r
/
2
&&
OldY
>
center.Y
-
r
/
2
)
{
BEnterZoon
++
;
if
(BEnterZoon
==
TotalChess)
{
MessageBox.Show(
"
Game Over!
"
);
}
}
}
public
double
clacNorm(Point p1,Point p2)
{
return
Math.Sqrt((p1.X
-
p2.X)
*
(p1.X
-
p2.X)
+
(p1.Y
-
p2.Y)
*
(p1.Y
-
p2.Y))
/
choise.r;
}
}
public
class
Choise
{
private
bool
isChoosing;
private
Point choise;
private
Brush brush;
public
double
r;
int
FlagOfplayer;
public
Choise()
{
isChoosing
=
false
;
FlagOfplayer
=
1
;
}
public
int
GetFlagOfPlayer()
{
return
FlagOfplayer;
}
public
void
setFlagOfPlayer(
int
flag)
{
if
(FlagOfplayer
!=
1
&&
FlagOfplayer
!=
-
1
)
{
MessageBox.Show(
"
Error!
"
);
}
FlagOfplayer
=
flag;
}
public
void
setBrush(Brush brush)
{
this
.brush
=
brush;
}
public
Brush GetBrush()
{
return
brush;
}
public
bool
IsChoosing()
{
return
isChoosing;
}
public
void
SetChoosing(
bool
choosing)
{
isChoosing
=
choosing;
}
public
Point GetChoise()
{
return
choise;
}
public
void
SetChoise(Point p)
{
choise
=
p;
}
}
}
如果要运行上面的程序，只需要建立一个新的WPF应用程序，名字时WPF3，然后把MainWindow.xaml.cs中的源程序直接用上面的程序替了就行。
现在只有红黄两方是可以游戏的，也就是你只能动黄的和红的棋子，并且是黄的先行。用的左键选中一个棋子，如果去取消，使用右键在点一下。然后用左键点你要去的位置就OK了。