每一个XAML文件都应该有一个布局对象,布局对象相当于一个容器他可以容纳几乎所有的XAML元素,Silverlight为开发者提供了三种布局对象Canvas、StackPanel、Grid。
Canvas:Canvas允许声明一个区域,包含在该区域内的XAML元素可以使用相对Canvas坐标的附加属性来显示和定位元素。
StackPanel:StackPanel允许把若干个元素放在StackPanel中排成一行或者一列。
Grid:允许声明一个若干行若干列组成网格,行和列具备自适应能力。
Canvas 相对定位
Canvas 相对定位是在Canvas目标元素相对于父元素Canvas的位置,Canvas内的任何元素都可以使用附加属性Canvas.Top和Canvas.Left来设置元素的相对位置。
Canvas嵌套
Canvas嵌套,在Canvas中可以进行多个Canvas对象进行嵌套。
使用边框(Border)
Canvas有BackGround属性可以设置背景颜色,但是Canvas没有类似于矩形边框的颜色和宽度,更不能像矩形一样设置圆角边框,但是Silverlight提供了专门的边框元素Border可以实现元素的边框,下面结合Canvas嵌套、Canvas相对定位、Canvas使用边框我们做了一个综合的例子:
运行结果:
Z轴顺序
前面我们讨论了元素二维空间的定位,Silverlight还支持一种Z轴顺序,其元素之间可以相互重叠对,对象之间的位置是根把XAML声明的先后顺序来决定的,后声明的在先声明之上这样就会发生重叠,但是这种重叠并不是一味不变的我们可以根据Silverlight提供的Canvas的ZIndex属性来设置元素显示的先后顺序来确定哪一个在上面哪一个在下面(索引值越小越在下面),例如下面这个例子(左边的是使用默认的排序,右边的是设置了元素的ZIndex属性):
运行结果:
例子很简单,只是为了体验Silverlight的Canvas的布局功能 。
分享到:
相关推荐
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景
APNG经过修改后,在QT,浏览器上可用的apng-canvas.js 参考博客使用:http://blog.csdn.net/ly305750665/article/details/77972415
node-canvas, node Canvas是一个Cairo支持的NodeJS画布实现 节点画布这是版本 2.0.0 -alpha的文档Alpha版本的2.0可以使用 npm install canvas@next 安装。有关从 1.x 升级到 2. x.的指南,请参阅变更日志版本 1.x ...
HTML5+JS游戏开发模块----canvas图片拖放,炮塔攻击范围绘制,炮塔原本位置,炮塔图片的拖放
海报合成 canvas vue组件 二维码合成 页面走命令可以直接运行 合成海报 商城的海报也ok ......
解决了不能识别颜色的问题报错
vue-sign-canvas-master 一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端;
QML--Canvas画布实现矩形圆形等圈定
HTML5+JS游戏开发模块----canvas打字游戏 里面实现多个字母同时出现,每个字体都有自己的随机速度,字母数组的随机生成,canvas 模拟鼠标经过效果,鼠标点击,按键触发,字母换颜色,项目简单,希望能够给初学者一些...
ec-canvas动态加载
前端开源库-map-canvas地图画布,用于
前端项目-javascript-canvas-to-blob,javascript canvas to blob是一个将画布元素转换为blob对象的函数。
canvas-nest.js一个基于html5 canvas绘制的网页背景效果
微信小程序F2自定义图表组件f2-canvas-master.zip
前端项目-stackblur-canvas,Fast and almost Gaussian blur by Mario Klingemann
Html5-canvas之图片添加马赛克 Html5-canvas之图片添加马赛克
wxa-plugin-canvas小程序组件-小程序海报组件概述wxa-plugin-canvas是一个生成二维码海报的组件,通过非常简单的配置就可以生成精美的海报生成效果组件原理说明文章使用之前使用wxa-plugin-canvas前,请确保你已经...
微信小程序中使用echarts,引入ec-canvas文件压缩包
Laravel开发-canvas-importer 命令行工具,将另一个博客的文章导入Laravel画布。