今天要介紹一個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之路
喜歡我文章請推我一下或給我個回應,你的鼓勵會給我無限的動力喔!
若是您有其他問題或是特別需要,請在文章回應處留言,我會盡快回覆您