重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGrid, VariableSizedWrapGrid

原文:重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGrid, VariableSizedWrapGrid

[源码下载]

重新想象 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
[源码下载]