Expression Blend 的點滴（3）--Templating的妙用，製做本身的ScrollBar控件

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

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

 

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



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




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



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

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

若是還不是很清楚，那咱們查看下源碼：



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



變成scrollbar：



肯定後，編輯當前模板。


接着咱們打開Pars選項卡：

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



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

以後，你將看到以下的樣子：



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

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



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