Steps to speed up the hand, to write more than one, this section to create a game room:
First on a previous drawing room:
Configuration ah, text above, the following three rectangular frame:
Yesterday adjusted his style, the rooms look new map:
This is difficult to say which look good points clear, but the new map application of a new brush brush filled, of course, you also can be filled with pictures, can teach you how to use the back of the picture,
Of course, to look good, with the picture is not excessive, and to QQ games hall cut two small diagram to get, but this step would be left to themselves to cut everyone up.
Now the code:
We want to create a game room category, but we do not have it at the new library, the library is not in chess, we directly in Silverlight applications, right, add a folder,
Named: Code, Code files in the folder right -> Add Class - "Input: GameRoom.cs [.Code way under the namespace removed XXX.Code]
Then we want to add some new attributes:
RoomWidth: wide room
RoomHeight: high room
InitPoint: the location of the room, creates a good number, like chess pieces as well, so there is always locations.
RoomID: ID room
RedPlayerInChair: red seat is not someone
BlackPlayerInChair: black seat is not someone
In addition to property, we add a few more members
Panel container; // outermost layer of the window, so the rooms have been added here
Canvas room;//房间，里成包括文字和三个矩形框。
Rectangle redChair;//红色座位
Rectangle blackChair;//黑色座位
Rectangle spectatorChair;//旁边观座位
public int gap = 8;//三个矩形框之间的间隔
说过属性，看代码：
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，是不是很熟悉了，棋子库里都基本是这个定式的代码。
接下来就是要实现画房间了。其实和画棋子一个样，还是赋属性：
看看红色座位：
{
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 )
};
接着是观众座位：
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 )
};
再来是黑色座位：
{
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 )
};
好了，座位都弄好了，最后剩下文字了：
{
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进去。
{
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 Room()
{
InitializeComponent();
GameRoom gameRoom = new GameRoom( 1 , new Point( 0 , 0 ), 120 );
gameRoom.DrawIn(LayoutRoot);
}
}
OK, press F5, run, login box appears, just enter a nickname, click Online:
OK, the effect came out.
The next section we'll add a Game class to generate a number of rooms.
Reproduced in: https: //my.oschina.net/secyaher/blog/274125