silverlight 相簿雛型

這篇應該是"silverlight3的"偽"3D續--圖片橫向輪換"的後續篇章，代碼基本上從上篇代碼修改而來，介面則抄襲了nasa的相簿，自己一直做資料庫相關的電子商務開發，雖然斷斷續續學習了一陣silverlight，但對RIA開發還沒找著感覺，基本上仍處於從asp.net程式員看silverlight的初級階段，這個權當練手，廢話不多說，直接看:

示範地址:
http://images.24city.com/jimmy/album/default.html

 

基本技術點:

1.利用webclient動態載入xml來擷取程式配置以及資料來源

2.利用webclient非同步讀取大圖片內容，以達到大圖載入的loading效果

3.利用SizeChanged事件重新置放各元素中心點位置(結合ActualHeight,ActualWeight)

4.下面導航小圖片區，基本上可以分成三部分:

　4.1當前圖（即下面一排圖片中的綠色圖）--始終定位於容器(canvas)的中心點
　4.2當前圖左邊的圖片(利用y軸，z軸旋轉後並排在一起，形成立體堆疊效果)
　4.3當前圖右側的圖片(同4.2，只是y軸，z軸角度轉成負值而已，以達到左右對稱)

 至於布局演算法，大家各顯神通吧，達到效果就好，在這個例子裡My Code也只是想著如何?而已(屬於最低級原始層次)，不具備啥參考意義(歡迎大家提出更好的排列演算法)

這裡再給出一個樣本結構圖，有助於理解各元素水平位置的分布(為了更直接，刻意把各元素垂直錯開了)

5.小圖點擊後，小圖片整體移動的效果實現:

 基本上這是一個視覺假象，把圖片最外層的視窗cavas應用一個storyboard，讓canvas的x座標相對變化即可，因為所有小圖片都在容器裡，所以看上去也就整體跟著移動了，但是有一個問題，動畫放一次後，會停在新的x座標上(AutoReverse設定為false的前提下)，下次再播放就動不了（因此起始x值一樣了，相當於沒移動）

 所以在動畫的Completed事件裡，我用代碼又強制把canvas容器的x值複原了(為了是下次可以繼續播放)，同時再次調用第"4"點中所提到的布局演算法重新布局，因為代碼的執行只在一瞬間，所以肉眼根本看不出這點小動作。

 這樣之後，基本上就能實現點擊移動切換功能了，但是效果很單調，為了將導航區的當前大圖慢慢縮小，同時被點擊的小圖慢慢放大，再同時伴隨一些角度的姿態調整，在小圖的點擊事件ItemClick裡，我又嘗試了寫了N多垃圾代碼，如果您細心看，能看到一些小變化(不過這些小變化自我感覺仍舊很生硬，不連貫，也歡迎大家提出更有效更簡單的解決辦法)

 

原始碼下載：http://files.cnblogs.com/yjmyzz/Album.rar

 

代碼配置說明:

用vs2008 sp1開啟後，web目錄下建立一個img目錄，參照data/img.xml裡的內容，自己找些圖片複製到img目錄中就可以了.

 

[2009/11/08更新]加入了DeepLink支援

 

轉載請註明來自 菩提樹下的楊過