快速构建Windows 8风格应用17-布局控件

原文:快速构建Windows 8风格应用17-布局控件

本篇博文主要介绍三种常用的布局控件:Canvas、Grid、StackPanel。

Panel类是开发Windows 8 Store应用中一个重要类,它在Windows 8 Store应用布局系统中扮演非常重要角色。

Panel可以承载多个子元素,面板类可以把子元素存放在栈中、或网格里面、或把子元素停靠在其边缘等。

Panel类自身是一个抽象类,下面是Panel类的层次结构:

Windows 8 Store应用中包含的三个标准布局控件:Canvas(通常在常规布局中,尽量不要考虑使用Canvas,不过在某些特殊情况下,使用Canvas还是非常方便的)、Grid(它是大多数常规布局的首选)、StackPanel(可能是最简单的一种面板类型)。

Canvas

要在Canvas中定位元素,需要提供相对于左上角的水平坐标和竖直坐标。

代码实现效果:

其中Left和Top属性表示元素的左上角与Canvas左上角的相对位置。

一般来说Canvas比较适合把元素布局在任何位置上,因此这样更适合于矢量图形编程而不是控件布局编程。

同样我们C#代码中控制控件元素在Canvas中布局。

我们注意到xaml代码中并没有设置button的相对于Canvas的Left和Top属性,这里通过C#代码进行设置。

SetValue方法定义在DependencyObject类里面,LeftProperty和TopProperty是Canvas中DependencyProperty类型的静态字段。

两种布局设置方式最后实现效果是一样。

Canvas还有一个附加属性是ZIndex,我们可以使用ZIndex来更改默认元素的层次。

我们可以在一个或多个字元素中设置Canvas.ZIndex附加属性,可以将这个属性理解为屏幕中想出的Z轴,z值较大的元素会覆盖z值较小的元素。如果两个元素具有相同的Canvas.ZIndex值,那么会根据他们在Children集合中德顺序来分层。

注意:虽然Canvas.ZIndex附加属性定义在Canvas类中,但是它实际上适用于任何类型的面板。另外如果我们自定义一个面板类,其实我们并不需要处理Z值,布局系统会自动处理。

Grid

Grid是我们选择面板类时默认选择,它非常灵活易用。

Grid让我们可以想起HTML中的表格(Table),但两者是有差异的:Grid不像HTML的表格,它并不是做格式化的工作,只用于布局,并且也没有标题或者内置单元格分割线等概念。

Grid具有一定数量的行和列;行的高度可以不一样,列的高度也可以不一样。Grid中的子元素可以占据一个特定的行和列,也可以占据多行和多列。虽然Grid功能非常强大,但也是需要付出代价的,我们在使用Grid的时候需要知道需要多少行和列来容纳所有的子元素。

注意:嵌套Grid是十分常见,但不要滥用,特别是在程序会经常重新生成布局的情况下。过于复杂的嵌套会导致布局非常混乱。

实现效果:

Grid定义了RowDefinitions和ColumnDefinitions两个属性,它们分别是RowDefinition和ColumnDefinition对象的集合。这些对象定义了每行的高度和每列的宽度,我们通常可以有三种选择:

1)  使用单词“Auto”;

2)  固定的像素;

3)  星号,或者数字后加星号;

通过Grid的附加属性Grid.Row和Grid.Column来指明子元素所在的行和列。

StackPanel

StactPanel可以理解成已“栈”的形式将其子元素自顶向下或自左向右排列,并且子元素彼此之间不互相重叠。

默认情况下子元素是自顶向下排列的。

我们也可以设置子元素是自左向右排列。

我们可以通过StackPanel的Orientation属性来改变子元素排列的方向。

当然我们也可以通过C#代码来设置子元素的排列方向。

时间: 2024-08-30 11:21:10

快速构建Windows 8风格应用17-布局控件的相关文章

快速构建Windows 8风格应用18-基础控件I

原文:快速构建Windows 8风格应用18-基础控件I 本篇博文主要介绍Windows 8风格应用开发中常用的几种基础控件. ProgressRing: ProgressRing控件常见的效果图: 如何在XAML代码中声明ProgressRing控件呢?代码如下: ProgressRing控件包含IsActive属性,该属性控制ProgressRing控件是否激活可用.默认情况下IsActive属性值为Ture,我们也可以将其值设置为False. 另外我们也可以在C#代码中声明Progress

快速构建Windows 8风格应用19-基础控件II

原文:快速构建Windows 8风格应用19-基础控件II 本篇博文接着上篇博文<快速构建Windows 8风格应用18-基础控件I>介绍开发Windows 8风格应用中常用控件. Slider: Slider控件常见的效果图: 如何在XAML代码中声明Slider控件呢?代码如下: Value属性值表示Slider控件显示的初始值,应用运行状态下我们也可以拖动改变Slider控件的值. C#代码中声明Slider控件.代码可以如下: 可以通过ValueChanged事件获取Slider控件当

快速构建Windows 8风格应用36-商店应用发布流程

原文:快速构建Windows 8风格应用36-商店应用发布流程 引言 在发布应用之前,我们需要注册开发者账号才能够发布应用.我们可以登录https://appdev.microsoft.com/StorePortals/ 该网址进行注册开发者账号,同时我们也可以点击这里来浏览MSDN给到的开发者账号注册的详细步骤.那么注册完成开发者账号后,如何发布Windows Store 应用程序呢? Windows Store App 发布流程 1,使用Visual Studio 2012打开要上传的应用,

快速构建Windows 8风格应用2-创建调试应用

原文:快速构建Windows 8风格应用2-创建调试应用 本篇博文主要介绍的是创建应用时可以选择哪些模版,生成默认的Windows 8风格应用解决方案中含哪些文件,最后是如何调试Windows 8风格应用. 我们如何使用Visual Studio 2012创建Windows 8风格应用呢?可归结为以下几步: 1.选择我们要使用的开发语言,例如:JavaScript.C++.C#.Visual Basic. 2.选择项目模版,可以选择以下常用的项目模版: 1)拆分应用(Split App)模版 可

快速构建Windows 8风格应用32-构建辅助磁贴

原文:快速构建Windows 8风格应用32-构建辅助磁贴 引言 Windows Phone中,我们开发者可能会开发的一个功能点是将数据列表中某一项"Pin To Start(固定到开始屏幕)",大家都知道这种固定到开始屏幕的磁贴叫做辅助磁贴(也叫二级磁贴),用户可以通过该辅助磁贴启动应用程序并导航到应用程序中某一个页面或某一位置. 其实Windows 8 Store风格应用程序也引入了辅助磁贴的概念,用户在使用Windows 8 Store应用的辅助磁贴和Windows Phone

快速构建Windows 8风格应用9-竖直视图

原文:快速构建Windows 8风格应用9-竖直视图 本篇博文主要介绍竖直视图概览.关于竖直视图设计.如何构建竖直视图 竖直视图概览 Windows 8为了支持旋转的设备提供了竖屏视图,我们开发的应用在竖屏视图中应该能够保持和水平时一样的良好UI,必要的时候应该为应用量身定制相应页面的竖屏视图.同时我们也可以像WindowsPhone那样优先设置应用为横屏视图或竖屏视图. 关于竖直视图设计 为了使应用在竖直视图UI呈现更加优化,可以从以下几个方面去考虑: 1)  减少控件间的边距: 2)  如果

快速构建Windows 8风格应用35-触控输入

原文:快速构建Windows 8风格应用35-触控输入 引用 Windows 8设备通常具有多点触摸屏,用户可以同时使用多个手指来进行不同的输入交互,如点击.拖动或收缩等手势操作.另外Windows 8中将触摸.鼠标和笔/触笔交互是作为指针输入进行接收.处理和管理. 一.手势处理 首先我们来汇总一下Windows 8中常用的手势都有哪些. 1,点击:用一个手指触摸屏幕,然后抬起手指. 2,长按:用一个手指触摸屏幕并保持不动. 3,滑动:用一个或多个手指触摸屏幕并向着同一方向移动. 4,轻扫:用一

快速构建Windows 8风格应用22-MessageDialog

原文:快速构建Windows 8风格应用22-MessageDialog 本篇博文主要介绍MessageDialog概述.MessageDialog常用属性和方法.如何构建MessageDialog   MessageDialog概述 MessageDialog指的就是对话框. 对话框的命令栏中最多包含三个命令.如果我们指定任何命令,将会有一个默认命令添加到对话框中,目的是关闭对话框. 对话框弹出后界面中所有元素将在对话框下面显示,并且将会阻塞任何触摸事件直到用户进行响应对话框. 另外对话框应该

快速构建Windows 8风格应用23-App Bar概述及使用规范

原文:快速构建Windows 8风格应用23-App Bar概述及使用规范 本篇博文主要介绍App Bar概述.App Bar命令组织步骤.App Bar最佳实践.   App Bar概述 Windows 8 Store应用中的App Bar(应用程序工具栏)起到的作用和Windows Phone中AppBar一样.我们可以向用户提供各种操作接口,实现导航或者触发命令等. AppBar一般默认是隐藏的,也可以设置为始终可见.我们可以通过清扫屏幕上边缘或下边缘时显示AppBar,AppBar被点击