Universal Windows Platform XAML 自訂 Button Style

最近在寫 Windows 程式，我想要在 XAML 裡面設定 Button 滑鼠移上去，也就是 hover 的時候的顏色。CSS 當然簡單啦，直接可以設定 hover 的樣式。但 XAML 就花了我一點功夫才弄懂。

首先 XAML 也是有 Style 的。就叫做 Style（對我專講廢話）。XAML 所預設提供的每一個 Control 都已經有配上 Style。所以如果要改變 hover 的顏色，需要 override 掉他預設的 Style。以下介紹怎麼 override 掉一個 Button 預設的 Style。

首先，先來看看一顆 Button 平常的樣子（左邊），跟滑鼠移上去的樣子（右邊），右邊有個深灰色的框框。

假設我不喜歡那個框框，我希望背景變色，然後字也變色，那我們就要去修這個 Button 的 Style。

開始，首先，每個 Control 都有所謂的 template，Style 是決定在這個 template 裡面。所以我們其實要編輯的是這個 Button 的 template。現在，讓我們在 Visual Studio 裡面，拉出一個 Button 放到 design 視窗裡面。

接著在 Button 上按滑鼠右鍵，選「編輯範本」→「編輯副本」

範本就是 template，那編輯副本（edit copy...）是什麼意思呢？因為其實 Button 本身已經有一個預設的 template，那一個預設的 template 是我們動不了的，所以我們要從那個 template copy 一份出來編輯。你可以看到「編輯目前項目」這個選項是 disabled 的，表示我們無法直接編輯這個 Button 目前所套用的那個 template。「建立空白」則是說我們想要從頭建立一個 template，但我們不想，太麻煩了，我們想要從現有的這個改。

現在你有幾個選項可以選，上面那個「全部套用」我不知道是啥意思，我很無知。但我知道取個名字是什麼意思 XD 我來取個鳥名字叫做「ChangeColorButtonStyle」。下面那個選項「定義於」比較簡單，因為 template 也是用 XAML 描述的，所以他其實就是問你要把這個範本存在哪邊。

1. 應用程式（App）的話，就是整個 App 到處都可以使用到這個 template，應該是會放在 App.xaml 裡面
2. 此文件，那就是存在你目前編輯的這個 XAML 檔裡面，你還可以選擇你要放在哪裡，是要放在整個 Page 裡面，還是你只想要放在這個 Button 裡面。如果你放在這個 Page 裡面，那只要在這一頁裡面，其他的 Button 也都可以使用這個 Style。如果放在 Button 裡面，就只有這個 Button 可以使用了，假設你有好幾種 Style 想要讓這個 Button 自己切換，且別人都用不到這些 Style，就可以使用這個選項。
3. 資源字典（Resource Dictionary）是 XAML 裡面用來管理 Resource 集合的容器，因為我目前沒有自訂任何 Resource Dictionary，所以他也不讓我選，算了，哼哼。

以這個範例來說，因為我只有一個 Page，我就放在 Page 吧。按下「確定」

可以看到我的 XAML 檔從本來的

變成

太 awesome 了。看不懂，沒關係，不重要，重點就是上面那一整駝，就是他生出來的用來描述 Style 的 XAML。然後他也幫你把 Button 指定的 Style。看到沒有，名字一樣。

所以接下來，我們只要編輯上面那個 XAML 就可以了……昏倒……那真不是人幹的，所以我要用「Blend」，今日最重要關鍵字，沒有之一。

Blend 是微軟用來 design XAML 的 GUI 工具，長的有點像 Visual Studio，但是專注在 design UI 上。現在請到「方案總管（Solution Manager）」在你那個 XAML 上，按滑鼠右鍵，選「Edit in Blend」

等一段時間，如果你從來沒有執行過 Blend，他第一啟動會有點久 = =|| 耶～終於好了！

他會跳一個你看不懂的視窗。一個好的程式設計師的習慣，就是一定要搞懂每一個細節，不能放任東西不懂就這樣過去了，所以我們按下「不要再提示我」跟「確定」，叫他閉嘴。

搭拉～傳說中的 Blend

在 Button 上按下右鍵，現在我們要來編輯這個 Button 的 Style。因為我們剛剛已經有幫他建立 Style 了，所以這次「編輯目前項目」是可以選的，選他，因為我們要編輯我們剛剛給名字的那個 ChangeColorButtonStyle。

好，講古時間到。在 XAML Style 裡面，有一種東西叫做 VisualState。什麼是 Visual State 呢？就是「看起來什麼樣」比方說 Button 在「平常」是一個 VisualState，在「滑鼠滑上去」的時候是另外一個 VisualState，在「按下去」的時候是另外一個 VisualState，在「Disable」的時候又是另外一個 VisualState。所以 Button 總共有四種 VisualState：

1. Normal 正常
2. Pressed 起蕊
3. Disabled 失常
4. PointerOver 指標在上

Blend 讓你可以分別輕鬆的設計這四種 VisualState 長什麼樣子。

那我們要怎麼編輯這些 VisualState 呢？來，看到畫面左上方

那個 State 給他點下去，我們就可以看到，Button 有四個 VisualState。
我們隨便看兩個，請點一下 Normal，可以看到 Button Normal 的樣子

嗯，很 normal，現在點下 PointerOver 來看看很什麼樣子

嗯，很 over。

我現在想要把這個 Border 拿掉，點一下那顆 Button，畫面右邊會顯示這個 Button 的屬性，但是你會發現他 BorderThinkness 的地方，被黃色的框框框起來，不給你改！ㄟ！其實是因為這些屬性已經被之前我們 copy 的那個 Style 設定過了，所以如果我們要再設定他的話，要先 reset 他

然後就可以改變那些值了，我要把他改成 0 = =||

你現在可以按下 F5 執行看看，滑鼠移上去，邊已經不會顯示了。

但是現在這樣也不太能看的出來有沒有 hover，所以我還要改背景顏色。好像不用我多說這個改，太簡單了，請自己動手。那我就選個霞光虹好了

按下 F5 執行，成功啦！

其實他還可以設計「VisualState 間切換的動畫」，不過我懶的寫了，自己上 youtube 找 XAML Blend Animate 就這樣。掰。