win8第二步布局

绝对布局
Canvas.Left="10" Canvas.Top="50"向左10向上50

<Canvas>
     <Button Content="1"></Button>
     <Button Content="2" Canvas.Left="10" Canvas.Top="50"></Button>
     <Button Content="3"></Button>
     <Button Content="4"></Button>
</Canvas>

线性布局

<StackPanel Orientation="Horizontal">
     <Button>1</Button>
     <Button>1</Button>
     <Button>1</Button>
     <Button>1</Button>
     <Button>1</Button>
</StackPanel>

表格布局Grid.Row="0" Grid.Column="1"控件要显示在几行几列  Grid.ColumnSpan="2"合并两列

 <Grid>
    <Grid.RowDefinitions><!--*Auto为自动*占据剩余空间0.3*30%的空间-->
        <RowDefinition Height="10*"></RowDefinition>
        <RowDefinition Height="23*"></RowDefinition>
        <RowDefinition Height="16*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Button>11111111111111</Button>
    <Button Grid.Row="0" Grid.Column="1">22222222222222</Button>
    <Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</Button>
</Grid>

在程序中如果动态添加控件已Grid为例

           for(int i =0;i<10;i++)
           {
               RowDefinition row = new RowDefinition();
               grid1.RowDefinitions.Add(row);
           }
           for(int i=0;i<8;i++)
           {
               ColumnDefinition column = new ColumnDefinition();
               grid1.ColumnDefinitions.Add(column);
           }
           Random rand = new Random();
           for(int i=0;i<10;i++)
           {
               for (int j = 0; j < 8; j++)
               {
                   int num = rand.Next(1,6);
                   //如果图片位于项目中，需要给出ms-appx:///
                   string filename = "ms-appx:///Image/"+num+".png";
                   //XAML中为图片设源必须怎么写
                   Image image = new Image();
                   image.Source = new BitmapImage(new Uri(filename));
                   //为grid添加Image控件
                   grid1.Children.Add(image);
                   //设置控件显示在第几行第几列
                   Grid.SetRow(image, i);
                   Grid.SetColumn(image, j);
               }
           }

Button中同时显示图片和文字

 <Button HorizontalAlignment="Left" Margin="153,78,0,0" VerticalAlignment="Top" Height="97" Width="182">
       <StackPanel Orientation="Horizontal">
            <Image Source="Image/1.png" Height="52" Width="67"></Image>
             <TextBlock>确定</TextBlock>
       </StackPanel>
 </Button>