示範位址:
<a href="http://images.24city.com/jimmy/album/default.html" target="_blank">http://images.24city.com/jimmy/album/default.html</a>
基本技術點:
1.利用webclient動态加載xml來擷取程式配置以及資料源
2.利用webclient異步讀取大圖檔内容，以達到大圖加載的loading效果
3.利用SizeChanged事件重新定位各元素中心點位置(結合ActualHeight,ActualWeight)
4.下面導航小圖檔區，基本上可以分成三部分:
4.1目前圖（即下面一排圖檔中的綠色圖）--始終定位于容器(canvas)的中心點
4.2目前圖左邊的圖檔(利用y軸，z軸旋轉後并排在一起，形成立體堆疊效果)
4.3目前圖右側的圖檔(同4.2，隻是y軸，z軸角度轉成負值而已，以達到左右對稱)
至于布局算法，大家各顯神通吧，達到效果就好，在這個例子裡我的代碼也隻是想着如何實作而已(屬于最低級原始層次)，不具備啥參考意義(歡迎大家提出更好的排列算法)
這裡再給出一個示例結構圖，有助于了解各元素水準位置的分布(為了更直接，刻意把各元素垂直錯開了)
5.小圖點選後，小圖檔整體移動的效果實作:
基本上這是一個視覺假象，把圖檔最外層的視窗cavas應用一個storyboard，讓canvas的x坐标相對變化即可，因為所有小圖檔都在容器裡，是以看上去也就整體跟着移動了，但是有一個問題，動畫放一次後，會停在新的x坐标上(AutoReverse設定為false的前提下)，下次再播放就動不了（是以起始x值一樣了，相當于沒移動）
是以在動畫的Completed事件裡，我用代碼又強制把canvas容器的x值複原了(為了是下次可以繼續播放)，同時再次調用第"4"點中所提到的布局算法重新布局，因為代碼的執行隻在一瞬間，是以肉眼根本看不出這點小動作。
這樣之後，基本上就能實作點選移動切換功能了，但是效果很單調，為了将導航區的目前大圖慢慢縮小，同時被點選的小圖慢慢放大，再同時伴随一些角度的姿态調整，在小圖的點選事件ItemClick裡，我又嘗試了寫了N多垃圾代碼，如果您細心看，能看到一些小變化(不過這些小變化自我感覺仍舊很生硬，不連貫，也歡迎大家提出更有效更簡單的解決辦法)
代碼配置說明:
用vs2008 sp1打開後，web目錄下建立一個img目錄，參照data/img.xml裡的内容，自己找些圖檔複制到img目錄中就可以了.
[2009/11/08更新]加入了DeepLink支援
轉載請注明來自 菩提樹下的楊過