五、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);

}

}

原文地址:https://www.cnblogs.com/suinuaner/p/2798550.html