Windows phone的頁面布局方式一般是依賴布局控件實現的，而布局控件有三種Grid，StackPanel和Canvas

Grid是網格布局方式，相當于一個表格，有行和列，新建一個Windows phone項目，打開MainPage.xaml，頁面呈現內容的核心代碼如下

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

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>
</Grid>

看到代碼中用的了兩種布局方式Grid和StackPanel，這也是windows phone最常用的兩種布局方式，在布局中Canvas不常用，當然這不代表他沒用，在一些xaml繪制logo，那Canvas在核實不過了，Grid和StackPanel無法將之取代。

1、Grid

看下面的代碼

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

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Grid" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="left top"/>
<TextBlock Grid.Column="1" Text="center top"/>
<TextBlock Grid.Column="2" Text="right top"/>
<TextBlock Grid.Row="1" Text="left center"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="center center"/>
<TextBlock Grid.Row="1" Grid.Column="2" Text="right center"/>
<TextBlock Grid.Row="2" Text="left bottom"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="center bottom"/>
<TextBlock Grid.Row="2" Grid.Column="2" Text="right bottom"/>
</Grid>
</Grid>

運行效果如下圖

在name為ContentPanel的Grid中加入三行三列，<Grid.RowDefinitions>也是一個容器，在內部放幾個RowDefinition，就表明Grid有幾行，<Grid.ColumnDefinitions>中放幾個ColumnDefinition就有幾列看
還有就是，RowDefinition只是用來定義列的，列中的內容不是直接放在RowDefinition標簽下，而是放在Grid標簽下，通過Grid.Row和Grid.Column來定義內容屬于哪一行哪一列，默認是第0行，第0列，所以如果是放在0行Grid.Row可以不用寫，如果是放在0列Grid.Column不用寫，就想上面的代碼。

Grid中RowDefinition能夠定義Height屬性，表示高度，不能定義寬度，ColumnDefinition能夠定義Width，表示寬度，不能定義高度，所以最終的寬度和高度是兩者共同決定的

Height和Width屬性是枚舉類型，可以有三個選項，填入具體是，就是固定的高或寬，填入Auto關鍵字，就是根據行和咧中的子空間的高和寬決定，一最大的為準，填入星號*，就是占據剩余部分，比如我第一行，Height填入100，升入兩行詩*，則表明第一行為100，二三行平分Grid剩余的部分，比如Grid的Height是500，那剩余的部分就是400，而三行每行200.

實際中很少出現特別正規的行列分布，往往有的子控件要跨行或跨列，Grid.RowSpan表示跨行，Grid.ColumnSpan表示跨列

看下面的代碼

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.RowSpan="2" VerticalAlignment="Center" Text="left top"/>
<TextBlock Grid.Column="1" Text="center top"/>
<TextBlock Grid.Column="2" Text="right top"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="center center"/>
<TextBlock Grid.Row="1" Grid.Column="2" Text="right center"/>
<TextBlock Grid.Row="2" Text="left bottom"/>
<TextBlock Grid.Row="2" Grid.ColumnSpan="2" HorizontalAlignment="Center" Grid.Column="1" Text="center bottom"/>
</Grid>

運行效果如下圖

2、StackPanel

StackPanel是一個比較簡單的容器，可以將子控件進行橫排或豎排（默認是豎排），不能同時橫排和豎排，如果是想實現橫排和豎排一起出現的效果，就要使用子控件嵌套活著布局控件嵌套

Orientation屬性是一個枚舉類型，Horizontal表示橫排，Vertical表示豎排

看下面的代碼和運行效果

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<TextBlock Text="left" Width="100"/>
<TextBlock Text="center" Width="100"/>
<TextBlock Text="right" Width="100"/>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Row="1">
<TextBlock Text="top" Height="100"/>
<TextBlock Text="center" Height="100"/>
<TextBlock Text="bottom" Height="100"/>
</StackPanel>
</Grid>

3、Canvas

Canvas是畫布布局方式，是一個絕對定位的布局控件，他是以左上角（0,0）為標準，將子控件擺放到其中，用Cancas.eft和Cancas.Right決定距離左上角的偏移量，可以是負值，如果出現控件重疊的狀況可以通過Canvas.Zindex屬性控制，Zindex大的會覆蓋小的

看下面代碼和運行效果

<Canvas>
<TextBlock Canvas.Left="0" Canvas.Top="10" Text="textblock1"/>
<StackPanel Canvas.ZIndex="2" Canvas.Left="0" Canvas.Top="10" Background="Red">
<TextBlock Text="hello"/>
</StackPanel>
<TextBlock Canvas.Left="100" Canvas.Top="100" Text="textblock2"/>
<TextBlock Canvas.Left="300" Canvas.Top="300" Text="textblock3"/>
</Canvas>

另外，每個控件都有布局的屬性，Margin之類的接下來的文章中將介紹不同控件的用法和屬性，會介紹布局屬性，今天的內容中，有關布局屬性，不是很明白的童鞋不用急

?

我的新浪微博昵稱是“@馬蔬菜”，希望大家多關注，謝謝

?

轉載于:https://www.cnblogs.com/xiaogeer/archive/2012/04/03/2430749.html

總結

以上是生活随笔為你收集整理的Windows phone 7之页面布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。