Windows8 Metro应用开发之C# 2 - 布局控件Grid,Canvas,StackPanel(延续Silverlight)

1、Windows8 Metro应用开发之C#（2）- 布局控件Grid,Canvas,StackPanel（延续Silverlight）介绍：在Metro中从Silverlight中保留下来了一些布局控件及一些新增的布局控件。本节主要讲解从Silverlight中延续下来的布局控件Grid、Canvas及StackPanel，如果你有Silvelright或WPF基础可以跳过本节。 Grid网格布局控件 定义由行和列组成的网格区域。Grid.xaml 1 <UserControl 2     

2、;x:Class="BlankApplication.Grid" 3     xmlns="" 4     xmlns:x="" 5     xmlns:local="using:BlankApplication" 6     xmlns:d="" 

3、7     xmlns:mc="" 8     mc:Ignorable="d" 9     d:DesignHeight="300"10     d:DesignWidth="400">11     12   &

4、lt;!-Grid表格布局13     Grid.RowDefinitions：定义Grid中的行14     Grid.ColumnDefinitions ：定义Grid的列15     16     ->17         <Grid HorizontalAlignmen

5、t="Center" Height="210"  VerticalAlignment="Center" Width="305">18             <Grid.RowDefinitions>19          

6、0;      <!-定义三行及每行高度->20                 <RowDefinition Height="30*"/>21              &#

7、160;  <RowDefinition Height="32*"/>22                 <RowDefinition Height="43*"/>23             

8、</Grid.RowDefinitions>24             <Grid.ColumnDefinitions>25                 <!-定义四列及每列宽度->26      

9、           <ColumnDefinition Width="58*" />27                 <ColumnDefinition Width="61*"/>28   

10、              <ColumnDefinition Width="123*"/>29                 <ColumnDefinition Width="63*"/>30 

11、;            </Grid.ColumnDefinitions>31             <!-Grid第一列->32             <Rectangle 

12、;Fill="#FFF4F4F5"/>33             <Rectangle Fill="#FF0B0BEE" Grid.Row="1"  />34             <Rectangle 

13、;Fill="#FFEECF0B" Grid.Row="2"   />35             <!-Grid第二列->36             <Rectangle Fill="#FF34EE0B"

14、; Grid.Row="2" Grid.Column="1"  />37             <Rectangle Fill="#FFFF9A09" Grid.Row="0" Grid.Column="1"  />38   &#

15、160;         <Rectangle Fill="#FF08B7D3" Grid.Row="1" Grid.Column="1"  />39             <!-Grid第三列->40   

16、60;         <Rectangle Fill="#FFD30889" Grid.Row="0" Grid.Column="2"  />41             <Rectangle Fill="#FFB708D3&qu

17、ot; Grid.Row="1" Grid.Column="2"  />42             <Rectangle Fill="#FF4B484B" Grid.Row="2" Grid.Column="2"  />43   

18、          <!-Grid第四列->44             <Rectangle Fill="#FF661F4D" Grid.Row="0" Grid.Column="3"  />45   &

19、#160;         <Rectangle Fill="#FF0DF0BC" Grid.Row="1" Grid.Column="3"  />46             <Rectangle Fill="#FF0FAA4E&

20、quot; Grid.Row="2" Grid.Column="3"  />47         </Grid>48 49    </UserControl>  Canvas画布布局控件定义一个区域，在该区域中可以使用相对于该区域的坐标显式定位子元素。  canvas.xaml 1 <User

21、Control 2     x:Class="BlankApplication.Canvas" 3     xmlns="" 4     xmlns:x="" 5     xmlns:local="using:BlankApplication" 6  

22、;   xmlns:d="" 7     xmlns:mc="" 8     mc:Ignorable="d" 9     d:DesignHeight="300"10     d:DesignWidth="400">11 

23、    12     <Grid>13         <Canvas HorizontalAlignment="Center" Height="144" Margin="0" VerticalAlignment="Center" Width="276"

24、; Background="#FFAA6C6C">14             <!-Canvas里子元素通过调整Canvas区域的绝对位置来定位15             Canvas.Left - 以左上角为原点，Canvas X轴的距离16 

25、0;           Canvas.Top - 以左上角为原点，Canvas Y轴的距离17              ->18             <Ellipse&#

26、160;Fill="#FF0B0BC5" Height="51" Canvas.Left="30" Stroke="Black" Canvas.Top="52" Width="53"/>19             <Rectangle Fill="#FF32FD12

27、" Height="56" Canvas.Left="119" Stroke="Black" Canvas.Top="38" Width="84"/>20         </Canvas>21 22     </Grid>23 </UserC

28、ontrol> StackPanel排列布局控件  将子元素排列成一行（可沿水平或垂直方向）  stackpanel.xaml  1 <UserControl 2     x:Class="BlankApplication.StackPanel" 3     xmlns="" 4     

29、;xmlns:x="" 5     xmlns:local="using:BlankApplication" 6     xmlns:d="" 7     xmlns:mc="" 8     mc:Ignorable="d" 9  

30、;   d:DesignHeight="300"10     d:DesignWidth="400">11     <StackPanel>12         <StackPanel Orientation="Horizontal" x:Name="stackpa

31、nel">13         <Button>ok</Button>14         <Button>ok</Button>15         <Button>ok</Button>16    

32、     <Button>ok</Button>17         <Button>ok</Button>18         <Button>ok</Button>19         <Butto

33、n>ok</Button>20         <Button>ok</Button>21         <Button>ok</Button>22         <Button>ok</Button>23  

34、60;      <Button>ok</Button>24         <Button>ok</Button>25         <Button>ok</Button>26         

35、<Button>ok</Button>27     </StackPanel>28         <Button Width="100" Height="80" Margin="10" Click="Button_Click_1">变换方向</Button>29 &#

36、160;   </StackPanel>30 </UserControl>  stackpanel.xaml.cs  1 using System; 2 using System.Collections.Generic; 3 using System.IO; 4 using System.Linq; 5 using Windows.Foundation;

37、 6 using Windows.Foundation.Collections; 7 using Windows.UI.Xaml; 8 using Windows.UI.Xaml.Controls; 9 using Windows.UI.Xaml.Controls.Primitives;10 using Windows.UI.Xaml.Data;11 using Windows.UI.Xaml.Input;12 using Windows.UI.Xaml.Media;13 using Windows.UI.Xaml.Navigation;14 15 16 17 namespace BlankApplication18 19     public sealed partial class StackPanel : UserControl20   &