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定義中看到：

    <!--LayoutRoot 是包含所有頁面內容的根網格-->
    <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，就講到這裏吧。我也一直在學習，謝謝大家！