|
最近要用silverlight開發(fā)一個小程序.做了一個scrollbar.其實sl自己帶了這個控件,但是如果要樣式和自己的程序的風格完全一致的話也是有些難度的.索性自己就簡單的做了一個.這里記錄一下開發(fā)的步驟. 效果圖:  功能: 適應瀏覽器高度. 在拖動時返回移動的百分數(shù) 可設置滾動按鈕的位置 好了明確了要的功能那就正式開始吧~ 要和自己程序的樣式一致那就先把設計師做的設計放進來.這里我用了兩個元素.一個背景條和一個拖動按鈕"Bar". Bar我單獨做成了一個控件.沒什么代碼就是Xaml.  這里要注意一下.在Bar這里控件中我在"UserControl"節(jié)點下加入了RenderTransform.并且讓光標變成手型.又給RenderTransform下的TranslateTransform起了名字"xTranslateTransform".這樣就可以直接對X和Y偏移進行設置.這樣子做和對Canvas.LeftProperty Canvas.TopProperty進行設置達到的效果是一樣的. 如果不習慣Canvas.LeftProperty Canvas.TopProperty.那就這樣來吧.  好了Bar做完了那就可以用Bar來做ScrollBar了. 這里我用的布局是Canvas.默認建立的是Gread. 制作一個高300px的背景條.起名字為"xBg".并把剛才做好的Bar放到上邊.使Bar在最上方.  好了到這里界面就做好了.該去實現(xiàn)功能了. 定義onDrag事件.傳遞出參數(shù)為移動的百分數(shù). 定義高度屬性 定義移動百分數(shù)屬性 在初始化時設置高度為300.移動百分數(shù)為0. 在設置移動百分數(shù)屬性的同時對Bar的Y位移也進行設置. 在設置高度屬性的同時對xBg的高度進行設置.  下來對Bar做拖動的實現(xiàn). 其實也就是一個drag.只是對Y屬性設置而已. 用xBar.xTranslateTransform.Y=88.就可以了. 這里在Move時觸發(fā)上邊定義的onDrag事件.計算移動百分數(shù)并返回.  好了一個簡單的scrollbar控件制作完成. ; ) 簡單的看一下如何使用.  說明一下"panelTranslateTransform.Y" 是目標元素的Y位移. |
|
|
來自： 集微筆記 > 《Silverlight》
