silverlight(三.布局控件)

时间：2010-10-01 来源：Simcoder

1.Grid

Grid 主要是用来定义由列和行组成的可变网格区域。Grid 是用来做布局，不可做数据绑定。如果要使用数据绑定就要用DataGrid。

(使用VS2010视图开发起来比较简单快捷，鼠标右键点击Grid选择网格行或网格列就可以分别添加行和列；其高宽与frame框架设置类似可以使用*代替剩余的布局，也可以将剩余部分按等分，如高 2* 和 * 是分别把余下的高度等分三份然后各取所需)

VerticalAlignment="Center" : 垂直局中

HorizontalAlignment="Center" : 水平居中

Margin="0" ：单元格内居中

Grid代码 <Grid Height="300" Name="grid1" Width="400" Background="AliceBlue" VerticalAlignment="Center" HorizontalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="125" />
            <ColumnDefinition Width="174" />
            <ColumnDefinition Width="101*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="80" />
            <RowDefinition Height="40" />
            <RowDefinition Height="40" />
            <RowDefinition Height="40" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock Grid.Column="1" Height="23" Name="textBlock1" Text="新用户注册"  VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0"  FontSize="16"/>
        <TextBlock Height="23" HorizontalAlignment="Center" Margin="30,8,0,0" Name="textBlock2" Text="用户名：" VerticalAlignment="Top" Grid.Row="1" FontSize="13"/>
        <TextBlock Height="23" HorizontalAlignment="Center" Margin="30,9,0,0" Name="textBlock3" Text="密      码：" VerticalAlignment="Top" Grid.Row="2"  FontSize="13"/>
        <TextBlock Height="23" HorizontalAlignment="Center" Margin="30,9,0,0" Name="textBlock4" Text="重复密码：" VerticalAlignment="Top" Grid.Row="3"  FontSize="13"/>
        <TextBox Grid.Column="1" Grid.Row="1" Height="23" HorizontalAlignment="Center" Margin="5,8,0,0" Name="textBox1" VerticalAlignment="Top" Width="140" />
        <TextBox Height="23" HorizontalAlignment="Center" Margin="5,9,0,0" Name="textBox2" VerticalAlignment="Top" Width="140" Grid.Row="2" Grid.Column="1" />
        <TextBox Height="23" HorizontalAlignment="Center" Margin="5,9,0,0" Name="textBox3" VerticalAlignment="Top" Width="140" Grid.Column="1" Grid.Row="3" />
        <Button Content="确定" Grid.Column="1" Grid.Row="4" Height="23" HorizontalAlignment="Left" Margin="19,22,0,0" Name="button1" VerticalAlignment="Top" Width="63" />
        <Button Content="重置" Grid.Column="1" Grid.Row="4" Height="23" HorizontalAlignment="Left" Margin="98,22,0,0" Name="button2" VerticalAlignment="Top" Width="61" />
    </Grid>

从代码可以看出，Grid编码再也不像table那样直观，Grid先画出格子，然后在直接拖入控件然后标明是显示到哪一个单元格内。如两个按钮分别设置了 Grid.Column="1" Grid.Row="4" 指明在第5行第2个单元格

2.Canvas

Canvas 定义了一个区域，在该区域中可以使用相对于该区域的坐标显式定位子对象。通过指定 x 和 y 坐标，可以控制对象在 Canvas 中的定位。这些坐标以像素为单位。x 和 y 坐标通常使用 Canvas.Left 和 Canvas.Top的附加属性来指定。

隐藏Canvas方法：设置一下任意一个属性即可

Height=0，Width=0，Background=null，Opacity=0，visibility=Visibility.Collapsed,Canvas的上级对象不可见。

(Canvas与Grid均可嵌套)

代码 <Canvas Height="300" Name="canvas1" Width="400" Background="#FFF41313">
        <Canvas Canvas.Left="31" Canvas.Top="27" Height="243" Name="canvas2" Width="323" Background="#FFE7F012">
            <Canvas Canvas.Left="34" Canvas.Top="33" Height="180" Name="canvas3" Width="253" Background="#FF1EDD17" />
        </Canvas>
    </Canvas>

3.StackPanel

StackPanel 将子元素排列成一行（可沿水平或垂直方向）。设置Orientation属性即可，默认是垂直的。

代码

转载请保留此处：小绿虫博客开始学习silverlight,很多东西是看着文档自己摸索的，如果有不正确的地方，请多多指教！

随笔回顾：

silverlight(一.安装和新建项目)

silverlight(二.silverlight项目介绍)