原文:零元学Expression Blend 4 - Chapter 24 以实作了解Cover Flow功能
今天要介绍一个Silverlight Toolkit内好用且在图片展示操作上很常见的元件-「Cover Flow」
今天要介绍一个??Codeplex??内好用且在图片展示操作上很常见的元件-「Cover Flow」
?
请点击後方图片做切换
很抱歉,阁下使用的浏览器并不支援 IFrame,不能正常浏览我的网页
?
01
首先,需要先到Codeplex? 下载Cover Flow
点击Other Available Downloads下的Coverflow.zip进行下载
?
02
下载完成後将Cover Flow载入至Blend专案内
Projects->References->Add Reference
?
找到刚刚下载的ControlLibrary.dll->点选开启旧档
?
完成後,可以从Projects->References检查刚刚的ControlLibrary.dll是否已经被载入成功
?
03
开始使用Cover Flow来制作超炫效果的图片展示
Asset->找到CoverFlowControl,并拖拉放入主要工作区
?
先不用去管CoverFlowControl的大小跟摆放的位置
?
04
接着,需要放入资料,才能看到效果
Blend里面内建了Sample Data可以使用
Data->New Sample Data
?
建立完成後,应该会如下图
?
05
在Collection下,我们需要调整想要使用的资料以及资料类型
把Property1重新命名为SImage,并在Property2上单击右建删除它
?
(若是想新增资料请点选Collection後的"+‘‘号即可)
接着点选已经重新命名为SImage後方的倒三角形
?
可以看到,资料类型有String、Number、Boolean以及Image四种
这里我们把资料类型改为Image
完成後,点选Collection後方的Edit Sample values
?
会出现下图的设定视窗:
?
里面的图片是Blend内建的,是让你可以快速建立假资料的,当在做Sample时非常好用
你可以设定Number of records来调整图片的张数,完成後按下OK
?
06
直接拖拉Collection并放入CoverFlowControl内,刚刚所设定好的资料就会出现了
?
07
觉得图片太小或是位置不好吗?
在CoverflowControl->Edit Additional Templates->Edit Generated Items(ItemTemplate)->Edit Current内来编辑
?
你会看到在Objects and Timeline下,有Image,这就表示我们可以在Properties->Layout中去编辑它
?
调整好Image的大小跟位置後,我们离开Template编辑模式
?
08
在选取CoverflowControl状态下->Properties->Miscellaneous可以调整Coverflow图片间的间距、大小、角度或是切换图片的换场动画
?
本章就仅对比较常用到的部份做介绍:
SpaceBetweenItem、SpaceBetweenSelectItem、SelectedIndex、RotationAngle、Scale、EasingFunction
?
09
(1)SpaceBetweenSelectItem
??? 调整这个数值,可以变动後方图片与现在画面最中间主图片的距离
??? 预设值为140,范例调整为52,数字越大间隔越大
?
(2)SpaceBetweenItem
?? 调整这个数值,可以变动後方图片间的距离
?? 预设值为60,范例调整为24,数字越小间隔越小
?
(3)SelectedIndex
??? 调整这个数值,可以使选定的图片成为开始就位於最中间
??? 预设是0,下图范例调整为2
?
(4)RotationAngle
??? 调整这个数值,可以变动後方的图片角度
?? 预设为45,下图范例调整为-69
?
(5)Scale
?? 调整这个数值,可以变动後方图片的大小
?? 预设为0.7,下方图片范例为0.4
?? 对於Scale,在先前的章节已经有详细介绍过了。
?
(6)EasingFunction
?? 调整EasingFunction可以改变切换图片时的换场动画
?? 对於EasingFunction,在先前的章节已经有详细介绍过了。
?
都调整到你满意的样子後,请按下F5,看看的成果
?
?
?
?
------------------小提醒-----------------
为了避免CoverFlowControl原件没被包进专案资料夹里,造成搬移档案後专案出错
请到专案资料夹的Bin/Debug下,检查看看是否有ControlLibrary.dll
如果没有,请把ControlLibrary.dll放进专案的Bin/Debug下,重新开启专案就OK了!
?
?
很简单吧!
?
要记得举一反三喔~
?
?
本篇的教学就到此。
?
?
?
若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢! :)
?
?
一步一步迈向HIE之路
喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您