零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「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之路

喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您