Expression Blend 的點滴(3)--Templating的妙用,製做本身的ScrollBar控件

在Blend中,有一個功能,Make into control---經過它能夠方便的自定義各類個性化的控件,例如把圖片,文本,或者幾何形狀等等變成Button控件。固然,不僅是Button能夠變,還有各類各樣的控件,幾乎包括了因此的基本控件,而它們的外觀究竟是什麼樣,那就取決於你的創造力了。今天,就繼續練習下這個功能的使用,跟着我一塊兒作吧,你會發現blend真的很棒,固然,開始的時候可能會以爲過程有些複雜,不過不要緊,熟能生巧嘛~好了,開始吧。。。


首先在拖放出一個Grid佈局控件,設置適當的長度和寬度,設置下背景色,而且分紅5列:
vim

 

這個就看成滾動條的主體,接着在左右兩個頂端分別畫上兩個三角形,固然他們分別位於第一列和第五列。你能夠本身畫三角形,若是不擅長,就直接使用三角形的shape控件。



畫出三角後,調正下大小和旋轉角度後,放入相應的列中,接着再拖放一個矩形控件,改變下圓角,放入第三列:




基本的樣子已經出來了,接下來幾部都是比較關鍵的,須要在第二列和第四列拖放兩個矩形,並設置背景色和Grid的背景色同樣。這個兩個矩形有什麼用呢?若是你查看下基本scrollbar的模板,你會發現,scrollbar主要有五個能使得產生滾動事件的部件,這裏以垂直滾動條爲例:



因此,咱們上面的三角分別對應smalldecrease,smallincrease.而矩形則對應兩個Large,中間列的矩形對應Thumb。

接着,進入關鍵的一步,對各個列進行設置,把第一列,第二列,第三列,第五列設置爲auto,第四列爲任意寬度,以下圖,注意紅色標註的地方;

若是還不是很清楚,那咱們查看下源碼:



到目前,前期工做已經完成,因而咱們開始變,Make into contrl-------



變成scrollbar:



肯定後,編輯當前模板。


接着咱們打開Pars選項卡:

app

 
在這裏列出了scrollbar的全部部件,咱們下面會用到,咱們會把以前本身定義的三角形,矩形make into 相應的部件。



上圖的操做就是將左邊的三角形轉換成SmallDecrease部件,其他的操做相似,就不一一列舉了。

以後,你將看到以下的樣子:



可是,還有一步須要注意,當你轉換後,會自動跳入它們各自的模板編輯,咱們把裏面的ContentPresenter刪除,由於咱們不須要。
以前若是都正確的操做了,那麼自定義的scrollbar模板已經作好了,接下來,咱們來使用它。

咱們拖放一個scrollviewer控件,而後編輯一個拷貝的模板。
而後編輯HorizontalScrollbar的模板,綁定到剛纔咱們本身作的模板:



這樣就成功的使用了咱們本身定義的scrollbar了,最後看看效果如何:

佈局

相關文章
相關標籤/搜索