Windows Phone開發(5):室內裝修

來源:互聯網
上載者:User

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

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

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

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

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

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

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

 

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

    <Grid x:Name="Root">        <Grid.ColumnDefinitions>            <ColumnDefinition Width="*"/>            <ColumnDefinition Width="*"/>        </Grid.ColumnDefinitions>        <Grid.RowDefinitions>            <RowDefinition Height="*"/>            <RowDefinition Height="*"/>        </Grid.RowDefinitions>    </Grid>

 

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

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

    <Grid x:Name="Root" ShowGridLines="True">        <Grid.RowDefinitions>            <RowDefinition Height="2*"/>            <RowDefinition Height="*"/>            <RowDefinition Height="3*"/>        </Grid.RowDefinitions>    </Grid>

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

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

    <Grid x:Name="Root" ShowGridLines="True">        <Grid.RowDefinitions>            <RowDefinition Height="3*"/>            <RowDefinition Height="7*"/>        </Grid.RowDefinitions>    </Grid>

這時候,我們再看看設計檢視有啥變化?

 

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

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

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

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

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

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

    <Grid x:Name="Root" ShowGridLines="True">        <Grid.RowDefinitions>            <RowDefinition Height="*"/>            <RowDefinition Height="*"/>        </Grid.RowDefinitions>        <Grid.ColumnDefinitions>            <ColumnDefinition Width="*"/>            <ColumnDefinition Width="*"/>        </Grid.ColumnDefinitions>        <!-- 內容 -->        <TextBlock Grid.Column="0" Grid.Row="0" Text="第1行第1列" FontSize="35"/>        <Rectangle Fill="Yellow" Grid.Column="1" Grid.Row="0" Margin="68"/>        <Button Grid.Column="0" Grid.Row="1" Content="第2行第1列" FontSize="32"/>        <Ellipse Fill="Blue" Height="95" Width="180" Grid.Column="1" Grid.Row="1"/>    </Grid>

運行效果如下:

 

 

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

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

效果如下:

 

例二:垂直布局。

    <StackPanel Orientation="Vertical" Width="300">        <TextBlock Text="文本一" FontSize="80"/>        <TextBlock Text="文本二" FontSize="80"/>        <TextBlock Text="文本三" FontSize="80"/>    </StackPanel>

運行效果如下:
(圖6)運行效果如下:

 

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

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

 

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

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

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.