WP7开发第二课：基本布局系统以及基本控件（其一）

上一课主要讲WP7应用的一些基本常识，是作为快速上手使用的，但是这往往是不够的，我们还需要知道更多的细节，那么接下来的几课就比较有针对性的讲一些知识。

当然，我们一般先从控件开始，WP7的控件基本上是来自silverlight控件，当然它也去除了一些不适合WP7的东西。

首先我们来看下布局控件吧。

一：StackPanel 这是一个堆栈面板，其子元素一般是按照横排，或是竖排，放置，默认为竖排。可以设置Orientation属性

调整子元素排布方式。例如：

<StackPanel Orientation="Horizontal">
                <Button Content="按钮"/>
                <Button Content="按钮"/>
                <Button Content="按钮"/>
                <StackPanel>
                    <Button Content="按钮"/>
                    <Button Content="按钮"/>
                    <Button Content="按钮"/>
                </StackPanel>
</StackPanel>

从上面可以知道：容器为：StackPanel,其子组件是横排列，其中一个组件又有子组件，里面内容默认是竖排列，因为StackPanel默认为竖排列方式。

结果如下：

二：Canvas这是一个画布面板（绝对布局），其子元素一般是依据Canvs的属性进行排布，也就是依赖属性，相当于x,y坐标，但是它是Canvas.Top,Canvas.Left表示。例如：

<Canvas>
                <Button Content="按钮" Canvas.Left="0" Canvas.Top="0"/>
                <Button Content="按钮" Canvas.Left="80" Canvas.Top="0"/>
                <Button Content="按钮" Canvas.Left="160" Canvas.Top="0"/>
                <Button Content="按钮" Canvas.Left="80" Canvas.Top="45"/>
</Canvas>

以上我们定义4个按钮，然后设置其Canvas.Top,Canvas.Left 属性，也就是y,x方向坐标，当然默认为0,0，得到如下所示：

三：Grid这是一个表格面板（相当于Table），其子元素一般是依据Grid指定的单元格布局，可以设定子元素为哪行哪列，也可以合并2个单元格，这与普通的Table是一样的。合并单元格的属性主要是： Grid.RowSpan="2" Grid.ColumnSpan="2" 合并2行或者 2列。例如：

<Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                
                <Button Content="按钮"/>
                <Button Content="按钮" Grid.Row="1" Grid.Column="0" Background="Blue"/>
                <Button Content="按钮" Grid.Column="1" Grid.RowSpan="2" Background="Gray"/>
                <Button Content="按钮" Grid.Row="2" Grid.ColumnSpan="2" Background="Red"/>
            </Grid>