Silverlight+WCF 新手实例 象棋 游戏房间(十二)

加快手步，写多一篇，这节来创建游戏房间：

先上一张以前的房间图：



构成啊，就是上面文字，下面三个矩形框：

昨天调整了一下样式，看下新的房间图：



哪个好看点这个很难说的清了，不过新的图应用了新的brush画刷填充，当然了，你也可以用图片填充，后面可以教你怎么用图片，

当然了，为了好看，用图片也不为过的，去QQ游戏大厅截两张小图就搞定了，不过这步就留给大伙自己去截了。

现在开始代码了：

我们要创建游戏房间类了，不过这下我们不用新的类库，也不放在象棋库中，我们直接在Silverlight应用程序中，右键，添加文件夹，

起名：Code,在Code文件夹右键->添加类-》输入：GameRoom.cs [顺便把名称空间的XXX.Code下的.Code去掉]



///

<summary>

///
游戏房间 by 路过秋天

///

</summary>

public

class
GameRoom
{

}

接着我们要新增加一些属性：

RoomWidth：房间的宽

RoomHeight: 房间的高

InitPoint：房间的位置，会创建好多个的，像棋子一样，所以总有位置的。

RoomID：房间的ID

RedPlayerInChair：红色座位上是不是有人

BlackPlayerInChair：黑色座位上是不是有人

除了属性，我们再添加几个成员

Panel container;//最外层的窗口，所以的房间都被添加到这里

Canvas room;//房间，里成包括文字和三个矩形框。
Rectangle redChair;//红色座位
Rectangle blackChair;//黑色座位
Rectangle spectatorChair;//旁边观座位

public int gap = 8;//三个矩形框之间的间隔

说过属性，看代码：






Panel container;
//
外层容器，包括很多房间

Canvas room;
//
房间

public

int
gap
=

8
;
//
座位的间隔

Rectangle redChair;
//
红色座位

Rectangle blackChair;
//
黑色座位

Rectangle spectatorChair;
//
旁观者座位

///

<summary>

///
房间的位置，会创建好多个的，像棋子一样，所以总有位置的

///

</summary>

public
Point InitPoint
{

get
;

set
;
}

///

<summary>

///
房间的宽

///

</summary>

public

int
RoomWidth
{

get
;

set
;
}

///

<summary>

///
房间的高

///

</summary>

public

int
RoomHeight
{

get
;

set
;
}

///

<summary>

///
房间编号

///

</summary>

public

int
RoomID
{

get
;

set
;
}

///

<summary>

///
红色座位有人

///

</summary>

public

bool
RedPlayerInChair
{

get
;

set
;
}

///

<summary>

///
黑色座位有人

///

</summary>

public

bool
BlackPlayerInChair
{

get
;

set
;
}

public
GameRoom(
int
roomID,Point location,
int
width)
{
RoomWidth
=
width;
RoomHeight
=
RoomWidth
*
2
/
3
;
RoomID
=
roomID;
InitPoint
=
location;
}

public

void
DrawIn(Panel control)
{
container
=
control;
Draw();
}

private

void
Draw()
{

//
这里实现画房间了

}

在这里，我让房间的高=宽的三分之二。这样是因为下面刚好三个座位，而高又分成上面文字下面座位，所以取2/3方便计算。

除了构造函数，还是那个DrawIn和Draw，是不是很熟悉了，棋子库里都基本是这个定式的代码。

接下来就是要实现画房间了。其实和画棋子一个样，还是赋属性：

看看红色座位：






redChair
=

new
Rectangle()
//
红色座位

{
Width
=
RoomWidth
/

3

-
gap,
Height
=
RoomWidth
/

3

-
gap,

//
这个是直接填充色，就是上面那正规的红蓝黑图

//
Fill = new SolidColorBrush(RedPlayerInChair?Colors.Blue:Colors.Red),

//
这个是激变色，从红过度到透明，一个圆圈型的。

Fill
=

new
RadialGradientBrush(RedPlayerInChair
?
Colors.Blue : Colors.Red, Colors.Transparent),

//
你还可以通过ImageBrush来填充图片，这里留给大伙去实现了。

//
下面是房间的位置的计算。

Margin
=

new
Thickness(gap
/

2
,
+
RoomHeight
/

2

+
gap
/

2
,

,

)
};

接着是观众座位：






GradientStopCollection fillCollection
=

new
GradientStopCollection();
fillCollection.Add(
new
GradientStop(){ Color
=
Colors.Red, Offset
=

});
fillCollection.Add(
new
GradientStop(){ Color
=
Colors.Black,Offset
=

0.7
});
LinearGradientBrush brush
=

new
LinearGradientBrush(fillCollection,

);
//
线条渐变色，从红到黑色。

spectatorChair
=

new
Rectangle()
{
Width
=
RoomWidth
/

3
,
Height
=
RoomWidth
/

3
,

//
这个是直接填充色，就是上面那正规的红蓝黑图

//
Fill = new SolidColorBrush(Color.Blue),

Fill
=
brush,
//
线型的渐变色

Margin
=

new
Thickness(RoomWidth
/

3
, RoomHeight
/

2
,

,

)
};

再来是黑色座位：






blackChair
=

new
Rectangle()
{
Width
=
redChair.Width,
Height
=
redChair.Height,

//
这个是直接填充色，就是上面那正规的红蓝黑图

//
Fill = new SolidColorBrush(BlackPlayerInChair? Colors.Blue : Colors.Black),

//
这个是圆型的渐变色，从黑过度到透明。

Fill
=

new
RadialGradientBrush(RedPlayerInChair
?
Colors.Blue : Colors.Black, Colors.Transparent),
Margin
=

new
Thickness(RoomWidth
*

2

/

3

+
gap
/

2
, redChair.Margin.Top,

,

)
};

好了，座位都弄好了，最后剩下文字了：






TextBlock text
=

new
TextBlock()
{
Foreground
=

new
SolidColorBrush(Colors.Brown),
Text
=

"
房间
"

+
RoomID,
FontFamily
=

new
FontFamily(
"
宋体
"
),
FontSize
=
RoomHeight
/

3
,
FontWeight
=
FontWeights.Bold,
Margin
=

new
Thickness(RoomWidth
/

6
,

,

,

)
};

好，文字和三个座位都有了，我们要创建房间，然后把文字和座位都Add进去。






room
=

new
Canvas()
{
Width
=
RoomWidth,
Height
=
RoomHeight,
Margin
=

new
Thickness(InitPoint.X, InitPoint.Y,

,

),
Background
=

new
SolidColorBrush(Colors.LightGray),
Opacity
=

0.8

};
room.Children.Add(redChair);
room.Children.Add(blackChair);
room.Children.Add(spectatorChair);
room.Children.Add(text);
container.Children.Add(room);

当然最后就是把房间放到大容器里了。

好了，我们现在来改下代码，看下效果

我们Silverlight应用程序->右键-》添加新建项->Silverlight用户控件->Room.xaml

接着我们修改登陆页的转向：


我们把：
((App)(Application.Current)).RedirectTo(
new
MainPage());
改成为：
((App)(Application.Current)).RedirectTo(
new
Room()));

这样我们登陆就后转到游戏房间去。

接着我们要在Room里面生成了一个房间：






public

partial

class
Room : UserControl
{

public
Room()
{
InitializeComponent();
GameRoom gameRoom
=

new
GameRoom(
1
,
new
Point(

,

),
120
);
gameRoom.DrawIn(LayoutRoot);
}
}

OK，按F5，运行，出现登陆框，随便输入昵称，点击登陆：



OK,效果出来了。

下节我们再添加一个Game类，来生成一批房间。

原文链接：
http://www.cnblogs.com/cyq1162/archive/2010/07/12/1775715.html