Windows 8 Store Apps學習(7) 布局控制項

Canvas, Grid, StackPanel, VirtualizingS

介紹

重新想象 Windows 8 Store Apps 之布局控制項

Canvas - 絕對位置式布局

Grid - 網格式布局

StackPanel - 流式布局

VirtualizingStackPanel - 僅能用於 ItemsControl

WrapGrid - 僅能用於 ItemsControl

VariableSizedWrapGrid - 用於 Wrap 子項目集合

樣本

1、Canvas 的 Demo

CanvasDemo.xaml

<Page    x:Class="XamlDemo.Controls.Layout.CanvasDemo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:XamlDemo.Controls.Layout"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">              <Grid Background="Transparent">           <!--               Canvas - 絕對位置式布局                   Canvas.Left - 與上一層 Canvas 的 Y軸 間的距離，左上方為原點                   Canvas.Top - 與上一層 Canvas 的 X軸 間的距離，左上方為原點                              註：Canvas 基於座標定位，其不會因為自身的大小而限制子項目的大小           -->        <Canvas HorizontalAlignment="Left" VerticalAlignment="Top" Background="Red" Width="100" Height="100" Margin="120 0 0 0">                      <Canvas Background="Green" Width="200" Height="200" Canvas.Left="120" Canvas.Top="120" >                   <TextBlock Text="TextBlock" Canvas.Top="20" />               </Canvas>                  </Canvas>       </Grid>   </Page>

2、Grid 的 Demo

GridDemo.xaml

<Page    x:Class="XamlDemo.Controls.Layout.GridDemo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:XamlDemo.Controls.Layout"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">              <Grid Background="Transparent">           <!--               Grid - 網格式布局                   Grid.RowDefinitions - 用於定義 Grid 中的行                   Grid.ColumnDefinitions - 用於定義 Grid 中的列                   Width - 寬度                   MinWidth - 最小寬度                   MaxWidth - 最大寬度                   Height - 高度                   MinHeight - 最小高度                   MaxHeight - 最大高度                   Grid.Row - 控制項所在的 Grid 的行的索引                   Grid.Column - 控制項所在的 Grid 的列的索引                   Grid.RowSpan - 合并行。 控制項所在行，以及控制項所在行之後的需要連續合并的行的總行數                   Grid.ColumnSpan - 合并列。 控制項所在列，以及控制項所在列之後的需要連續合并的列的總列數                   Canvas.ZIndex - 用於設定任意控制項的 z-index 值                                              Width 和 Height 的可用值如下：   、Auto - 自動化佈建為一個合適的值。預設值   、Pixel - 像素值   、* - 比例值。如 * 就是全部，2* 和 8* 就是分別占 20% 和 80%           -->        <Grid Background="Blue" Width="300" Height="300" Canvas.ZIndex="100">               <Grid.RowDefinitions>                   <RowDefinition Height="50" />                   <RowDefinition Height="3*" />                   <RowDefinition Height="7*" />                   <RowDefinition Height="*" MinHeight="50" MaxHeight="100" />                   <RowDefinition Height="Auto" />               </Grid.RowDefinitions>               <Grid.ColumnDefinitions>                   <ColumnDefinition />                   <ColumnDefinition />                   <ColumnDefinition />               </Grid.ColumnDefinitions>                      <TextBox Grid.Row="0" Grid.Column="0" Background="red" Text="webabcd" />               <TextBox Grid.Row="0" Grid.Column="1" Background="red" Text="webabcd" Grid.ColumnSpan="2" HorizontalAlignment="Center" />               <TextBox Grid.Row="1" Grid.Column="0" Background="red" Text="webabcd" />               <TextBox Grid.Row="1" Grid.Column="1" Background="red" Text="webabcd" Grid.ColumnSpan="2" HorizontalAlignment="Center" />               <TextBox Grid.Row="2" Grid.Column="0" Background="red" Text="webabcd" />               <TextBox Grid.Row="2" Grid.Column="1" Background="red" Text="webabcd" Grid.RowSpan="2" VerticalAlignment="Bottom" />               <TextBox Grid.Row="2" Grid.Column="2" Background="red" Text="webabcd" />               <TextBox Grid.Row="3" Grid.Column="2" Background="red" Text="webabcd" />               <TextBox Grid.Row="4" Grid.Column="2" Background="red" Text="webabcd" />           </Grid>                                 <!--                   Canvas.ZIndex - 用於設定任意控制項的 z-index 值                              說明：   、Grid 的 HorizontalAlignment 屬性和 VerticalAlignment 屬性的預設值均是 Stretch   、在 Grid 內的所有子項目均需要通過 Margin 屬性進行相對定位           -->        <Rectangle Margin="10 50 100 150" Fill="Green" Canvas.ZIndex="10" />                      </Grid>   </Page>