零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」
原文:零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」
本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里被我称为忠於原味的傻大姊-「Canvas」。
?
?
本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里被我称为忠於原味的傻大姊-「Canvas」。
?
?
?
就是要让不会的新手都看的懂!
?
?
<忠於原味、不动如山>
拥有良好操守的傻大姊-「Canvas」,不论你怎麽设定它就是不动如山,忠於原味。
我们来看看Canvas是怎麽坚守它的岗位:
?
其实开启一个新专案,我们可以看到在Blend 4主要工作区就是以Grid做为预设的容器,但用滑鼠点下左上角的图示Grid is in Gird layout mode,就会变为Grid is in Canvas layout mode。
如下图
?
?
?
我们沿用上一章的范例:
01
把版面切成9等份,分别放入9个Rectangle後,全选它们,一并设定长、宽为Auto,还有边界皆为5。
接着,UserControl的width与heigh也要一并改为Auto,按下F5,看是否Rectangle会跟着视窗放大缩小。
若是所有的Rectangle都会跟着视窗放大缩小,表示Grid与Canvas比较的前置作业已经完成。
?
02
选取最中间的Rectangle并更换颜色为红色後,在最中间的Rectangle上单击滑鼠右键Group Into->Canvas
如下图:
?
完成後,按下F5,请拖动浏览器右下角,使浏览器的视窗变大或缩小。
?
发现了吗?
以Canvas为容器的红色区块稳如泰山的待着,不管浏览器视窗如何变化,依然固定待在原来的位子。
?
03
接着,我们来看看在Layout设定部分,Canvas与别人有甚麽不同。
?
清空主要工作区後,我们放入一个Canvas,并在Canvas里面放入两个Rectangle。
把两个Rectangle着上不同颜色,并且为它们重新命名;范例设为红与蓝,同样的命名为red与blue。
?
?
我们知道,以3D角度来理解,列表排序越後面的图层,亦表示位於图层空间越下方。
由上图可以知道,blue位於red下方,所以蓝色区块的一部分被红色区块盖掉了;
若是我在不移动图层状态下,如何把蓝色区块变为红色区块的上方呢?
?
来看看在Layout设定,Canvas多了Left、Top以及ZIndex,这边我们要使用ZIndex来达到我们要的效果。
?
预设值为0,数字越大表示越上层,因为red目前为预设的0,所以我们把blue的ZIndex改为1就可以看出差异。
?
我们以不拖动图层的限制下,变更了red与blue的空间排序方式。
?
其实很多物件都有ZIndex的功能,只是在这边我刚好使用Canvas来做介绍;
另外,Canvas基本上就不用Margin这项设定去调整边界,而是使用Left跟Top。
原理很简单,Canvas所扮演的角色为画布(纸),若物件画在纸上,而纸变大的话,总不能让物件跟着纸一起跑吧?
所以设定 Top跟left时,你会发现下方的Margin值是不会动的,因为它们是不同的值,不过是做同样的事情。
?
在实务上,我承认的确是Grid比Canvas好用,但Canvas却也是布局容器的重要功臣之一!
Canvas很适合拿来做拖拉或是绘图的容器,因为Canvas记的就是位置和图层。
?
只要把对的容器用在对的地方就能做出预期的效果,相信大家都懂适材适用的道理吧!
?
?
本篇的教学就到此。
?
(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)
?
一步一步迈向HIE之路
喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您
零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」的更多相关文章
- 零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II
原文:零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II 本章将延续上一章的范例,步骤解析. 本章将延续上一章的范例,步骤解析 ...
- 零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」
原文:零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Bl ...
- 零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I
原文:零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局 ...
- 零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」
原文:零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」 将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend ...
- 零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」
原文:零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器 ...
- 零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」
原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的 ...
- 零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II
原文:零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II 延续上一章的CheckBox教学,本章将以实作继续延伸更灵活的运用CheckB ...
- 零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I
原文:零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I 本章将教大家如何运用CheckBox做实作上的变化:教你如何把CheckBox变 ...
- 零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II
原文:零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II 本章将教大家如何制作自己的Button,并以玻璃质感Button为实作案例. ? ...
随机推荐
- Spring MVC--@RequestMapping
2.1 @RequestMapping @RequestMapping是SpringMVC的核心注解,负责访问的url与调用方法之间的映射; @RequestMapping可以放在类和方法上; @Re ...
- Apache DataFu: LinkedIn开源的Pig UDF库
介绍 Apache DataFu分两部分,本文介绍的是其Pig UDF的部分.代码在Github上开源(除了代码外.也有一些slides介绍链接). DataFu里面是一些Pig的UDF.主要包含这些 ...
- Java实现的并发任务处理实例
本文实例讲述了Java实现的并发任务处理方法.分享给大家供大家参考,具体如下: public void init() { super.init(); this.ioThreadPool = new T ...
- [Angular] Using the platform agnostic Renderer & ElementRef
ElementRef: ElementRef is a way to access native html element, notice that it only works for Broswer ...
- Opencv中使用Surf特征实现图像配准及对透视变换矩阵H的平移修正
图像配准需要将一张测试图片按照第二张基准图片的尺寸.角度等形态信息进行透视(仿射)变换匹配,本例通过Surf特征的定位和匹配实现图像配准. 配准流程: 1. 提取两幅图像的Surf特征 2. 对Sur ...
- sparksql parquet 合并元数据
java public class ParquetMergeSchema { private static SparkConf conf = new SparkConf().setAppName(&q ...
- 使用Fiddler对android应用抓包 专题
工作原理 先上个图 此图一目了然,可以看出fiddler在请求中所处的位置,我们就可以确定它能干些什么. WinInet(“Windows Internet”)API帮助程序员使用三个常见的Inter ...
- 读取和修改xml文件
如有一个xml文件DownData.xml,内容如下 <?xml version="1.0" standalone="yes"?> <Root ...
- vue项目 下载表格 java后台返回的是信息流表格如何下载解决乱码
主要是在请求参数后面加上{responseType: 'blob'}或者arrayBuffer this.$http.get(this.api.export, { params: this.info, ...
- react 父组件向子组件传递函数
这段时间一直在使用react,由于这react是单向数据绑定,总感觉有点不适用,毕竟之前一直都在使用angular,但学习还是要继续,做了一个迭代的项目,都差点忘记要总结一下这个react了,现在可以 ...