零元学Expression Blend 4 - Chapter 24 以实作了解Cover Flow功能

原文:零元学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之路

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

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

 

零元学Expression Blend 4 - Chapter 24 以实作了解Cover Flow功能的相关教程结束。