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>
3、StackPanel 的 Demo
StackPanelDemo.xaml
<Page
x:Class="XamlDemo.Controls.Layout.StackPanelDemo"
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">
<StackPanel HorizontalAlignment="Left" Margin="120 0 0 0">
<!--
StackPanel - 流式布局
Orientation - StackPanel 控件內對象的排列方向
Horizontal - 水平排列
Vertical - 垂直排列
-->
<StackPanel Orientation="Horizontal">
<TextBlock Text="a" Margin="5" />
<TextBlock Text="b" Margin="5" />
<TextBlock Text="c" Margin="5" />
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock Text="a" Margin="5" />
<TextBlock Text="b" Margin="5" />
<TextBlock Text="c" Margin="5" />
</StackPanel>
</StackPanel>
</Grid>
</Page>
4、VirtualizingStackPanel 的 Demo
VirtualizingStackPanelDemo.xaml
<Page
x:Class="XamlDemo.Controls.Layout.VirtualizingStackPanelDemo"
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">
<StackPanel Margin="120 0 0 0">
<TextBlock Name="lblMsg" FontSize="14.667">
<Run>僅能用於 ItemsControl</Run>
<LineBreak />
<Run>請參見 Controls/ListBoxDemo.xaml</Run>
</TextBlock>
</StackPanel>
</Grid>
</Page>
5、WrapGrid 的 Demo
WrapGridDemo.xaml
<Page
x:Class="XamlDemo.Controls.Layout.WrapGridDemo"
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">
<StackPanel Margin="120 0 0 0">
<TextBlock Name="lblMsg" FontSize="14.667">
<Run>僅能用於 ItemsControl</Run>
<LineBreak />
<Run>請參見 Controls/GridView/Demo.xaml</Run>
</TextBlock>
</StackPanel>
</Grid>
</Page>
6、VariableSizedWrapGrid 的 Demo
VariableSizedWrapGridDemo.xaml
<Page
x:Class="XamlDemo.Controls.Layout.VariableSizedWrapGridDemo"
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">
<StackPanel Margin="120 0 0 0">
<TextBlock Name="lblMsg" FontSize="14.667">
<Run>另請參見 Controls/GridView/VariableSized.xaml</Run>
</TextBlock>
<!--
VariableSizedWrapGrid
、用於 Wrap 子元素集合
、關於 VariableSized 的功能詳見 Controls/GridView/VariableSized.xaml
-->
<VariableSizedWrapGrid Orientation="Horizontal" HorizontalAlignment="Left"
Background="Green" Width="1000" Margin="0 10 0 0">
<VariableSizedWrapGrid.Children>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
<Image Source="/Assets/Logo.png" Width="100" Height="100" Margin="10"
/>
</VariableSizedWrapGrid.Children>
</VariableSizedWrapGrid>
</StackPanel>
</Grid>
</Page>
OK
[源碼下載]：http://files.cnblogs.com/webabcd/Windows8.rar
