五、windows8页面布局

windows8开发中，有三种基本布局，分别是：Canvas（容器）  StackPanel（横向或纵向排列）  Grid（网格），第一种属于绝对定位，很少用，一般用在游戏开发中。应用开发还是后两种用的比较多。

第一，Grid

建立三行两列：<Grid>
            <Grid.RowDefinitions>
                <RowDefinition 定义行列属性></RowDefinition>
                <RowDefinition 定义行列属性></RowDefinition>
                <RowDefinition 定义行列属性></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition 定义行列属性></ColumnDefinition>
                <ColumnDefinition 定义行列属性></ColumnDefinition>
            </Grid.ColumnDefinitions>

          内嵌其他的控件，可以定义这些控件位于哪行哪列（Grid.Row="1“  Grid.Column="2"  ），占多行多列(Grid.RowSpan="2" Grid.ColumnSpan="3")
        </Grid>

第二，动态生成布局

例子1：动态生成一个TextBox

在响应事件中添加如下代码：

TextBox tb = new TextBox();

tb.Text="sn";

//设置所在行列位置(例如1行2列)

Grid.SetRow(tb,1);

Grid.SetColumn(tb,2);

tb的父标签的名字（此处是Grid的名字）.Children.Add(tb);

例子2：动态生成10行8列的Grid，以及每个格中添加图片.(类似于连连看）

在工程的入口类中的OnNavigatedTo方法中加入如下代码：

for(int i=0;i<10;i++){

  RowDefinition rowDef = new RowDefinition();

  Grid的名字.RowDefinitions .Add(rowDef）；

}

for(int i=0;i<8;i++){

  ColumnDefinition colDef = new ColumnDefinition();

  Grid的名字.ColumnDefinitions .Add(colDef）；

}

//生成一个随机数

Random rand=new Random();

 

 for(int row=0;row<10;row++){

     for(int col=0;col<8;col++){

              Image img = new Image();

              int num = rand.Next(1,10);  //返回1到9之间的随机数

              string filename="ms-apps///images/"+num+".png";  //获得图片的路径,图片的名字是1到9。如果图片位于项目中，则需要给出ms-apps///

             img.Source=new BitmapImage(new Uri(filename));

            Grid的名字.Children.Add（img）；

             Grid.setRow(img,row);

             Grid.SetColumn(img,col);

}

}