今天要介绍一个Silverlight Toolkit内好用且在图片展示操作上很常见的元件-「Cover Flow」
今天要介绍一个Codeplex内好用且在图片展示操作上很常见的元件-「Cover Flow」
?
请点击後方图片做切换
?
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之路
喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您
