Silverlight 2学习笔记二:三个基本布局控件(Canvas、StackPanel、Grid )
这篇文章主要是翻译了ScottGu博客的文章:Silverlight Tutorial Part 2: Using Layout Management。虽然是翻译,但通过笔记记录,我发现对这三个布局控件有了更深刻的了解。
Silverlight提供了非常灵活的布局管理系统,让程序员和美工可以非常方便的控制控件的位置。布局管理系统提供了两种布局方式:绝对定位和相对定位。这两种定位方式其实和HTML的两种定位方式是一样的。在Silverlight 2 beta1中内置了三种最常用的布局控件:Canvas、StackPanel、Grid。
一、Canvas:相当基础的控件,通过绝对定位来控制字控件的位置。
在Canvas中,我们使用一种叫做“附加属性”的XMAL新特性来控制子控件的位置。附加属性就是指你可以通过设置子控件相对于其父控件的Top、Left、Bottom和Right值来控制子控件的位置。在Canvas中,我们可以使用Canvas.Left、Canvas.Top来控制子控件相对于父控件(Canvas)的位置。如:
以上代码将显示为:
Canvas对于那些子控件不需要移动的布局是非常方便的,但如果子控件数量太多或是子控件位置会发生变化,使用Canvas就不大方便了。这时候可以使用其他的布局控件,如:StackPanel、Grid。
二、StackPanel:该控件用于横向或纵向排列子控件(默认是纵向排列子控件的)。通过子控件的Margin属性(该属性和HTML的Margin属性的效果一样)来控制控件的间距。如:
以上代码将显示为:
三、Grid:Grid是一种相当灵活的布局控件,它通过行列的表格来管理子控件的布局,类似于HTML里的Table控件。
和HTML的Table控件不同的是,你不能直接把子控件嵌套的单元格中。在Grid里,你得先使用<Grid.RowDefinitions>和<Grid.ColumnDefinitions>来定义Grid的行列结构;然后在子控件中使用Grid的附加属性来控制子控件所属的单元格。
下面是一个使用Grid布局的例子,请注意控件所属的单元格:
以上代码将显示为:
对这三个基本布局控件有所了解后,我们就可以很方便的管理页面上控件的布局了。
原文引入:http://www.cnblogs.com/jailu/archive/2008/03/25/1120506.html
Silverlight 2学习笔记二:三个基本布局控件(Canvas、StackPanel、Grid )的更多相关文章
- ios学习笔记第三天之UI控件
- IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
- Android群英传笔记——第三章:Android控件架构与自定义控件讲解
Android群英传笔记--第三章:Android控件架构与自定义控件讲解 真的很久没有更新博客了,三四天了吧,搬家干嘛的,心累,事件又很紧,抽时间把第三章大致的看完了,当然,我还是有一点View的基 ...
- .NET MVC 学习笔记(七)— 控制input控件
.NET MVC 学习笔记(七)— 控制input控件 画面中有时候需要输入数字,这时就需要控制input的输入.以下为保留两位有效数字. /* * 初始化数字输入 */ function initD ...
- Winform控件学习笔记【第二天】——常用控件
背景:期末考试刚过就感冒了,嗓子火辣辣的,好难受.但是一想起要学习总结就打起精神来了,Winform控件网上也没有多少使用教程,大部分都是自己在网上零零散散的学的,大部分用的熟了,不总结会很容易忘得. ...
- Android学习笔记(三) UI布局
每一个布局都有其适合的方式,另外,这几个布局元素可以相互嵌套应用,做出美观的界面. 一.线性布局(LinearLayout) 线性布局,这个东西,从外框上可以理解为一个div,他首先是一个一个从上往下 ...
- Dynamic CRM 2013学习笔记(八)过滤查找控件 (类似省市联动)
我们经常要实现类似省市联动一样的功能,常见的就是二个查找控件,一个选择了省后,另一个市的查找控件就自动过滤了,只显示当前省下的市,而不是所有的市.当然这是最简单的,实际工作中还有更复杂的功能要通过过滤 ...
- tkinter学习系列(三)之Label控件
目录 目录 前言 (一)基本用法和可选属性 ==1.基本用法== ==2.可选属性== (二)属性的具体使用 ==1.常用属性== ==2.边距与文本对齐方式== ==案例一== ==案例一的效果== ...
- 【AngularJS学习笔记】封装一些简单的控件(封装成Html标签)
bootstrap有强大的指令系统,可以自定义一些属性,基本知识请移步:http://angularjs.cn/A00r http://www.cnblogs.com/lvdabao/p/33916 ...
随机推荐
- arx 插入图片
#include <ShLwApi.h> #pragma comment(lib, "ShLwApi.lib") //插入影像图 Acad::ErrorStatus i ...
- RabbitMQ系列(一)--消息中间件MQ如何去选择
MQ在项目中的应用很普遍,本人所在项目组使用的是ActiveMQ,但是后面介绍的RabbitMQ... 一.应用场景 1.异步处理 2.流量削峰.秒杀 3.日志处理,推荐kafka 4.应用解耦 二. ...
- 03JavaScript运算符与表达式
JavaScript运算符与表达式 2.5运算符与表达式 2.5.1赋值运算符 运算符 意义 运算符 意义 = x=5 /= x=x/y += x=x+y %= 求余赋值 -= x=x-y *= x= ...
- oracle 内连接 左外连接 右外连接的用法,(+)符号用法
1. 内连接很简单 select A.*, B.* from A,B where A.id = B.id select A.*, B.* from A inner join B on A.id = B ...
- Configure a proxy for your API calls with Angular CLI
Table of contents Local development setup with Angular Issue: Dev server plus backend API Configurin ...
- HDU - 2041 - 超级楼梯(dp)
题意: 有一楼梯共M级,刚开始时你在第一级,若每次只能跨上一级或二级,要走上第M级,共有多少种走法? 思路: 如何到第n阶台阶,只能从n-1和n-2台阶上去,那么只需要计算到n-1阶台阶和到n-2阶台 ...
- 51nod 1050 循环数组最大子段和【动态规划】
N个整数组成的循环序列a[1],a[2],a[3],-,a[n],求该序列如a[i]+a[i+1]+-+a[j]的连续的子段和的最大值(循环序列是指n个数围成一个圈,因此需要考虑a[n-1],a[n] ...
- 信息的表示和处理 及 CS:APP 15213 datalab
信息的表示和处理 在通用计算机中中,字节作为最为最小 的可寻址的内存单元,而不是访问内存中单独的位. 寻址和字节顺序 big endian (大端法),数据最高字节部分地址在地址处,和人的感觉逻辑相似 ...
- linux-vmstat-显示虚拟内存状态
推荐:更多linux 性能监测与优化 关注:linux命令大全 vmstat命令的含义为显示虚拟内存状态(“Viryual Memor Statics”),但是它可以报告关于进程.内存.I/O等系统整 ...
- buf.readUIntBE()
buf.readUIntBE(offset, byteLength[, noAssert]) buf.readUIntLE(offset, byteLength[, noAssert]) offset ...