分享程序员开发的那些事...
更新时间：2022-09-29 22:51:56
本系列将教大家以实做案例认识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之路
喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您