【細說windows8開發——UI篇】佈局和視圖

本篇的的主要內容

****所有代碼爲完整代碼，不是部分或者添加的代碼，均通過測試。

****歡迎問題反饋和交流  : [email protected]

• 佈局分類

• Auto和*

• Panel

• StackPanel

• Grid

win8的佈局分爲絕對佈局和靜態佈局兩大類。

絕對佈局中提供了Canvas來支持絕對定位（XAML框架），比如   Canvas.Left   和   Canvas.Top

動態佈局則是在不同的電腦分辨率下都能顯示完好的佈局，我們需要定義的就是子元素相對於父元素的位置就可以了

MSDN提供了三個建議，對於動態佈局的使用，大家來看看

1、將 Height 和 Width 設置爲Auto，Auto支持控件和Grid和StackPanel佈局。

2、對於包含文本的控件，移除Height和Width屬性，而是設置MinWidth和MinHeight屬性，這可以防止文本在等比例縮放時變得不可讀。

3、在Grid佈局中設置RowDefinition和ColumnDefinition屬性

Auto 和 *

Auto 自動尺寸可以使空間更好的適應它的內容，即使內容的大小改變。

* 號是根據比重用來分配可用空間的。

比如我們有一個擁有四列的Grid佈局，我們可以這樣設置

Column_1	Auto	這一列的設置可以使它自動適應自己的內容
Column_2	*	當Auto屬性的列自己計算完之後，這一列會佔用剩下的部分，而且是第四列的一半
Column_3	Auto	這一列的設置可以使它自動適應自己的內容
Column_4	2*	當Auto屬性的列自己計算完之後，這一列會佔用剩下的部分，而且是第二列的二倍

Panel

Panel是XAML中的內置面板

我們可以直接繪製出一個長方形

在新建的空白頁中（BlankPage1.xaml）更改爲如下代碼

<Page
    x:Class="App2.BlankPage2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Rectangle Canvas.Left="200" Canvas.Top="100"
    Fill="red" Width="350" Height="350" />
</Page>

效果如圖所示

我的縮放比例是25%。

StackPanel

這個屬性可以讓它的子元素按照一條線排列，當然，可以使垂直也可以使水平。

我們可以通過更改Orientation屬性來設置水平或垂直，默認的是垂直的。也就是Orientation.Vertical。

同樣，來一個完整的例子。

xaml代碼如下（同樣，是完整的代碼，不是部分的代碼）

<Page
    x:Class="App2.BlankPage2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <StackPanel Margin="20">
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10" />
        <Rectangle Fill="Blue" Width="100" Height="100" Margin="10" />
        <Rectangle Fill="Green" Width="100" Height="100" Margin="10" />
        <Rectangle Fill="Purple" Width="100" Height="100" Margin="10" />
    </StackPanel>
</Page>

效果圖:

Grid

最後一個佈局咯。

顧名思義，網格佈局就是允許有很多列和很多行。

我們可以通過RowDefinitions和ColumnDefinitions來聲明有多少列和行，子元素在使用的時候用Grid.Column和Grid.Row就可以了，最好是用Auto和*，因爲相對很多時候總要比絕對的好。

如果一個子元素想要跨很多行或者列，就使用Grid.RowSpan或者Grid.ColumnSpan就可以，同樣，一個完整的例子。

<Page
    x:Class="App2.BlankPage2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Margin="12,0,12,0">

        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TextBox Text="第一行第一列" FontSize="60" Grid.Column="0" Grid.Row="0" />
        <TextBox Text="第三行第一列" FontSize="60" Grid.Column="0" Grid.Row="2" />

        <Button Content="第一行第二列" FontSize="60" Grid.Column="1" Grid.Row="0" />
        <Button Content="第三行第二列" FontSize="60" Grid.Column="1" Grid.Row="2" />

    </Grid>
</Page>

效果圖

特別提醒：第一行其實寫代碼的時候是 0 哦！！列也一樣。