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

源地址：http://www.cnblogs.com/zhangdongzi/archive/2011/08/29/2158902.html

上一课主要讲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>

以上定义3行2列的表格，默认的子组件位于一行一列，也就是Grid.Row="0" Grid.Column="0" ,它是以0为索引开始布局的。我们需要注意的是

Grid.RowSpan="2" Grid.ColumnSpan="2"  属性，它表示跨越2行，跨越2列的内容，显示结果为：

看见了吧，Grid是很有用处的。

以上就是主要的布局容器，可以作为顶层容器，也可以作为子容器，一般是不能被其他非容器包含的，但是有个东西除外，那就是Border，这个是边框，可以为容器设定一个边框，例如下面：

 <Border  BorderThickness="10" BorderBrush="Yellow"> 容器</Border>

运行结果如下：

好了，就到这里，比较简单，但是如果能好好的利用这些布局容器以及组件，加上样式Style调优的话，你会布局出非常酷的界面，当然我们要以项目为基础，下面一节就开始我们的普通控件的简要介绍了，由于篇幅有限，我们一般只介绍普通用法，以及常用属性，方法等，需要了解更多更具体内容，可以参考官方资料。