上面是开始界面的效果和选关界面的效果，我来讲解一下选关界面的设计思路。
首先根据选关的背景图片
选关的背景图片
根据这张图片的设计思路是将每一关按照展示出来的图片像小路一样。
选关的按钮
这里最先考虑使用的组件是WPF的Canvas，但是Canvas的滚动条做法有点别扭，而且Canvas的背景图片的放置计算也相对比较麻烦一些，后来打算用WrapPanel组件，但是这种组件是按照内容进行顺序排放的，没有办法把选关的按钮像小路一样摆放出来。后来选择直接用Grid组件，后台动态打格，然后将选关的组件一个一个的插入。
然后再配上一个StackPanel竖着排放作为背景图片的集合。
前台UI代码如下:
<Grid Width="758" Margin="0,67,0,0">
<StackPanel x:Name="bg_panel"/>
<Grid x:Name="gm_panel">
</Grid>
</Grid>
后台动态配置的代码如下：
/// <summary>
/// 绘制游戏关数
/// </summary>
public void DrawGames()
{
this.gm_panel.Children.Clear();
if(GameManager.GetInstance().Questions.Count<400)
{
throw new Exception("当前游戏关数没有达到400关");
}
//一共有400关，也就是有400行
var rowCount = 400;
//每行六列
var colCount = 6;
//每个按钮的大小是78*78的子组件，背景图片的高度是1138
//动态计算出需要多少个背景图片，插入到StackPanel组件中去，为啥 1呢？因为因为是整数计算
for(int i=0;i<400*78/1138 1;i )
{
Image image = new Image();
image.Stretch = Stretch.UniformToFill;
image.Source= new
BitmapImage(new Uri("Res/GameBG2.jpg", UriKind.Relative) );
this.bg_panel.Children.Add(image);
}
//动态画列
for (int i = 0; i < colCount; i )
{
ColumnDefinition co1 = new ColumnDefinition();
gm_panel.ColumnDefinitions.Add(co1);
}
//动态画行
for (int i=0;i< rowCount; i )
{
RowDefinition row = new RowDefinition();
gm_panel.RowDefinitions.Add(row);
}
//绘制关的按钮
for (int i=0;i<400;i )
{
if (setcol == 5)
{
setcol--;
}
//选关中的按钮子组件
UC_Part_GameSelectPart uC_Part_GameSelectPart = new UC_Part_GameSelectPart(GameManager.GetInstance().Questions[i]);
//关的赋值
uC_Part_GameSelectPart.txt_GameName.Text = ((i 1)).ToString();
//设置上下左右的间距
uC_Part_GameSelectPart.Margin = new Thickness(5);
//将按钮插入到Grid组件中，设置列
uC_Part_GameSelectPart.SetValue(Grid.ColumnProperty, GetSetCol());
// 将按钮插入到Grid组件中，设置行
uC_Part_GameSelectPart.SetValue(Grid.RowProperty, i);
//插入到Grid
this.gm_panel.Children.Add(uC_Part_GameSelectPart);
}
}
bool flag = true;
/// <summary>
/// 从0到5，再从5到0的不断循环获取索引
/// </summary>
/// <returns></returns>
private int GetSetCol()
{
if(flag)
{
this.setcol ;
if(this.setcol==5)
{
flag = false;
}
}
if(!flag)
{
this.setcol--;
if (this.setcol == 0)
{
flag = true;
}
}
return this.setcol;
}
