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>