Blend_技巧篇_導入PSD文件製做ToggleButton （Z）

原文: Blend_技巧篇_導入PSD文件製做ToggleButton （Z）

系統: Win7sp1 32位

IDE: Microsoft VisualStudio 2013 Ultimate

Blend 2013

工程: .Net Framework4.5.1

工具: Photoshop CS6

================================

首先明確一點，ToggleButton其實是CheckBox的變形，分爲了三種狀態Checked、Unchecked、Indeterminate

 

一、製做PSD模板文件，以下圖，背景刪除有利於後續控件製做。

　　

                     

 

二、啓動Blend2013，其餘版本亦可。新建一個WPF Application工程，而後如圖所示導入PSD文件

導入PSD文件後如圖所示

圖中我進行了標記：

① PSD模板中ToggleButton的Checked狀態

② PSD模板中ToggleButton的Unchecked狀態

③ PSD文件中對應圖層保存的格式：Editable content--這個是咱們須要的格式，這樣導入後的圖形能夠編輯，例如填充顏色，改變描邊等等；Flattened bitmap -- 這個就是保存成爲一張普通的圖片，若是是作個按鈕的貼圖還能夠，在此例中咱們不須要

④ 可能你也會看到這樣的提示，提示代表Photoshop中使用的一些特效在Blend中不支持，沒關係只管導入，有什麼問題咱們後面能夠處理。

至於須要導入的模板，我只勾選了OFF組裏面的3個（就是②對應的那個圖），固然你也能夠選擇ON組裏面的，我的喜愛了，那個bg就不要勾選了，就是個白色背景，咱們須要的是透明背景。選擇好了後點OK。

Blend導入完成後的狀態如圖所示，應該只有紅框中的一個按鈕

注：btn_07爲ToggleButton在Checked狀態下顯示的綠色對勾。這個是我用PS中切片切出來的，由於我勾選的白色OFF狀態下的模板，因此我須要經過代碼作出Checked狀態下(ON模板)的模樣。可能你導入後的圖形顏色會有丟失狀況，那是由於Photoshop中使用的一些特效Blend中不支持，沒關係，咱們能夠在PS中作切片把圖片切出來。例如個人off icon.png這個文件導入後就變成了黑色的，在PSD模板中應該是紅色的。

 

三、導入PSD模板完成後，應如圖所示。應該只有OFF_Copy這一個畫布(Canvas)

　　

而後咱們作如圖中黃色的那部分操做，把這個畫布(Canvas)轉成一個UserControl，點擊後會彈出一個讓你起名字的對話框，
輸入自定義的名稱後會在工程中生成一個UserControl控件。如圖所示:

　　

接下來，咱們須要作一個控件的模板(Template)，把控件相關的Path、Image等等的控件都包含進去。

這樣作是由於咱們須要把這個自定義的控件轉換成ToggleButton，

若是不作這步，直接把節點UserControl改爲ToggleButton會有問題滴，至於什麼問題能夠本身進行嘗試，反正我是試過了。步驟如圖所示:

　　

點擊建立空模板後會彈出一個給模板起名字的窗口，如圖所示：

 

① 模板的名稱

② 和③其實這兩個是一塊兒的，若是選擇② ，那麼自定義的這個模板就會放置在App.xaml中，能夠未來作爲其餘控件的模板，本例中咱們只有這一個控件，那麼就選擇③了。

點擊OK後，你會發現Design區域的控件不見了，只有一個藍色的空白框在那裏。此時咱們來看代碼，如圖所示:

咱們須要把包括Grid節點在內的代碼替換UserContro.Resources節點下的Grid，替換完成後又看到了咱們自定義的控件了，再也不是一個空白的藍色框了。

由於咱們作的這個控件須要Checked、Unchecked事件，而且最好仍是個按鈕，因此ToggleButton正好符合咱們的條件，那麼咱們就把節點UserControl改爲ToggleButton，這樣這個控件就繼承了ToggleButton的屬性。