Silverlight

http://kb.cnblogs.com/zt/silverlight/

【第一步】理解布局管理

    先看Silverlight4离线文档中的介绍

【第二步】Canvas面板介绍

    Canvas面板是一种很基础的布局面板，它可以定义一个区域，在该区域中可以使用相对于该区域的坐标显式定位子元素。

    你可以通过一种XAML的特性--“附加属性”来对Canvas中的元素进行定位，Canvas 为启用布局的 Panel 元素之一。每个子对象都呈现在 Canvas 区域中。通过指定 x 和 y 坐标，可以控制对象在 Canvas 中的定位。这些坐标以像素为单位。x 和 y 坐标通常使用 Canvas.Left 和 Canvas.Top 的附加属性来指定。Canvas.Left 指定对象与包含它的 Canvas 的左侧之间的距离（x 坐标）；Canvas.Top 指定对象与包含它的 Canvas 的顶部之间的距离（y 坐标）。

    下面就打开昨天的“StudySilverlight”代码，将<Grid>先注释掉，我们写一个<Canvas>容器，向容器中添加两个按钮，指定其距离Canvas左侧的距离为50像素，距离上边为150像素，代码如下：

<Canvas x:Name="TestCanvas" Background="Silver">
    <Button x:Name="btnTest1" Content="按钮1" Width="100" Height="50" Canvas.Left="50" Canvas.Top="100"></Button>
    <Button x:Name="btnTest2" Content="按钮2" Width="100" Height="50" Canvas.Left="50" Canvas.Top="200"></Button>
</Canvas>

    添加两个按钮，设置在Canvas的布局后，显示结果如下：

    Canvas适用于其中包含的UI元素比较固定的情况，但是你如果想向程序中添加更多的控件，或者UI需要改变大小或能够移动，Canvas显得就不是那么灵活了，那样的话，你不得不忙于手写代码来移动Canvas内的东西，所以，应付这种情况，更好的办法是使用其他带有相关功能的布局方法，接下来介绍下StackPanel。

【第三步】StackPanel面板介绍

    StackPanel是一种简单的布局面板，它支持用行或列的方式来定位其中包含的控件。它常用于安排页面上的一个很小部分的UI，例如，我们可以用下面的方式在页面上垂直排布三个按钮，代码如下：

<StackPanel x:Name="TestStackPanel" Background="Silver">
    <Button x:Name="btnTest1" Content="按钮1" Width="100" Height="50" Margin="10"></Button>
    <Button x:Name="btnTest2" Content="按钮2" Width="100" Height="50" Margin="10"></Button>
    <Button x:Name="btnTest3" Content="按钮3" Width="100" Height="50" Margin="10"></Button>
</StackPanel>

    在运行时，StackPanel会自动的在一个垂直的堆叠（Stack）中排列按钮，显示结果如下：

    如果，我们在<StackPanel>中添加“Orientation="Horizontal"”附加属性的话，显示结果就会变成下图：

【第四步】Grid面板介绍

    为什么把最重要的Grid放到最后呢？哎呀，实在是因为太实用、太重要了嘛，放在最下面当地基，呵呵~

    Grid控件是最灵活的布局面板，它支持多行和多列的方式排布，在概念上，它和HTML中的Table类似，但是不同于Table的是，你不需要把控件内嵌到标记中，而是通过定义<Grid.RowDefinitions>和<Grid.ColumnDefinitions>属性来定义控件所处的Grid的行或列，这两个属性是定义在<Grid>标签内，这样，你就可以在控件的附加属性中指定它属于哪一行哪一列，例如：

<Grid x:Name="TestGrid" ShowGridLines="True" Background="Silver">
        <Grid.RowDefinitions>
            <RowDefinition Height="60"></RowDefinition>
            <RowDefinition Height="60"></RowDefinition>
            <RowDefinition Height="60"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="110"></ColumnDefinition>
            <ColumnDefinition Width="110"></ColumnDefinition>
            <ColumnDefinition Width="110"></ColumnDefinition>
        </Grid.ColumnDefinitions>
</Grid>

    其中“ShowGridLines="True"”是可以显示分割线的，这样便于演示，我们就定义了一个三行三列的类似于表格的Grid，这样还不行，我们往里面添加几个按钮试试。在</Grid.ColumnDefinitions>下面添加按钮，代码如下：

        <Button x:Name="btnTest1" Content="按钮1" Width="100" Height="50" Grid.Row="1" Grid.Column="0"></Button>
        <Button x:Name="btnTest2" Content="按钮2" Width="100" Height="50" Grid.Row="2" Grid.Column="1"></Button>
        <Button x:Name="btnTest3" Content="按钮3" Width="100" Height="50" Grid.Row="0" Grid.Column="1"></Button>
        <Button x:Name="btnTest4" Content="按钮4" Width="100" Height="50" Grid.Row="1" Grid.Column="2"></Button>

    通过Grid.Column和Grid.Row，我们指定按钮的位置在第几行第几列，在Grid中定义多行和多列的时候，还可以预先设置行和列的宽度或高度，灵活性明显要高于上两种方法。显示结果如下：