转帖地址：http://www.cnblogs.com/cyq1162/archive/2010/07/12/1775715.html
加快手步，写多一篇，这节来创建游戏房间：
先上一张以前的房间图：
构成啊，就是上面文字，下面三个矩形框：
昨天调整了一下样式，看下新的房间图：
哪个好看点这个很难说的清了，不过新的图应用了新的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 , 0 , 0 ) };
接着是观众座位：
GradientStopCollection fillCollection = new GradientStopCollection(); fillCollection.Add( new GradientStop(){ Color = Colors.Red, Offset = 0 }); fillCollection.Add( new GradientStop(){ Color = Colors.Black,Offset = 0.7 }); LinearGradientBrush brush = new LinearGradientBrush(fillCollection, 0 ); // 线条渐变色，从红到黑色。 spectatorChair = new Rectangle() { Width = RoomWidth / 3 , Height = RoomWidth / 3 , // 这个是直接填充色，就是上面那正规的红蓝黑图 // Fill = new SolidColorBrush(Color.Blue), Fill = brush, // 线型的渐变色 Margin = new Thickness(RoomWidth / 3 , RoomHeight / 2 , 0 , 0 ) };
再来是黑色座位：
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, 0 , 0 ) };
好了，座位都弄好了，最后剩下文字了：
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 , 0 , 0 , 0 ) };
好，文字和三个座位都有了，我们要创建房间，然后把文字和座位都Add进去。
room = new Canvas() { Width = RoomWidth, Height = RoomHeight, Margin = new Thickness(InitPoint.X, InitPoint.Y, 0 , 0 ), 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( 0 , 0 ), 120 ); gameRoom.DrawIn(LayoutRoot); } }
OK，按F5，运行，出现登陆框，随便输入昵称，点击登陆：
OK,效果出来了。
下节我们再添加一个Game类，来生成一批房间。
