零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了零元学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。

接着,UserControlwidthheigh也要一并改为Auto,按下F5,看是否Rectangle会跟着视窗放大缩小。

若是所有的Rectangle都会跟着视窗放大缩小,表示Grid与Canvas比较的前置作业已经完成。

技术分享图片

?

02

选取最中间的Rectangle并更换颜色为红色後,在最中间的Rectangle单击滑鼠Group Into->Canvas

如下图:

技术分享图片

?

完成後,按下F5,请拖动浏览器右下角,使浏览器的视窗变大或缩小。

?

发现了吗?

以Canvas为容器的红色区块稳如泰山的待着,不管浏览器视窗如何变化,依然固定待在原来的位子。

?

03

接着,我们来看看在Layout设定部分,Canvas与别人有甚麽不同。

?

清空主要工作区後,我们放入一个Canvas,并在Canvas里面放入两个Rectangle。

把两个Rectangle着上不同颜色,并且为它们重新命名;范例设为红与蓝,同样的命名为redblue

?

技术分享图片

?

我们知道,以3D角度来理解,列表排序越後面的图层,亦表示位於图层空间越下方。

由上图可以知道,blue位於red下方,所以蓝色区块的一部分被红色区块盖掉了;

若是我在不移动图层状态下,如何把蓝色区块变为红色区块的上方呢?

?

来看看在Layout设定,Canvas多了Left、Top以及ZIndex,这边我们要使用ZIndex来达到我们要的效果。

?

预设值为0,数字越大表示越上层,因为red目前为预设的0,所以我们把blue的ZIndex改为1就可以看出差异。

技术分享图片

?

我们以不拖动图层的限制下,变更了red与blue的空间排序方式。

?

其实很多物件都有ZIndex的功能,只是在这边我刚好使用Canvas来做介绍;

另外,Canvas基本上就不用Margin这项设定去调整边界,而是使用Left跟Top。

原理很简单,Canvas所扮演的角色为画布(纸),若物件画在纸上,而纸变大的话,总不能让物件跟着纸一起跑吧?

所以设定 Topleft时,你会发现下方的Margin值是不会动的,因为它们是不同的值,不过是做同样的事情。

?

在实务上,我承认的确是Grid比Canvas好用,但Canvas却也是布局容器的重要功臣之一!

Canvas很适合拿来做拖拉或是绘图的容器,因为Canvas记的就是位置和图层。

?

只要把对的容器用在对的地方就能做出预期的效果,相信大家都懂适材适用的道理吧!

?

?

本篇的教学就到此。

?

(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)

?

一步一步迈向HIE之路

 

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

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

 

 




以上是关于零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」的主要内容,如果未能解决你的问题,请参考以下文章

零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」

零元学Expression Blend 4 - Chapter 19 如何让做好的Blend专案变Silverlight网页

零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」

零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」

零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」

零元学Expression Blend 4 &ndash; Chapter 21 以实作案例学习MouseDragElementBehavior