在之前的章節裡，我們已經使用過很多次按鈕了，事實上先前使用的那些按鈕都是屬於傳統式Tk的視窗元件，它們是一種不支援佈景主題的視窗元件。而且不止是按鈕連同之前用過的標籤(label)及單行文字方塊(entry)也同樣不支援佈景主題。雖然說不支援佈景主題並不會影響到程式的功能性，但~為了順應趨勢外加體貼大家的眼睛，所以之後的文章都會以支援佈景主題的視窗元件為主，讓大家可以做出更漂亮的使用者介面。

17.1 佈景視窗元件

自Tk8.5版以後開始內建了支援佈景主題的視窗元件，而用來建立那些視窗元件的命令，都是掛在::ttk名稱空間之下，所以我們使用那些命令的時候都要在命令之前加上::ttk。為了方便說明，如果以後我說明時在視窗元件前冠上tk就表示它是傳統的視窗元件，但若冠上ttk就表示是支援佈景的視窗元件。現在就讓我們來看看tk按鈕和ttk按鈕的差別：



請注意到第2行，基本上ttk視窗元件命令和tk視窗元件命令使用上是一模一樣的，只是前面多加了::ttk名稱空間。換句話說之前我們學到的觀念都還是可以使用，所以別擔心我們並沒有浪費掉之前的學習。上面程式的執行的畫面如下：

圖 17-1

看到了嗎? ttk按鈕在Mac下變成了圓角形，這樣就和Mac預設的外觀更搭配了。

§ 關於ttk

ttk是在Tk8.5版以後才納入為內建命令的，所以如果你使用的是Tk8.5之前的版本，請儘快更新到最新的版本哦!! 否則的話ttk的命令都會不能使用。

17.2 加入按鈕圖示

在按鈕的文字前加上一個圖示可以讓你設計的程式看起來更賞心悅目。如果你想要在按鈕的文字前面加上圖示的話，那你要使用下面的那個步驟：

1. 先用image命令把圖檔轉換為Tk內部使用的格式。
2. 把轉入的圖片指定給按鈕的-image選項。

請看看下面的例子：



程式的第1行「image create photo」可以用來載入外部的圖片，-file選項後面的檔案就是要把入的圖檔。如果載入成功的話image命令會回傳一個獨一無二的資源代號來表示圖片，而這個資源代號就可以指定給其它視窗元件的-image選項。請看第2行，我們把新建立的圖片指定給按鈕的-image選項。這個程式執行起來像這樣：

圖 17-2

糟了~~文字怎麼不見了? 不要緊張，這是因為預設的情況下-image選項的內容會蓋掉-text選項的內容，如果想要並存的話只要指定-compound選項就可以了，程式改成如下：



注意程式的第2行-compound可以用來決定圖示還有文字的排放方法，指定為left表示圖示要在文字的左邊，指定為right表示要圖示在右邊，指定為top表示圖示要在上面，指定為bottom表示圖示要在下面，指定為none表示不要顯示文字。在這邊我指定了left所以程式執行起來就變成這樣：

圖 17-3

§ 關於-image選項

ttk裡有很多視窗元件都有提供-image選項，以後如果再遇到就不多說明了，請大家要記得它的用法哦!!

§ Tk 支援的圖片格式

在Tk 8.5以前的版本image create photo預設只能載入gif、ppm及pgm等圖檔，如果你要使用jpg或是png檔的話，就要引入額外的圖形支援。例如：

# 引入png圖檔的支援 
package require img::png 
# 引入jpg圖檔的支援 
package require img::jpeg

只要在使用image命令之前，執行上面的兩行程式就可以正確的載入png及jpg檔了。注意哦!! 上面兩個命令是包在Img套件裡，所以如果上面兩行執行失敗的話，請先用下面的命令安裝Img套件包：

teacup install Img

另外在8.6版以後image內建就支援png檔案格式。

17.3 製作預設按鈕

預設按鈕時常出現在對話方塊上，它的外觀和一般的按鈕不太一樣。正常的情況下如果一個對話方塊上出現了預設按鈕，通常那就意謂著「只要你在這個對話方塊上按下Enter鍵就會執行預設按鈕」。例如在Mac下預設按鈕就長得像下圖右邊的樣子：

圖 17-4

它的程式碼如下：



請注意程式的第2行，-default選項可以用來調整按鈕預設的樣式，如果是active就表示使用預設按鈕的樣式，如果是normal表示使用一般按鈕的樣式。特別注意哦!! -default只是用來指定顯示樣式而以，並不會自動讓程式在按下Enter鍵時執行預設按鈕。如果你希望按下Enter鍵時自動執行預設按鈕，可以使用下面的程式：



請特別注意到第3行，bind命令可以用來把鍵盤、滑鼠或系統的事件綁定到視窗元件上，從上面這個例子來看bind後面的「.」是要被綁定的視窗元件，而<Return>是要邦定的事件，它會在鍵盤按下Enter鍵後被觸發，接著後面大括號的內容就是事件觸發時要執行的程式碼。

我們知道.btn2被建立成功後它會變成控制視窗元件本身的命令，它的invoke的功能可以用來接執行本身-command裡的程式碼，而不用透過滑鼠的點擊。

總結上面的說明，只要我們在root視窗上按下Enter鍵，那.btn2就會被執行。關於bind命令以後會有一個專門的章節來說明，請先不要太擔心。這邊需要在意的反而是按鈕的invoke命令，它可以被用來觸發-command裡的程式。

§ 視窗元件命令

在第15章有提到，一但視窗元件建立成功，該視窗元件的path即會變為一個新的命令，而且可以用來控制視窗元件本身。像上面的invoke就是一個很好的例子，往後我們會不斷的看到像這樣子的視窗元件命令，所以請儘快把這個用法吸收起來。另外為了方便以後的說明，我會把這樣子的命令直接稱為「xx的oo命令」，例如： 按鈕的inoke命令、按鈕的cget命令、標籤的cget命令...。

17.4 其它常用的功能

事實上button和entry一樣可以使用-textvariable選項來反應button上的顯示文字。例如：



如果像上面一樣，我們把-textvariable的值設定為變數::btnText，這樣一來只要你用set命令改變::btnText的內容，那按鈕上面顯示的文字也會及時的改變。

§ 關於-textvariable選項

這個選項也是很多視窗元件都會提供的選項，所以往後再遇到它的話就不多說明了哦!!

□ 按鈕的configure命令

如果說你不想要用-textvariable的方式來改變按鈕上的文字，你也可以用按鈕的configure命令來重設-text的值，例如：



請注意到第2行-command裡的程式碼，只要按下.btn2那.btn1的-text選項值將會由Hello改為Hi。

□ 按鈕的cget命令

上面的configure命令可以用來設定選項的值，而cget命令剛好反過來，它可以用來取得按鈕的選項值。舉例來說，如果你想要取得-text的值，那你可以像這樣寫：



請注意到第2行，我用了按鈕的cget命令來取得-text選項的值，然後再透過puts命令輸出。

§ 關於configure及cget

configure及cget是所有視窗元件都會提供的標準命令，而且使用方法都一樣。在以後的章節裡它們會不斷的出現，請大家要知道它們的功能及用法!!