'''
Created on 2017年8月30日

@author: Nick
'''
#_*_coding:utf-8_*_
import tkinter as tk
from tkinter import *

#定義Button回撥函式
def helloButton():
    print('hello world!')
    
    
def cb1():
    print('button1 clicked')

def cb2(event):
    print('button2 clicked')

def cb3():
    print('button3 clicked')
    
def printEventInfo(event):
    print('event.time:'+ event.time)
    print('event.type:'+ event.type)
    print('event.Widgetld:'+ event.Widgetld)
    print('event.KeySymbol:'+ event.KeySymbol)


def changeText():
    if b['text'] == 'text':
        v.set('change')
        print('change')
    else:
        v.set('text')
        print('text')
    


if __name__ == '__main__':
    
    root = tk.Tk()
    
    root.wm_title('Hello')#設定窗體標題

    root.wm_minsize(400, 400)#設定視窗最小化大小
    root.wm_maxsize(2800, 2800)#設定視窗最大化大小
    root.resizable(width=False, height=True)#設定視窗寬度不可變，高度可變
    '''
    root['height'] = 300                     #設定高
    root['width'] = 500                      #設定寬
    root.title('魔方小站')                    #設定標題
    root['bg'] = '#0099ff'                   #設定背景色
    root.geometry('500x300')                 #設定視窗大小  是x不是*
    root.geometry("500x300+120+100")         #設定視窗大小  並初始化桌面位置
    root.resizable(width=False,height=True)  #寬不可變 高可變  預設True
    root.minsize(300,600)                    #視窗可調整的最小值
    root.maxsize(600,1200)                   #視窗可調整的最大值
    root.attributes("-toolwindow", 1)        #工具欄樣式
    root.attributes("-topmost", -1)          #置頂視窗
    root.state("zoomed")                     #視窗最大化
    root.iconify()                           #視窗最小化
    root.attributes("-alpha",1)              #視窗透明化 透明度從0-1，1是不透明，0是全透明 
    root.iconbitmap('c:\\logo.ico')          #設定左上角圖示
    '''

    #app = App(root)


    '''
    1、執行的結果:每次點選一次，呼叫回撥函式command，程式向標準輸出列印'hello button',以上為Button使用方法 
            通過設定relief可以看到Button的不同效果,風格，也可以不加回調函式
    FLAT, GROOVE, RAISED, RIDGE, SOLID, SUNKEN
    relief = FLAT設定，就是一個Label了！！！  
    ''' 
    #在螢幕上建立一塊矩形區域,多作為容器來佈局窗體
    fram_one = Frame(root)   
    Button(fram_one,text = 'helloButton',command = helloButton).pack(side=LEFT)
   
    Button(fram_one,text = 'helloButton',command = helloButton,relief = FLAT).pack(side=LEFT)
    
    Button(fram_one,text = 'helloButton',command = helloButton,relief = GROOVE).pack(side=LEFT)
    
    Button(root,text = 'helloButton',command = helloButton,relief = RAISED).pack(side=LEFT)
    
    Button(fram_one,text = 'helloButton',command = helloButton,relief = RIDGE).pack(side=LEFT)
    
    Button(fram_one,text = 'helloButton',command = helloButton,relief = SOLID).pack(side=LEFT)
    
    Button(fram_one,text = 'helloButton',command = helloButton,relief = SUNKEN).pack(side=RIGHT)
    
    fram_one.pack(side=TOP)

    """
    2、Button顯示影象
    image:可以使用gif影象，影象的載入方法img = PhotoImage(root,file = filepath
    bitmap:使用X11 格式的bitmap,Windows的Bitmap沒法顯示的，在Windows下使用GIMP2.4將windows
    Bitmap轉換為xbm檔案，依舊無法使用.linux下的X11 bitmap編輯器生成的bitmap還沒有測試，但可
            以使用內建的點陣圖。 
    """
    
    #3.與Label一樣，Button也可以同時顯示文字與影象，使用屬性compound
    #影象居下,居上，居右，居左，文字位於影象之上
    fram_two = Frame(root)
    Button(fram_two,text = 'botton',compound = 'bottom',bitmap = 'error').pack(side=LEFT)
    Button(fram_two,text = 'top',compound = 'top',bitmap = 'error').pack(side=LEFT)
    Button(fram_two,text = 'right',compound = 'right',bitmap = 'error').pack(side=LEFT)
    Button(fram_two,text = 'left',compound = 'left',bitmap = 'error').pack(side=LEFT)
    Button(fram_two,text = 'center',compound = 'center',bitmap = 'error').pack(side=LEFT)
    fram_two.pack(side = TOP)
    '''
    4、上例中使用了bind方法，它建立事件與回撥函式（響應函式）之間的關係，每當產生<Enter>事件
            後，程式便自動的呼叫cb2，與cb1,cb3不同的是，它本身還帶有一個引數----event,這個引數傳遞
            響應事件的資訊。
    '''
    fram_three = Frame(root)
    b1 = Button(fram_three,text = 'Button1',command = cb1)
    b2 = Button(fram_three,text = 'Button2')
    b2.bind("<Return>",cb2)
    b3 = Button(fram_three,text = 'Button3',command = cb3)
    
    b1.pack(side = LEFT)
    b2.pack(side = LEFT)
    b3.pack(side = LEFT)
    
    b2.focus_set()
        
    
    b = Button(fram_three,text = 'Infomation')
    b.bind("<Return>",printEventInfo)
    b.pack(side = LEFT)
    b.focus_set()
    
    fram_three.pack(side = TOP)
    
    '''
    5.指定Button的寬度與高度
    width:    寬度
    heigth:    高度
           使用三種方式：
    1.建立Button物件時，指定寬度與高度
    2.使用屬性width和height來指定寬度與高度
    3.使用configure方法來指定寬度與高度
    '''
    
    fram_four = Frame(root)
    #方法1：
    Button1 = Button(fram_four,text = '按鈕1',width = 50,height = 6)
    Button1.pack(side = LEFT)
    
    #方法2：
    Button2 = Button(fram_four,text = '按鈕2')
    Button2['width'] = 30
    Button2['height'] = 3
    Button2.pack(side = LEFT)
    
    #方法 3：
    Button3 = Button(fram_four,text = '按鈕3')
    Button3.configure(width = 10,height = 1)
    Button3.pack(side = LEFT)
    # 上述的三種方法同樣也適合其他的控制元件
    fram_four.pack(side = TOP)
    
    '''
    6.設定Button文字在控制元件上的顯示位置
    anchor：
           使用的值為:n(north-上),s(south-下),w(west-左),e(east-右)和ne-右上,nw-左上,se-右下,sw-左下，就是地圖上的標識位置了，使用
    width和height屬性是為了顯示各個屬性的不同。
    '''
    fram_five = Frame(root)
    for a in ['n','s','e','w','ne','nw','se','sw']:
        Button(fram_five,text = '按鈕位置',anchor = a,width = 20,height = 2).pack(side = LEFT)
    fram_five.pack(side = TOP)
    #也可以單個設定
    
    fram_six = Frame(root)
    Button(fram_six,text = 'anchor1',width = 30,height =4).pack(side = LEFT)
    Button(fram_six,text = 'anchor2',anchor = 'center',width = 30,height =4).pack(side = LEFT)
    Button(fram_six,text = 'anchor3',anchor = 'n',width = 30,height = 4).pack(side = LEFT)
    Button(fram_six,text = 'anchor4',anchor = 's',width = 30,height = 4).pack(side = LEFT)
    Button(fram_six,text = 'anchor5',anchor = 'e',width = 30,height = 4).pack(side = LEFT)
    Button(fram_six,text = 'anchor6',anchor = 'w',width = 30,height = 4).pack(side = BOTTOM)
    Button(fram_six,text = 'anchor7',anchor = 'ne',width = 30,height = 4).pack(side = BOTTOM)
    Button(fram_six,text = 'anchor8',anchor = 'nw',width = 30,height = 4).pack(side = BOTTOM)
    Button(fram_six,text = 'anchor9',anchor = 'se',width = 30,height = 4).pack(side = BOTTOM)
    Button(fram_six,text = 'anchor10',anchor = 'sw',width = 30,height = 4).pack(side = BOTTOM)
    fram_six.pack(side = TOP)
    
    
    '''
    7.改變Button的前景色與背景色
    fg: 前景色
    bg：背景色
    '''
    fram_seven = Frame(root)
    Button(fram_seven,text = '前景色',width = 30,height = 5,fg = 'red').pack(side = LEFT)
    Button(fram_seven,text = '背景色',width = 30,height = 5,fg = 'green').pack(side = RIGHT)
    fram_seven.pack(side = TOP)
    
    
    
    
    '''
    8.設定Button的邊框
    bd(bordwidth):預設為1或2個畫素
    '''
    # 建立5個Button邊框寬度依次為：0，2，4，6，8,10
    fram_eight = Frame(root)
    for i in [0,2,4,6,8,10]:
        Button(fram_eight,text = '邊框'+ str(i),command = helloButton,bd = i).pack(side = LEFT)
    fram_eight.pack(side = TOP)
    
    
    '''
    9.設定Button的風格
    relief = flat/groove/raised/ridge/solid/sunken
    '''
    fram_nine = Frame(root)
    for r in ['flat', 'groove', 'raised', 'ridge', 'solid', 'sunken']:
        Button(fram_nine,text = '風格'+ r,command = helloButton,relief = r).pack(side = LEFT)
    fram_nine.pack(side = TOP)
    
    
    
    '''
    10.設定Button狀態
    state = normal/active/disabled
    '''
    fram_ten = Frame(root)
    for s in ['normal','active','disabled']:
        Button(fram_ten,text = '狀態' + s,command = helloButton,state = s).pack(side =LEFT)
    fram_ten.pack(side = TOP)
    
    
    
    '''
    11.繫結Button與變數
           設定Button在textvariable屬性
    '''
    fram_elev = Frame(root)
    v  = StringVar()
    v.set('change')
    Button(fram_elev,textvariable = v,command = changeText).pack(side = LEFT)
    fram_elev.pack(side =TOP)

    
    
    
    
    root.mainloop()