Expression Blend 自定義RadioButton 模板

WPF/Silverlight中能夠使用模板，修改應用該模板的控件的結構。能夠修改控件模板，以重排、添加或刪除控件中的元素（或部件）。

下面以一個具體的Demo來演示如何利用Expression Blend來編輯形狀的模板。

右擊rbRed，選擇Edit Template—>Create Empty…建立空模板，以下圖

點擊ok進入編輯模板，添加一個矩形大小爲30*30，以下圖

將該矩形名爲爲uncheck，同時調整其圓角，將其拖爲一個圓形，以下圖

選擇uncheck，修改其Stroke，將園設爲無邊框，以下圖

選擇，uncheck，使用ctrl+c、ctrl+v進行復制，並將複製的矩形命名爲check，以下圖

導航到State面板，開始編輯模板，選擇checked，錄製當RadioButton被選中時，RadioButton呈現的樣式。

設置check矩形的背景顏色，這裏選擇漸變的筆刷，以下圖：

切換到unchecked，選擇uncheck矩形，將其背景色設置爲solid solor，純紅（#FF000000），以下圖

 

在編寫代碼以前，咱們先要將rbRed、rbGreen、rbBlue設爲一組，將其GroupName均設爲showColor。

而且將這三個RadioButton的Checked事件都設爲colorChanged

在code-behind中編寫以下代碼

按F5運行程序，最後的效果以下：

怎麼樣，一個漂亮的RadioButton很快就實現了，你也能夠定義其餘的行爲，如在移到RadioButton上時，會有一個動畫之類的，趕快本身行動吧！

源代碼下載

 

點擊以下按鈕，退出模板編輯，以下圖

選中rbRed，設置其背景色爲紅色

複製rbRed兩份，分別命名爲rbGreen、rbBlue，重複上述步驟進行模板編輯。

向Grid中添加一個矩形，取名爲showColor，用來顯示被選中的RadioButton的背景顏色，以下圖：