Windows Phone開發（5）：室內裝修

標籤：例子   瞭解   定位   range   panel   stack   按鈕   直線   --   

為什麼叫室內裝修呢？呵呵，其實說的是布局，具體些嘛，就是在一個頁面中，你如何去擺放你的控制項，如何管理它們，你說，像不像我們剛搬進新住所，要“裝修”一番？買一套什麼樣的茶几和杯具（我說的“杯具”指的是原意，不要理解錯了），或者沙發什麼的，該怎麼放，擺在哪裡好看，其實，我們做介面設計也是差不多這個道理。

相信我們下過象棋就知道，棋盤上有橫向的，縱向的很多網格線，而棋子就是參照這些網格線來放置的，對，在WP頁面配置中我們把這樣的布局稱為網格布局，對應的控制項為Grid。

千萬別小看這個Grid控制項，它可是非常好用的，而且也比較靈活，對的，當我們建立一個新頁面時，VS為我們生生的XAML中，正是使用了Grid控制項進行布局的。

既然是網格了，肯定會有行和列的，而我們的控制項就是按需要放到由這些行和列共同產生的儲存格中，就是我們在做網頁排版時用到的table標籤，應該說是非常類似的。

下面我們一起動手做個小練習，通過這個練習，我們可以從一種更直觀的角度去瞭解Grid控制項的用法。

1、啟動VS，建立一個WP應用程式，不用我多說了，都會了。

2、刪除頁面中的根Grid，整個刪除。如所示。

 

3、然後，替換為以下XAML代碼。

1. <Grid x:Name="Root">  
2.     <Grid.ColumnDefinitions>  
3.         <ColumnDefinition Width="*"/>  
4.         <ColumnDefinition Width="*"/>  
5.     </Grid.ColumnDefinitions>  
6.     <Grid.RowDefinitions>  
7.         <RowDefinition Height="*"/>  
8.         <RowDefinition Height="*"/>  
9.     </Grid.RowDefinitions>  
10. </Grid>  

 

這樣我們就定義了一個兩行兩列的網格布局，也就是整個頁面被劃分為4個方塊。
先簡單說一下行的高，列的寬的表示方法，如果你用過WPF，你應該很清楚了。
（1）可以用數值，double類型，如120.667，這個數字與螢幕解析度無關，運行運行庫會自行調整；

（2）*：這個星號是什麼意思呢？就像上面的例子，我都用了*，這麼說是說不清楚的，我舉個例子吧。
比如，我把一個網格分為3行，而每一行的高度都是*，則表示三個行的高度是平均分配的，都占整個網格高度的1/3.
如果我第一行的高為2*，第二行的高為*，第三行的高為3*，那麼又該如何分配呢？
先別急，把上面的代碼改一下，我們就可以直觀地看到效果了。為了方便觀察，我把ShowGridLines的值改為True，這樣網格線就會顯示。

1. <Grid x:Name="Root" ShowGridLines="True">  
2.     <Grid.RowDefinitions>  
3.         <RowDefinition Height="2*"/>  
4.         <RowDefinition Height="*"/>  
5.         <RowDefinition Height="3*"/>  
6.     </Grid.RowDefinitions>  
7. </Grid>  

好，現在我們看看設計檢視上面顯示的結果。

其實上面三行的高分別為2*，1*和3*，1可以省略，它的意思就是把整個網格的高度平均分成2 + 1 + 3 = 6份，而2*就占其中2份，1*就占其中1份，3*就占其中3份，也就是說，它們分別佔總高度的2/6，1/6，3/6.
怎麼樣，找到規律了嗎？
再來一例。

1. <Grid x:Name="Root" ShowGridLines="True">  
2.     <Grid.RowDefinitions>  
3.         <RowDefinition Height="3*"/>  
4.         <RowDefinition Height="7*"/>  
5.     </Grid.RowDefinitions>  
6. </Grid>  

這時候，我們再看看設計檢視有啥變化？

 

上面的樣本是把整個容器的高度平均分為 3 + 7 = 10 份，而第一行的高度佔總高度的3/10，第二行的高度佔總高度的7/10.
現在明白了一些了沒？
再看看下面的例子：

1. <Grid x:Name="Root" ShowGridLines="True">  
2.     <Grid.RowDefinitions>  
3.         <RowDefinition Height="86"/>  
4.         <RowDefinition Height="5*"/>  
5.         <RowDefinition Height="3*"/>  
6.     </Grid.RowDefinitions>  
7. </Grid>  

同理，第一行固定86，這是一個絕對的值，然後呢，把剩下的高度，就是除了86之外的，平均分為 5 + 3 = 8 份，第二行佔了剩下的高度的5/8，第三行佔了剩下的高度的3/8.

（3）Auto，不用多解釋，從單詞的含義就知道了，就是根內容自動調整。

列的定義與行是相類似的，只不過列定義寬度，行定義高度而已。
如果以上三種值同時出現呢？原理是一樣的，自己思考一下吧，不懂的就多寫代碼觀察。

那麼，我們如何把內容放到對應的儲存格內呢？Grid的行序號和列序號是從0開始的，如第一列就是0，第二行就是1等，具體怎麼操作呢？
在聲明其內容時，通過附加屬性來確定內容應放在哪個儲存格，如下面例子。

1. <Grid x:Name="Root" ShowGridLines="True">  
2.     <Grid.RowDefinitions>  
3.         <RowDefinition Height="*"/>  
4.         <RowDefinition Height="*"/>  
5.     </Grid.RowDefinitions>  
6.     <Grid.ColumnDefinitions>  
7.         <ColumnDefinition Width="*"/>  
8.         <ColumnDefinition Width="*"/>  
9.     </Grid.ColumnDefinitions>  
10.     <!-- 內容 -->  
11.     <TextBlock Grid.Column="0" Grid.Row="0" Text="第1行第1列" FontSize="35"/>  
12.     <Rectangle Fill="Yellow" Grid.Column="1" Grid.Row="0" Margin="68"/>  
13.     <Button Grid.Column="0" Grid.Row="1" Content="第2行第1列" FontSize="32"/>  
14.     <Ellipse Fill="Blue" Height="95" Width="180" Grid.Column="1" Grid.Row="1"/>  
15. </Grid>  

運行效果如下：

 

 

好了，網格布局就吹到這裡，下面接著看另一個較簡單的布局——StackPanel，嗯，它是一個面板，它的子內容的布局非常簡單，就兩種方式：橫向和縱向，它是沿直線分布的，要麼水平，要麼垂直，反正是線性分布，就類似於我們說的資料結構中的棧隊列，先進後出。
例一，水平布局。

1. <StackPanel Orientation="Horizontal" Height="100">  
2.     <Button Content="按鈕1"/>  
3.     <Button Content="按鈕2"/>  
4.     <Button Content="按鈕3"/>  
5. </StackPanel>  

效果如下：

 

例二：垂直布局。

1. <StackPanel Orientation="Vertical" Width="300">  
2.     <TextBlock Text="文本一" FontSize="80"/>  
3.     <TextBlock Text="文本二" FontSize="80"/>  
4.     <TextBlock Text="文本三" FontSize="80"/>  
5. </StackPanel>  

運行效果如下：
（圖6）運行效果如下：

 

最後，我們來看看還有一種通過絕對位置的布局控制項——Canvas。
它就像我們的二維座標系，但與我們在平面幾何中不同的是，Canvas的原點在左上方，相信寫過可視化程式的朋友都知道了。
要注意的是，Canvas不知道具體要為哪些子內容設定座標，所以，它的Top和Left值視具體情況而定，因此這兩個屬性都是附加屬性，也就是它附加在放置在Canvas中的子項目要設定的具本位置而使用，所以每個子項目的定位都通過附加的Canvas.Top和Canvas.Left來設定。

1. <Canvas>  
2.     <Rectangle Fill="Orange" Canvas.Left="37" Canvas.Top="116" Height="165" Width="220" />  
3.     <Path Data="M0,0 L0,8 L12,8 Z" Fill="Silver"  
4.           Canvas.Left="127"  
5.           Canvas.Top="204"  
6.           Width="260"  
7.           Height="235" Stretch="Fill"/>  
8. </Canvas>  

 

還有的是，ZIndex是用於設定子項目的順序，從0開始，預設為0，值越大，它越在頂層，比如上面的例子，我們發現，後面添加的三角形把前一個矩形擋住了，那如何讓矩形在其它圖形之上呢？對，把ZIndex設定一個較大的值就行了，如：

1. <Canvas>  
2.     <Rectangle Fill="Orange" Canvas.Left="37" Canvas.Top="116"  
3.                Height="165" Width="220"  
4.                Canvas.ZIndex="1"/>  
5.     <Path Data="M0,0 L0,8 L12,8 Z" Fill="Silver"  
6.           Canvas.Left="127"  
7.           Canvas.Top="204"  
8.           Width="260"  
9.           Height="235" Stretch="Fill"/>  
10. </Canvas>  

  

Windows Phone開發（5）：室內裝修