重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGrid, VariableSizedWrapGrid
作者:webabcd
介绍
重新想象 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.ZIndex - 用于设置任意控件的 z-index 值 注: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 的可用值如下: 1、Auto - 自动设置为一个合适的值。默认值 2、Pixel - 像素值 3、* - 比例值。如 * 就是全部,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 值 说明: 1、Grid 的 HorizontalAlignment 属性和 VerticalAlignment 属性的默认值均是 Stretch 2、在 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 1、用于 Wrap 子元素集合 2、关于 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
[源码下载]
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。