sliverlight3 学习 2， 布局

silverlight三种布局方式
1,Canvas 定义一个区域，在此区域内，您可以使用相对于 Canvas 区域的坐标显式定位子元素。也就是我们常说的绝对定位。在窗口大小发生变化时，位于Canvas内的子元素坐标不会发生变化。
在子元素中可以通过设置Canvas.Left 和 Canvas.Top 进行绝对定位。值得注意的是，在一个Canvas中可以嵌套一个新的Canvas。
示例：

MainPage.xaml
<Canvas Width="640" Height="480" >
      <input:AutoCompleteBox x:Name="MyACbox"  Canvas.Left="100"  Canvas.Top="100"  IsTextCompletionEnabled="False" Width="200" Height="25" HorizontalAlignment="Left"></input:AutoCompleteBox>
</Canvas>
MainPage.xaml.cs
MyACbox.ItemsSource = new string[]
            {
               "中华人民共和国",
               "香港特别行政区",
               "中国北京"
            };

 

2,Grid 定义由行和列组成的灵活网格区域。
可以通过使用 Grid.Column 和 Grid.Row 附加属性，在 Grid 的特定单元格中定位子元素。
Grid在默认情况下包含一行和一列。可以使用 ColumnDefinitions 和 RowDefinitions 为Grid添加行或列。
示例：

 

<Grid x:Name="MyGrid" ShowGridLines="True"  Background ="AliceBlue">
        <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
         <ColumnDefinition  Width="120" ></ColumnDefinition>
          <ColumnDefinition  Width="*" ></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock Text="TestU" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
        <input:AutoCompleteBox x:Name="MyACbox"   Margin="5" Grid.Row="0"  Grid.Column="1"  IsTextCompletionEnabled="False" Width="200" Height="25" HorizontalAlignment="Left"></input:AutoCompleteBox>
  </Grid>

3,StackPanel 将子元素排列成一行或一列

 

 

<StackPanel x:Name="MyGrid"  Background ="AliceBlue" Orientation="Horizontal">
        <Button Content="Button1" Width="150" Height="120" Margin="10" BorderBrush="Black"></Button>
        <Button Content="Button2" Width="150" Height="120" Margin="10" BorderBrush="Black"></Button>
        <Button Content="Button3" Width="150" Height="120" Margin="10" BorderBrush="Black"></Button>
    </StackPanel>

 

 

<StackPanel x:Name="MyGrid"  Background ="AliceBlue" >
        <Button Content="Button1" Width="150" Height="120" Margin="10" BorderBrush="Black"></Button>
        <Button Content="Button2" Width="150" Height="120" Margin="10" BorderBrush="Black"></Button>
        <Button Content="Button3" Width="150" Height="120" Margin="10" BorderBrush="Black"></Button>
    </StackPanel>

下一章节，将从silverlight绘制功能开始学习。期间可能会简单介绍silverlight控件。