Windows Phone 7 定製控制項 – ImageButton

今天我們來探討如何製作一個不同以往的Button控制項，姑且稱之為：ImageButton。

在編寫 Windows Phone 7 應用程式的時候，我們經常會遇到這樣的需求，就是要製作一些圖片型按鈕。相信有些朋友一定嘗試過把Image控制項當做標準Button控制項的Content，但結果如何呢？應該不盡如人意了吧。最大的問題在於，系統預設的Button的風格，會讓按鈕在被按下去的時候，讓填充的顏色取系統的前景色彩，造成按鈕中的圖片不可見，並且有令人不適的“閃爍”效果。既然這樣的需求比較普遍，我們不如專門自訂一個控制項出來。

 

在開始動手之前，我們先看一看實際運行後的效果：

 

整個按鈕的效果就是：當使用者點擊按鈕時，按鈕表徵圖略微變小、變淡，與此同時，按鈕的背景處有另一個表徵圖一邊擴散、一邊淡出。

下載代碼  接下來，我們就開始動手製作這樣一個 ImageButton 控制項。 

第一步：編寫自訂控制項類

製作一個自訂的控制項，首先要從編寫控制項的類開始。既然我們要做的是一個按鈕控制項，就讓它繼承自標準的Button控制項，從而獲得Button已實現的諸多功能（例如：Button 的 Click 事件）。

在Visual Studio裡，建立（或開啟）一個 Windows Phone 7 項目，添加一個類。代碼如下：

    public class ImageButton : Button
    {
        public static readonly DependencyProperty ImageSourceProperty =
            DependencyProperty.Register(
                "ImageSource",
                typeof(ImageSource),
                typeof(ImageButton),
                null);

        public ImageSource ImageSource
        {
            get { return (ImageSource)GetValue(ImageSourceProperty); }
            set { SetValue(ImageSourceProperty, value); }
        }
    }

在上面定義的 ImageButton 類裡，我們只聲明了一個屬性，就是 ImageSource，它是用來為我們的 ImageButton 控制項指定圖片資源的。至於為什麼用兩段代碼來聲明一個屬性，請查看有關 DependencyProperty 的更多資訊。

 

第二步：設計自訂控制項的外觀和行為

在Visual Studio裡進行重新編譯，好讓剛剛聲明的控制項類生效。然後在 Expression Blend 中開啟該項目。在 Expression Blend 介面左上方的 Assets 地區中，搜尋 imagebutton 字樣，可看到我們剛剛聲明的 ImageButton 控制項。

 

雙擊該控制項，則在當前 page 中添加該控制項。

 

至此，我們發現這個 ImageButton 控制項的外觀其實和標準的 Button 控制項沒有什麼不同。這是由於我們尚未定義任何有關該控制項的模板，因此系統就找到其基類的模板來進行顯示。接下來，我們就產生並定義 ImageButton 的模板。

在選中 ImageButton 控制項的狀態下，於介面上方依次點擊 [ImageButton] -> [Edit Template] -> [Edit a Copy...]。

擴充說明：

選擇[Create Empty]，則會產生一個空的模板。如果需要從頭編寫一個完全自訂的控制項，可以選擇此項。
選擇[Edit a Copy...]意味著將當前控制項的模板（如果不存在，則選擇基類的模板）進行複製，並在此基礎上進行修改。既然我們做的事情就是基於標準的 Button 控制項進行擴充，因此該選項比較適合。

 

在彈出的對話方塊中，選擇 [Apply to all] 和 [Application]。

擴充說明：

當定義一個控制項的模板時，可以選擇給該模板指定一個關鍵字名稱（key），那麼在使用這樣的模板時，就需要通過顯示地（Explicitly）指定其關鍵字來進行引用。而如果我們選擇了 [Apply to all] 的方式，就意味著不給該模板指定任何關鍵字（key），那麼這樣的模板就是預設範本（Implicit Style）。在一個應用程式範圍內，針對同一種控制項，只允許存在一個預設範本。上述對話方塊中，[Define in] 地區用於指定模板的存放位置。如果選擇了 [Application] 則該模板會被放置在當前項目中的 App.xaml 檔案中，並且全域可見。通常，預設範本都應該放置於此。選擇[This document] 則模板被放置在當前 page 檔案中，且僅在當前頁面有效。

 

點擊確認，進入模板的編輯頁面。 

 

 

擴充說明：

在介面的左上方，選擇 [States] 分頁，可以看到一系列有關 Button 控制項的 Visual State。（關於 Visual State 的介紹，請查看其他詳細的資料） 
在介面的左下方，可看到系統預設提供的 Button 控制項的內部結構：一個Grid 控制項內，嵌套一個名為 [ButtonBackground] 的 Border 控制項，其中又嵌套一個名為 [ContentContainer] 的 ContentControl 控制項。
究其原理，這個 ContentControl 的 Content 屬性（介面右下方紅色圈圈）被綁定到了 Button 控制項的 Content 屬性上，於是我們在使用 Button 控制項時，無論在其 Content 屬性上填寫任何文字，或者放置任意圖片，都能在 Button 控制項的內容地區看到它們。

 

接下來，我們大刀闊斧地把模板中的 [ContentContainer] 及 [ButtonBackground] 都刪除掉。在刪除的過程中，Expression Blend 會提示說“由於刪除了某些介面元素而影響了Visual State正常工作”，不必理會。最後只剩下 Grid 控制項。

 

接下來我們給Grid中放置兩個 Image 控制項，這兩個 Image 控制項相互重疊。同時選中兩個 Image 控制項，然後點擊 Margin 屬性右側的白色方塊（Advanced options），然後選擇重設（Reset），將所有 Margin 值清零。

 

仍然是在選中兩個 Image 控制項的狀態下，點擊 [Source] 屬性右側的瀏覽按鈕，為其指定圖片資源（最好是不超過200X200像素的 png 圖片）。載入圖片後，如果 Image 控制項的大小發生明顯的變化，則適當調整預覽區下方的 [查看百分比] 來調整視野，但千萬不要直接調整 Image 控制項本身的 Width 及 Height。整個模板已定義流程中，這兩個 Image 控制項的 Width 及 Height 都應該顯示 Auto (某數字) 。

提示：

在這一步驟中，之所以用“寫入程式碼”的方式指定圖片資源，僅僅是為了藉助可視化的方式來進行模板編輯。待模板編輯完成之後，我們會把 Image 控制項的圖片資源綁定到我們在 ImageButton 類裡聲明的 ImageSource 變數。

 

接下來，給兩個 Image 控制項分別起名為 ImageBack 和 ImageFront（在 XAML 中，越是處在代碼的上方，就意味著在運行時越在低層顯示）。然後將 ImageBack 的透明度（Opacity）設定為 0%，讓它預設不可見。

 

 

在介面左上地區的 [States] 分頁中，選擇 [CommonStates] 下的 [Pressed] 狀態（Visual State）。然後選擇 ImageFront 控制項，將其大小（Sacle）的 X 及 Y 值設定為 0.8，並將其透明度設定為 50%。這一步操作，是定義按鈕在被按下的時候，其外觀應發生的變化。

 

依然是在 [Pressed] 狀態的編輯模式下，選擇 ImageBack 控制項。 然後點擊 [Show Timeline] 按鈕，顯示故事板（StoryBoard）編輯欄。在故事版中，我們建立兩個主要畫面格，時間間隔大約在0.3秒。在前一個主要畫面格裡，設定 ImageBack 控制項的透明度（Opacity）為 50%，在第二個主要畫面格，設定 ImageBack 控制項的透明度為 0%，並且將其大小（Scale）的 X 和 Y 值設定為 2。

提示：

整個按鈕的效果就是：當使用者點擊按鈕時，按鈕表徵圖略微變小、變淡，與此同時，按鈕的背景處有另一個表徵圖一邊擴散、一邊淡出。

 

接下來，選擇 ImageFront 控制項， 點擊 [Source] 屬性右側的白色方塊，設定 Template Binding 為 ImageSource。然後選擇 ImageBack 控制項，對其進行同樣的操作。這一步操作，是將兩個 ImageButton 控制項的圖片資源綁定到我們在一開始聲明的 ImageSource 屬性上，從而實現在實際使用 ImageButton 控制項的地方，根據需求來指定不同的表徵圖。由於模板內的 Image 控制項不再是“寫入程式碼”到某一特定的圖片上，而是通過綁定來顯示實際 ImageSource 屬性所提供的值，因此我們就能夠實現一個可以重複使用的按鈕控制項。

 

儲存工作成果，然後點擊介面上方的導航條，回到使用 ImageButton 控制項的 page 編輯頁面。

 

在該頁面中，選擇 ImageButton 控制項，在屬性欄中，找到 [ImageSource] 屬性，為其指定任意一個圖片資源。指定完成後，可以在預覽區看到圖片載入後的效果。

 

調整 ImageButton 控制項的大小及位置，然後運行程式，在模擬器中查看效果。當點擊該按鈕時，會呈現如下效果。（部署到手機裝置上體驗，效果會更加明顯）

 

OK。至此我們就完成定製 ImageButton 控制項的全過程。

下載代碼

 

在下一篇文章，我會介紹如何更加合理地將一個清單控制項（ListBox）和相關控制按鈕進行整合。

謝謝大家！