WindowsPhone中Grid StackPanel Canvas控件入门

最近在公司学习WindowsPhone8的开发，因为以前对Silverlight没有太多了解，所以有些东西真的是第一次接触。由于上次使用ListPicker的时候因为父控件的原因弄得很纠结，所以又一次对这几个控件做了一些了解。

 

1）Grid

所谓Grid，中文释义就是栅栏，网格。大家想一下围棋的棋盘就知道了。而在Grid中的每个格子可以调整长宽，并且设定每一个格子的样式等等。

在新建一个WindowsPhone8的项目之后，大家可以在自动生成的Grid边框上点击左键就可以将Grid分成不同的格子。

我把Grid分成了4行3列，所以xaml代码变成了这样：

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="124*"/>
                <ColumnDefinition Width="209*"/>
                <ColumnDefinition Width="123*"/>
            Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="91*"/>
                <RowDefinition Height="145*"/>
                <RowDefinition Height="165*"/>
                <RowDefinition Height="206*"/>
            Grid.RowDefinitions>
        Grid>

大家可能疑惑这个*是什么意思，在ColumnDefinitions里可以看到各个列是124* 209* 123*，它的意思是将屏幕的宽度按照124：209：123的比例分配给三列。行亦如是。而关于行列的长宽还有一点要说的，就是另外两个Auto和*，这两个大家可以在xaml文件最外部的Grid定义中看到：

    
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        Grid.RowDefinitions>

这里的Height一个是Auto，一个是*， Auto表示这个格子的高会根据格子里的内容的高变化而变化，就像气球里的气多了它就变大，气少了就收缩一样；而直接一个*的意思是，这个格子将占有剩下的所有高度。假如高度为800，如果第一行占100，那我占700，第一行700，我只有100，属于一个给多少要多少的老好人。

再多说一个tip，每个格子放控件大家应该都会。但是如果要一个空间跨越两格甚至更多呢？如果有网页基础的朋友应该知道table里的span, 而在Grid的定义里也有columnspan和rowspan，只要在控件里定义一下：

<Button Content="Button"Grid.ColumnSpan="2"/>

 

页面的Button就会占有两格

好了，Grid就入门一下，其他的功能大家可以自己再研究一下！

2）StackPanel

顾名思义，Stack，栈，一个特点就是像叠罗汉似的一个压着一个。大家先看一个截图：

而它对应的xaml代码仅仅是：

<StackPanel>
                <Button Content="Button"/>
                <Button Content="Button"/>
                <Button Content="Button"/>
                <Button Content="Button"/>
            StackPanel>

 

没有做任何设置，Button和它的小伙伴们就已经一个压着一个了。而在代码中，大家也可以对StackPanel的Children进行一些操作，我就不再细说。

 

3）Canvas

这个其实在一般的Wp开发中是不怎么用到的，但是既然也是一种容器类控件，就学了学顺便说一下，自己也印象深刻一点。

我刚刚定义了一个Canvas，然后在里面加上了两格图形：

XAML代码如下：

<Canvas>
                <Ellipse Name="MyEllip" Width="100" Height="200" Fill="Aqua" Canvas.Left="67" Canvas.Top="87">Ellipse>
                <Rectangle Name="MyRect" Width="200" Height="200" Fill="AntiqueWhite" Canvas.Left="199" Canvas.Top="234">Rectangle>
            Canvas>

 

大家可以看到它的位置是由Canvas.Left和Canvas.Top决定的，分别表示控件距离父Canvas控件边框的像素。好的，如果现在我想在代码中移动Ellipse怎么办呢？

答案不是MyEllip.blabla 而是得通过Canvas的静态方法来实现。我拖了一个Button上去，然后在click函数里写了这两行代码。

            Canvas.SetLeft(MyEllip, Canvas.GetLeft(MyRect));
            Canvas.SetTop(MyEllip, Canvas.GetTop(MyRect));

运行，点击button，如果大家上面做的和我一样的话，会发现，Ellipse木有了！我伙呆！

其实事实是Ellipse被Rectangle挡住了，因为在xaml中，rectangle是写在Ellipse下面的，所以他会在Z轴上高于Ellipse。怎么解决呢？你可以把Ellipse放到Rectangle下面，也可以在代码中直接写：

Canvas.SetLeft(MyEllip, Canvas.GetLeft(MyRect));
            Canvas.SetTop(MyEllip, Canvas.GetTop(MyRect));
            Canvas.SetZIndex(MyEllip, 1);

 

也就是加上了最后一样，然后再点一下button试试。

 

Ok，就讲到这里吧。我也一直在学习，谢谢大家！