|
|
最近做SonySource項目時實現(xiàn)了幾個很小的Silverlight程序，分別是Clock、HomePeoplePicker和ManageMentPeoplePicker。實際上這三個silverlight程序都非常簡單，主要特點有以下幾個方面：
1. Silverlight程序和頁面上的HTML元素混合在一起，且在特定事件觸發(fā)后要動態(tài)改變Silverlight程序在頁面中占的位置及大小，但給用戶的感覺是無縫連接；
2. Javascript和Silverlight相互調(diào)用；
3. 簡單的探照燈遮照效果；
下面就分別對我認(rèn)為比較不好處理的地方或者一些我費了很多周折才實現(xiàn)的地方做一簡要說明：
一、使Silverlight浮動在Html元素中，并動態(tài)改變大小
或許我這個小標(biāo)題描述得還不是很準(zhǔn)確，不能直觀表達(dá)我的意思。舉個例子，假設(shè)我們要用Silverlight做個下拉菜單，并將他放在html頁面上使用。我們希望這個silverlight菜單所占的大小只是980px寬和30px高，因為在緊挨菜單的上面和下面的地方我們要放置一起其他的html元素。但當(dāng)用戶點擊某個菜單項時，這個子菜單就展開，假設(shè)子菜單的大小是100px款和200px高，那就要求Siverlight所占的位置至少高為230px。由于Silverlight菜單只有30px高，所以下拉菜單就被截斷而不能完整顯示。我做的這個項目里三個Silverlight都遇到類似問題。例如PeoplePicker是在一個表格框里顯示很多人的圖像，當(dāng)用戶點擊一個人的圖像的時候彈出一個窗口以顯示人的詳細(xì)信息，在某種情況下，這個彈出窗口會超出包含所有人物圖像的表格從而部分被截斷。在《Silverlight嵌入到HTML之windowless屬性及運用AjaxControlToolKit時出現(xiàn)虛線邊框的問題》所描述的問題就是基于這種需求。
上述問題是否可以簡單的描述為：Silverlight程序在頁面上只在指定的Silverlight plug in（<object/>元素）中顯示，當(dāng)超過Silverlight Plug in時就會被截除；當(dāng)Silverlight程序的寬和高在運行時不確定時，就要求Silverlight Plug in的大小和位置隨之改變以使所有silverlight內(nèi)容都能完整正確的顯示出來。
我在這個項目里的解決辦法就是基于以上的描述，動態(tài)改變Silverlight plug in（object元素）的大小，并時silverlight plug in以絕對定位的方式浮動于其他元素之上，且讓silverlight plug in的背景色為透明以不至于讓他遮蓋所有的底層元素。
首先，我們在頁面上定義一個<div>元素，我們的silverlight程序就放在這個<div>里，并以它作為silverlight的定位基準(zhǔn)。即正常情況下silverlight和包含它的<div>的位置和大小完全一致。當(dāng)需要改變silverlight的大小和位置時，也以該<div>為參考。在頁面布局時，我們只用關(guān)注這個<div>應(yīng)該放到哪就行了。HTML代碼大致如下：
Code 
NET技術(shù)：簡單探照燈遮照效果的Silverlight程序，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
