使用WPF建立炫亮按鈕

大可山發表於2009-01-06

1. 建立三個按鈕(建立多個按鈕的目的是作對比及樣式演示)
(1)開啟Microsoft Expression Blend 2(我這裡是August Preview版本，以下簡稱Blend)
(2)File -> New Project,預設選中的是第一個:WPF Applications(.exe),進行相關設定後按OK,如圖:

(3)此時回到剛才建立位置C:\Books\ButtonDemos目錄中檢視時,檔案結構如下圖:

注意其中的App.xaml,Window1.xaml系列檔案（此處之系列代表以之開頭的所有檔案,比如App.xaml, App.xaml.cs檔案，下同）。
（4）在Blend操作窗右邊的Project中將Window1.xaml更名為ButtonDemos.xaml,改名之後相應的cs檔案也自動更改為新的檔名，比如ButtonDemos.xaml.cs。
（5）從左邊工具箱中點選“Button”按鈕，在中間內容區拖出一個按鈕，同理，在右邊Properties選項卡中將Name改為：btnDemo1, Common Properties項的Content框中輸入"Demo 1"，這將是按鈕顯示的文字內容。
（6）選中此按鈕，按右鍵，點View Xaml，將看到如下程式碼：

（7）轉到Design模式，選中剛才這個名為“btnDemo1”的按鈕，複製，貼上，拖動到下面位置，設定Name為：btnDemo2, Content: Demo 2;
（8）再重複步驟（7），做Demo 3按鈕。

2、製作一個漂亮的按鈕
（1）在Design模式下，選中剛才這個名為“btnDemo1”的按鈕，複製，貼上，拖動到右邊位置，設定Name為：btnDemo1_Copy, Content: Demo 1 Copy;
（2）設定右邊這個btnDemo1_Copy按鈕：
在Properties選項卡中Brushes摺疊選項內點選Backgound項，之後點選下面的Gradient Brush(再按照Photoshop做漸變畫筆一樣）選擇/調整顏色設定，如下圖：(如果你用過Photoshop,你會發現是何等的相似，而操作方法亦是如此)

在上圖Options處選擇Reflect(即保持其前面被勾選），得到如下按鈕樣式：

（3）讓我們來看看這個按鈕的程式碼：
 
（關於程式碼中的含義，以及如何使用C#程式碼一一實現它，我有時間的話，再一一道來，在此按下不表）
（4）如法炮製，製作另外一個按鈕：


3、使用Application.Resources設定按鈕屬性（類似CSS樣式單）：
（1）定義Application.Resources塊：開啟 app.xaml 檔案，我們可以看到裡面有下面XML片段：

  <!-- Resources scoped at the Application level should be defined here. --&gt
 
（2）將中間<!-- --&gt部分換成以下程式碼（敬請留意：其中黃色底且加粗的部分是上面第2步中（3）中按鈕的XAML程式碼，但在標籤的開頭處加了一個x:Key的屬性，其值是“GrayBlueGradientBrush”）：
 
 
 
 
  
    
    
    
  
值得一提的是，x:Key用來是漸變畫刷的唯一名稱。
這裡有必要解釋一下紅色文字部分中Style標記的內容：
首先，Style的TargetType屬性值中“{}”括起的部分內容是要表明Style所要發揮作用的控制元件型別名稱；其次，Style標籤中，有一項，表示將控制元件的背景（Background）設定為Value屬性所對應的值，而Value值用一個大括號{}括起，表示其中的值是一個表示式，需要經過程式“計算”處理此部分內容，而“StaticResource GrayBlueGradientBrush”表示是對“GrayBlueGradientBrush”的靜態資源引用。最後，將Width, Margin的屬性值分別設定(Setter,可以理解為“賦值器”)為120，10，注意這裡的設定值僅當相關控制元件對應值為空時，它們才發揮作用。
至此，完整的XAML內容為：
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 x:Class="ButtonDemos.Window1"
 x:Name="Window"
 Title="Window1"
 Width="640" Height="480" Background="#FF000000">

 
 
 
 
 
 
 
 
 

（3）好了,按F5，得到下面的結果：

我們發現，所有隻要是那些沒有設定過Background屬性的所有Button的背景全部換成了與Demo 1 Copy按鈕一樣的背景色了！


 

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/14601556/viewspace-528480/，如需轉載，請註明出處，否則將追究法律責任。

相關文章