一天一天学 windows phone 页面布局 之 StackPanel+Canvas（十）

当我放入如下实例代码：

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid Grid.Row="0">
                <StackPanel>
                    <RadioButton Content="1" />
                    <RadioButton Content="2" />
                    <RadioButton Content="3" />
                    <CheckBox Content="4" />
                    <CheckBox Content="5" />
                </StackPanel>
            </Grid>
            <Grid Grid.Row="1">
                <StackPanel Orientation="Horizontal">
                    <Rectangle Width="80" Fill="AliceBlue" />
                    <Rectangle Width="80" Fill="Azure" />
                    <Rectangle Width="80" Fill="AntiqueWhite" />
                    <Rectangle Width="80" Fill="Aqua" />
                    <Rectangle Width="80" Fill="Beige" />
                </StackPanel>
            </Grid>

看到效果如图：

OK 非常简单 

我们继续，Canvas 容器可以用坐标来准确定位。

StackPanel 是线性布局 ，可以是 横向和纵向两个方向 用属性Orientation="Horizontal" 来表示 默认是横向。内容的顺序采用先进先出的原则。举个例子：

             <Canvas>
                <Ellipse Canvas.Left="5"
                         Canvas.Top="5"
                         Width="90"
                         Height="90"
                         Fill="BlanchedAlmond" />
                <Ellipse Canvas.Left="155"
                         Canvas.Top="155"
                         Width="190"
                         Height="130"
                         Fill="CadetBlue" />
                <Ellipse Canvas.Left="325"
                         Canvas.Top="335"
                         Width="90"
                         Height="200"
                         Fill="DeepPink" />
            </Canvas>

显然效果如图：

我们可以用 Canvas.ZIndex属性来实现多层的效果这个和css 中z-index一样。就不多说了。大家自己试试就OK 了

(写的不好 请见谅，有不对请留言告知我，免得误人子弟。）