公告資訊

未經授權,禁止轉載網站文章與內容。如有需要可以跟我聯絡,謝謝!!




2008年9月9日 星期二

Silverlight 2 線上講堂 -21:淺談控制項外觀效果

上個星期有位Brian朋友在線上問我,如何在使用者滑鼠移到TextBox控制項的時候,在TextBox控制項的外面顯示虛線的框線,提示使用者輸入資料。Brian說,想用繼承的方式建立一個自訂的TextBox控制項,然後再去客製化外觀。我一聽,天啊! 千萬不要有這樣的想法!! 趕緊先加了一堂課來為各位說明一下外觀的控制技巧。

在建立Silverlight 2.0應用程式外觀的時候,各位千萬要記住一句話,那就是:

"外觀要用設計師(Designer)的想法來思考!!"

不要動不動就想到元件,想到繼承,然後把簡單的事情給複雜化。如果是物件導向跟繼承、override就可以解決的事,交給VS 2008就好了,要Expression Blend做啥?

要做出Brian想要的效果,其實很簡單,讓我們來看看技巧在哪:

1. 首先,我們要先用一些設計工具"畫"出虛線的外框,開啟小畫家。

2. 你沒聽錯,就是Windows內建的--"小畫家"。

3. 將畫布調整成適當的大小(大約比TextBox控制項大一點),然後選取填入色彩按鈕( 快照2 ),再從色盤中選取黑色,再點選畫布,將畫布填滿黑色:

快照1

4. 選取圓角矩形按鈕( 快照3 ),在下方選取粗一點的框線,然後從色盤中選取你喜歡的顏色,最後在畫布中建立矩形區域:

快照4

5. 接下來選取粉刷工具( 快照6 ),然後選取矩形的筆觸,然後從色盤中選取黑色:

快照5

6. 接著,在畫布上的矩形上,每隔一段間隔圖上黑色,虛線的框線就完成了:

快照7

7. 將這一個圖檔存成View.jpg。然後使用VS 2008新增一個Silverlight應用程式專案,取名為MyTextBox。

8. 使用Expression Blend 2.5設計工具開啟MyTextBox專案,將<UserControl>標籤中的子元素(預設是Grid)換成Canvas,並且將大小設為400x100,底色為黑色。

9. 在[Project]視窗中選取MyTextBox專案,按下滑鼠右鍵選取[Add Existing Item...],將View.jpg加入專案當中。

10. 將View.jpg從[Project]視窗中拖曳到畫布上,此時Blend設計工具會自動建立Image控制項。調整Image控制項到適當大小,然後到[Properties]視窗中設定Image控制項的Name屬性值為imgBorder:

快照8

11. 將TextBox控制項加入表單中,放置在Image控制項的框線範圍中,調整成適當大小(可以透過View-->Zoom in幫忙)。然後到[Properties]視窗中設定Image控制項的Name屬性值為txtName,並清除Content屬性的內容。完成的結果如下:

快照10

12. 接下來,選取imgBorder控制項,在[Properties]視窗中設定[Appearance]的Visibility屬性值為Collapsed,隱藏imgBorder控制項。

13. 完成之後,選取[File]-->[Save All],存檔並關閉Expression Blend設計工具。

   ----------------  操作介面設計完成  -------------------

14. 使用VS 2008開發工具開啟MyTextBox專案中的Page.xaml,在TextBox控制項元素中設定MouseEnter事件對應的處理常式,然後按下滑鼠右鍵選取[巡覽置事件處理常式]:

快照11

快照12

15. 在txtName_MouseEnter事件處理常式中,加入顯示imgBorder控制項的程式碼如下:

private void txtName_MouseEnter(object sender, MouseEventArgs e)
{
    imgBorder.Visibility = Visibility.Visible;
}

16. 重複步驟14,建立MouseLeave事件的事件處理常式txtName_MouseLeave。在txtName_MouseLeave事件處理常式中,加入隱藏imgBorder控制項的程式碼如下:

private void txtName_MouseLeave(object sender, MouseEventArgs e)
{
    imgBorder.Visibility = Visibility.Collapsed;
}

17. 完成之後建置專案,然後執行測試網頁。完成的效果如下:

稍微修改一下,又可以有不一樣的效果。例如,讓使用者按下框線矩形區域,才可以輸入資料:

很簡單,不是嗎 ? 不要再去想啥控制項繼承、自訂控制項之類的動作,記住下面的這句話:

"外觀要用設計師(Designer)的想法來思考!!"

你就不會被一些錯誤的觀念,誤導到錯誤的方向,走進死胡同!

沒有留言:

最新回應

Loading...

即時與版主對話


(若狀態顯示"忙碌"時,我可能無法馬上回應。你可以留下Email,我會盡快跟你聯絡,謝謝喔!!)