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

重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGrid, VariableSizedWrapGrid的更多相关文章

重新想象 Windows 8 Store Apps 系列文章索引
[源码下载][重新想象 Windows 8.1 Store Apps 系列文章] 重新想象 Windows 8 Store Apps 系列文章索引作者:webabcd 1.重新想象 Windows ...
重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree
原文:重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree [源码下载] 重新想象 ...
重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState, VisualStateManager
原文:重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState ...
重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试
原文:重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试 [源码下载] 重新想象 Windows 8 Store ...
重新想象 Windows 8 Store Apps (14) - 控件 UI: RenderTransform, Projection, Clip, UseLayoutRounding
原文:重新想象 Windows 8 Store Apps (14) - 控件 UI: RenderTransform, Projection, Clip, UseLayoutRounding [源码下 ...
重新想象 Windows 8 Store Apps (13) - 控件之 SemanticZoom
原文:重新想象 Windows 8 Store Apps (13) - 控件之 SemanticZoom [源码下载] 重新想象 Windows 8 Store Apps (13) - 控件之 Sem ...
重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示
原文:重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示 [源码下载] 重新想象 Windows 8 Store Ap ...
重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView
原文:重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView [源码下载] 重新想象 Windows 8 Store Apps (11) - ...
重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom
原文:重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom [源码下载] ...

随机推荐

单例模式（Singleton）Holder
public class Singleton { /** * 类级的内部类,也就是静态的成员式内部类,该内部类的实例与外部类的实例 * 没有绑定关系,而且只有被调用到才会装载,从而实现了延迟加载 */ ...
学习android内核 -- 内存管理相关
Android内存管理: 1.当应用程序关闭以后,后台对应的进程并没有真正的退出(处于休眠状态,一般不占用系统CPU的资源),这是为了下次再启动的时候能快速启动. 2.当系统内存不够时,AmS会主动根 ...
4.锁--无锁编程以及CAS
无锁编程以及CAS 无锁编程 / lock-free / 非堵塞同步无锁编程,即不使用锁的情况下实现多线程之间的变量同步,也就是在没有线程被堵塞的情况下实现变量的同步,所以也叫非堵塞同步(Non-b ...
关于PHP的内置服务器的使用
今天刚开始正式学习PHP(之前有一点了解),推荐学习的网站是w3school.一开始不知道tomcat服务器不支持PHP脚本,直接把.php文件放到tomcat里面去运行,结果嵌入的php代码段没有什 ...
TStack，TQueue，TObjectList，TObjectStack等等
TStack,TQueue,TObjectList,TObjectStack等等,都在Contnrs.pas单元里,需要手动添加. 不同于TList类,TObjectList对象将销毁任何从列表中删除 ...
latex表格线的颜色设置(边框添加颜色)
添加了如下包:边框颜色要用到booktabs, colortbl, 包,下面代码里有一个自定义的颜色tabcolor \usepackage{ctexcap} \usepackage{graphicx ...
Direct UI
在界面开发中,眼下DirectUI是个热门的技术名称,由于众多的知名公司都是用DirectUI方式作出了非常炫丽的界面.而对于大多数熟悉Win32控件,熟悉MFC开发的开发者来说,我们应该做何选择? ...
跨平台网络通信与server编程框架库（acl库）介绍
一.描写叙述 acl project是一个跨平台(支持LINUX,WIN32,Solaris,MacOS,FreeBSD)的网络通信库及server编程框架,同一时候提供很多其它的有用功能库.通过该库 ...
linux内核笔记-内核同步
linux内核就相当于不断对请求进行响应的服务器,这些请求可能来自CPU,可能来自发出中断的外部设备.我们将内核看作两种请求的侍者. (1)老板提出请求,侍者如果空闲,为老板服务.(系统调用或异常) ...
不可不知的DIP、IoC、DI以及IoC容器
面向对象设计(OOD)有助于我们开发出高性能.易扩展以及易复用的程序.当中.OOD有一个重要的思想那就是依赖倒置原则(DIP),并由此引申出IoC.DI以及Ioc容器等概念. 本文首先用实例阐述四个概 ...

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

重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGrid, VariableSizedWrapGrid的更多相关文章

随机推荐

热门专题