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

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

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

时间: 2024-07-29 01:35:09

零元学Expression Blend 4 - Chapter 24 以实作了解Cover Flow功能的相关文章

零元学Expression Blend 4 Chapter 22 以实作案例学习Frame及HyperlinkButton

原文:零元学Expression Blend 4 Chapter 22 以实作案例学习Frame及HyperlinkButton 本章将教大家如何以实作善用Blend4的内建功能-「Frame」以及「HyperlinkButton」 本章将教大家如何以实作善用Blend4的内建功能-「Frame」以及「HyperlinkButton」 附上简单的范例,请点击进行换页,并注意换页内容 范例请点我 ? 跟着范例做做看吧! 01 使用小猴子附上的的范例档案,或是自己做一个类似下图的版面 ? (范例内的

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

原文:零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」 将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」. ? ? 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」. ? ? 就是要让不会的新手都看的懂! ? <专情王子?查理B> Border是Blend里最简单的布局容器,可以使用Borde

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

原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的布局容器大哥-「Grid」. ? 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的布局容器大哥-「Grid」. ? ? ? 就是要让不会的新手都看的懂! ? ? ? <实至名归的容器大哥> Blend 4内的容器有很多种,比较常运用到的除了有Grid.Can

零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面

原文:零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面 本章将交大家如何运用Blend 4 内的Text相关功能做出有设计感的登入画面 让你五分钟就能快速做出一个登入画面 ? 本章将教大家如何运用Blend 4 内的Text相关功能做出有设计感的登入画面 让你五分钟就能快速做出一个登入画面 ? 范例内有文字方块可以输入文字,以及密码栏: 很抱歉,阁下使用的浏览器并不支援 IFrame,不能正常浏览我的网页 打错字了....不

零元学Expression Blend 4 - Chapter 36 来玩捉迷藏吧!!!看看ScrollBar的Disabled与Hidden之差异

原文:零元学Expression Blend 4 - Chapter 36 来玩捉迷藏吧!!!看看ScrollBar的Disabled与Hidden之差异 本次要针对Disabled以及Hidden作讨论 很多人会把Disabled当成是不显示,因为选单内容有个Visible(翻译为可见or显示) 但其实Disabled是禁用而非不显示,若是想要使之不显示,请使用Hidden作隐藏即可 我想,不显示跟隐藏的意思是雷同的,但与禁用却是相差很远,所以请不要搞混喔~ 隐藏与禁用,在实务上使用起来就是有

零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸)

原文:零元学Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一个猴子脸) 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要教你如何建立自己的笔刷. ? 本篇内容会教你如何使用笔刷.钢笔.渐层以及透明度的调整,还有如何转化图层和路径,最重要的是要教你如何建立自己的笔刷. ? ? 就是要让不会的新手都看的懂! ? 01 开始专案 打开Blend後选择Top Menu的 File->New Project(快捷键Shift+

零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I

原文:零元学Expression Blend 4 - Chapter 15 用实例了解互动控制项「Button」I 本章将教大家如何更改Button的预设Template,以及如何在Button内设置动画. ? 本章将教大家如何更改Button的预设Template,以及如何在Button内设置动画. ? ? ? 01 开启一个新专案,并且置入一个Button,调整到适当大小 ? 在Properties->可以调整Button的外观,基本设定都跟先前的教学雷同 不熟的人请看如何用Blend制作一

零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计

原文:零元学Expression Blend 4 - Chapter 6 如何置入Photoshop档案以及入门动画设计 本章将教大家如何把Photoshop档案置入Expression Blend 4,以及设置简单的动画. 只要按照步骤来,就能很容易的做出动画的效果. ? 本章将教大家如何把Photoshop档案置入Expression Blend 4,以及设置简单的动画. 只要按照步骤来,就能很容易的做出动画的效果. ? 就是要让不会的新手都看的懂! ? ------------------

零元学Expression Blend 4 - Chapter 26 教你如何使用RaidoButton以及布局容器的活用

原文:零元学Expression Blend 4 - Chapter 26 教你如何使用RaidoButton以及布局容器的活用 本章将教大家如何运用Blend的内建元件RaidoButton做出选单选项,以及配合的布局容器运用 ? 本章将教大家如何运用Blend的内建元件RaidoButton做出选单选项,以及配合的布局容器运用 ? ? 01 首先开一个新的专案,把Layout的颜色调整一下,并且在版面切完後放入一个Rectangle ? 问卷会有题目,所以我们放入一个TextBlock ?