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