Python GUI Tk : Layout

Layout: anchor NW, W and E

from Tkinter import *

class App:
    def __init__(self, master):
        master.geometry("300x200")
        fm = Frame(master)
        Button(fm, text='side=TOP, anchor=NW').pack(side=TOP, anchor=NW, expand=YES)
        Button(fm, text='side=TOP, anchor=W').pack(side=TOP, anchor=W, fill=X, expand=YES)
        Button(fm, text='side=TOP, anchor=E').pack(side=TOP, anchor=E, expand=YES)
        fm.pack(fill=BOTH, expand=YES)

        
root = Tk()
root.option_add('*font', ('verdana', 12, 'bold'))
root.title("Pack - Example 11")
display = App(root) 

root.mainloop() 

Layout: anchor W side TOP

from Tkinter import *

class App:
    def __init__(self, master):
        master.geometry("300x200")
        fm = Frame(master)
        Button(fm, text='side=TOP, anchor=W').pack(side=TOP, anchor=W, expand=YES)
        Button(fm, text='side=TOP, anchor=W').pack(side=TOP, anchor=W, expand=YES)
        Button(fm, text='side=TOP, anchor=W').pack(side=TOP, anchor=W, expand=YES)
        fm.pack(fill=BOTH, expand=YES)

        
root = Tk()
root.option_add('*font', ('verdana', 12, 'bold'))
root.title("Pack - Example 11")
display = App(root)
root.mainloop()

Layout: side TOP, LEFT

from Tkinter import *

class App:
    def __init__(self, master):
        fm = Frame(master)
        Button(fm, text='Top').pack(side=TOP, anchor=W, fill=X, expand=YES)
        Button(fm, text='Center').pack(side=TOP, anchor=W, fill=X, expand=YES)
        Button(fm, text='Bottom').pack(side=TOP, anchor=W, fill=X, expand=YES)
        Button(fm, text='Left').pack(side=LEFT)
        Button(fm, text='This is the Center button').pack(side=LEFT)
        Button(fm, text='Right').pack(side=LEFT)        
        fm.pack(fill=BOTH, expand=YES)
        
root = Tk()
root.option_add('*font', ('verdana', 12, 'bold'))
root.title("Pack - Example 12")
display = App(root)
root.mainloop()

Layout: side TOP and LEFT

from Tkinter import *

class App:
    def __init__(self, master):
        fm = Frame(master)
        Button(fm, text='Top').pack(side=TOP, anchor=W, fill=X, expand=YES)
        Button(fm, text='Center').pack(side=TOP, anchor=W, fill=X, expand=YES)
        Button(fm, text='Bottom').pack(side=TOP, anchor=W, fill=X, expand=YES)
        fm.pack(side=LEFT, fill=BOTH, expand=YES)
        fm2 = Frame(master)
        Button(fm2, text='Left').pack(side=LEFT)
        Button(fm2, text='This is the Center button').pack(side=LEFT)
        Button(fm2, text='Right').pack(side=LEFT)        
        fm2.pack(side=LEFT, padx=10)
        
root = Tk()
root.option_add('*font', ('verdana', 12, 'bold'))
root.title("Pack - Example 13")
display = App(root)
root.mainloop()

Layout: LEFT LEFT and LEFT

from Tkinter import *

class App:
    def __init__(self, master):
        fm = Frame(master)
        Button(fm, text='Left').pack(side=LEFT)
        Button(fm, text='This is the Center button').pack(side=LEFT)
        Button(fm, text='Right').pack(side=LEFT)        
        fm.pack()

root = Tk()
root.option_add('*font', ('verdana', 12, 'bold'))
root.title("Pack - Example 2")
display = App(root)
root.mainloop()

Layout: fit text side

from Tkinter import *

class App:
    def __init__(self, master):
        fm = Frame(master)
        Button(fm, text='Top').pack(side=TOP)
        Button(fm, text='This is the Center button').pack(side=TOP)
        Button(fm, text='Bottom').pack(side=TOP)        
        fm.pack()

root = Tk()
root.option_add('*font', ('verdana', 12, 'bold'))
root.title("Pack - Example 2a")
display = App(root)
root.mainloop()

Layout: side TOP LEFT LEFT

from Tkinter import *

class App:
    def __init__(self, master):
        fm = Frame(master)
        Button(fm, text='Left').pack(side=TOP)
        Button(fm, text='Center').pack(side=LEFT)
        Button(fm, text='Right').pack(side=LEFT)        
        fm.pack()

root = Tk()
root.option_add('*font', ('verdana', 12, 'bold'))
root.title("Pack - Example 3")
display = App(root)
root.mainloop()

Layout: frame fill BOTH expand YES

from Tkinter import *

class App:
    def __init__(self, master):
        master.geometry("300x200")
        fm = Frame(master)
        Button(fm, text='Left').pack(side=LEFT)
        Button(fm, text='Center').pack(side=LEFT)
        Button(fm, text='Right').pack(side=LEFT)
        fm.pack(fill=BOTH, expand=YES)

        
root = Tk()
root.option_add('*font', ('verdana', 12, 'bold'))
root.title("Pack - Example 5")
display = App(root)
root.mainloop()

Layout: pack side LEFT and expand YES

from Tkinter import *

class App:
    def __init__(self, master):
        master.geometry("300x200")
        fm = Frame(master)
        Button(fm, text='Left').pack(side=LEFT, expand=YES)
        Button(fm, text='Center').pack(side=LEFT, expand=YES)
        Button(fm, text='Right').pack(side=LEFT, expand=YES)
        fm.pack(fill=BOTH, expand=YES)

        
root = Tk()
root.option_add('*font', ('verdana', 12, 'bold'))
root.title("Pack - Example 6")
display = App(root)
root.mainloop()

Layout: TOP, CENTER and BOTTOM

from Tkinter import *

class App:
    def __init__(self, master):
        master.geometry("300x200")
        fm = Frame(master)
        Button(fm, text='Top').pack(side=TOP, expand=YES)
        Button(fm, text='Center').pack(side=TOP, expand=YES)
        Button(fm, text='Bottom').pack(side=TOP, expand=YES)
        fm.pack(fill=BOTH, expand=YES)

        
root = Tk()
root.option_add('*font', ('verdana', 12, 'bold'))
root.title("Pack - Example 6a")
display = App(root)
root.mainloop()

Layout: top, center and bottom fill

from Tkinter import *

class App:
    def __init__(self, master):
        master.geometry("300x200")
        fm = Frame(master)
        Button(fm, text='Top').pack(side=TOP, fill=BOTH, expand=1)
        Button(fm, text='Center').pack(side=TOP, fill=BOTH, expand=1)
        Button(fm, text='Bottom').pack(side=TOP, fill=BOTH, expand=1)
        fm.pack(fill=BOTH, expand=YES)

        
root = Tk()
root.option_add('*font', ('verdana', 12, 'bold'))
root.title("Pack - Example 9a")
display = App(root)
root.mainloop()

Layout: side LEFT and fill

from Tkinter import *

class App:
    def __init__(self, master):
        master.geometry("300x200")
        fm = Frame(master)
        Button(fm, text='Left').pack(side=LEFT, fill=BOTH, expand=1)
        Button(fm, text='Center').pack(side=LEFT, fill=BOTH, expand=1)
        Button(fm, text='Right').pack(side=LEFT, fill=BOTH, expand=1)
        fm.pack(fill=BOTH, expand=YES)

        
root = Tk()
root.option_add('*font', ('verdana', 12, 'bold'))
root.title("Pack - Example 9")
display = App(root)
root.mainloop()

Layout: fill X

from Tkinter import *

class App:
    def __init__(self, master):
        master.geometry("300x200")
        fm = Frame(master)
        Button(fm, text='Top').pack(side=TOP,    fill=X, expand=YES)
        Button(fm, text='Center').pack(side=TOP, fill=X, expand=YES)
        Button(fm, text='Bottom').pack(side=TOP, fill=X, expand=YES)
        fm.pack(fill=BOTH, expand=YES)

        
root = Tk()
root.option_add('*font', ('verdana', 12, 'bold'))
root.title("Pack - Example 8a")
display = App(root)
root.mainloop()

Layout: fill X and Expand YES NO

from Tkinter import *

class App:
    def __init__(self, master):
        master.geometry("300x200")
        fm = Frame(master)
        Button(fm, text='Left').pack(side=LEFT, fill=X, expand=NO)
        Button(fm, text='Center').pack(side=LEFT, fill=X, expand=NO)
        Button(fm, text='Right').pack(side=LEFT, fill=X, expand=YES)
        fm.pack(fill=BOTH, expand=YES)

        
root = Tk()
root.option_add('*font', ('verdana', 12, 'bold'))
root.title("Pack - Example 8")
display = App(root)
root.mainloop()

Layout: fill X and expand YES

from Tkinter import *

class App:
    def __init__(self, master):
        master.geometry("300x200")
        fm = Frame(master, width=300)
        Button(fm, text='Left').pack(side=LEFT, fill=X, expand=YES)
        Button(fm, text='Center').pack(side=LEFT, fill=X, expand=YES)
        Button(fm, text='Right').pack(side=LEFT, fill=X, expand=YES)
        fm.pack(fill=BOTH, expand=YES)

        
root = Tk()
root.option_add('*font', ('verdana', 12, 'bold'))
root.title("Pack - Example 7")
display = App(root)
root.mainloop()

Layout: side TOP and fill X

from Tkinter import *

class App:
    def __init__(self, master):
        master.geometry("300x200")
        fm = Frame(master)
        Button(fm, text='Top').pack(side=TOP, fill=X)
        Button(fm, text='Center').pack(side=TOP, fill=X)
        Button(fm, text='Bottom').pack(side=TOP, fill=X)
        fm.pack(fill=BOTH, expand=YES)

        
root = Tk()
root.option_add('*font', ('verdana', 12, 'bold'))
root.title("Pack - Example 7a")
display = App(root)
root.mainloop()

Use layout: fill

from Tkinter import *
def hello(): print 'Hello, world!'

win = Tk() 
win.title('Hello, Tkinter!')
win.geometry('200x100')

btn = Button(win, text='Hello', command=hello)
btn.pack(expand=YES, fill=BOTH)

mainloop()

Use pack for a frame

from Tkinter import *

Label(text='Hello GUI world!').pack()

mainloop() 

Set expand to YES and fill to BOTH

from Tkinter import *

Label(text='Hello GUI world!').pack(expand=YES, fill=BOTH)

mainloop() 

Add a label to the top of a frame

from Tkinter import *

widget = Label()
widget['text'] = 'Hello GUI world!' 
widget.pack(side=TOP)
mainloop()

Add a label to the center of a frame

from Tkinter import *
root = Tk()
widget = Label(root)
widget.config(text='Hello GUI world!') 
widget.pack(side=TOP, expand=YES, fill=BOTH)
root.title('gui1g.py')
root.mainloop()

Adds multi-widget layouts: TOP, RIGHT and LEFT

from Tkinter import *

def greeting():
    print 'Hello'

win = Frame()  
win.pack()
Label(win,  text='Hello container world').pack(side=TOP)          
Button(win, text='Hello', command=greeting).pack(side=LEFT)
Button(win, text='Quit',  command=win.quit).pack(side=RIGHT)

win.mainloop()

Alternative packing/clipping order: LEFT, RIGHT and TOP

from Tkinter import *

def greeting():
    print 'Hello stdout world!...'

win = Frame()  
win.pack()
Button(win, text='Hello', command=greeting).pack(side=LEFT)
Button(win, text='Quit',  command=win.quit).pack(side=RIGHT)
Label(win,  text='Hello container world').pack(side=TOP)          

win.mainloop()

Creation order irrelevant to clipping

from Tkinter import *

def greeting():
    print 'Hello...'

win = Frame()  
win.pack()

B1 = Button(win, text='Hello', command=greeting)
B2 = Button(win, text='Quit',  command=win.quit)
LB = Label(win,  text='Hello container world')

B1.pack(side=BOTTOM) #LEFT)
B2.pack(side=RIGHT)
LB.pack(side=TOP)

win.mainloop()

Packing order and sides determine layout: make parents expandable

from Tkinter import *

def greeting():
    print 'Hello...'

win = Frame()  
win.pack(side=TOP, expand=YES, fill=BOTH)
Button(win, text='Hello', command=greeting).pack(side=LEFT, fill=Y)
Label(win,  text='Hello container world').pack(side=TOP)
Button(win, text='Quit',  command=win.quit).pack(side=RIGHT, expand=YES,fill=X)

win.mainloop()

Use anchor to position, instead of fill to stretch

from Tkinter import *

def greeting():
    print 'Hello stdout world!...'

win = Frame()  
win.pack()
Button(win, text='Hello', command=greeting).pack(side=LEFT, anchor=N)
Label(win,  text='Hello container world').pack(side=TOP)          
Button(win, text='Quit',  command=win.quit).pack(side=RIGHT)

win.mainloop()

Layout button in a row with different padx

from Tkinter import *

class AllTkinterWidgets:
    def __init__(self, master):
        frame = Frame(master, width=500, height=400, bd=1)
        frame.pack()

        iframe1 = Frame(frame, bd=2, relief=SUNKEN)
        Button(iframe1, text='Button').pack(side=LEFT, padx=5)
        Checkbutton(iframe1, text='CheckButton').pack(side=LEFT, padx=5)

        v=IntVar()
        Radiobutton(iframe1, text='Button', variable=v,
                    value=3).pack(side=RIGHT, anchor=W)
        Radiobutton(iframe1, text='Dio', variable=v,
                    value=2).pack(side=RIGHT, anchor=W)
        Radiobutton(iframe1, text='Ra', variable=v,
                    value=1).pack(side=RIGHT, anchor=W)
        iframe1.pack(expand=1, fill=X, pady=10, padx=5)


    
root = Tk()
#root.option_add('*font', ('verdana', 10, 'bold'))
all = AllTkinterWidgets(root)
root.title('Tkinter Widgets')
root.mainloop()

Layout components in grid

from Tkinter import *
import tkSimpleDialog

class MyDialog(tkSimpleDialog.Dialog):

    def body(self, master):

        Label(master, text="First:").grid(row=0)
        Label(master, text="Second:").grid(row=1)

        self.e1 = Entry(master)
        self.e2 = Entry(master)

        self.e1.grid(row=0, column=1)
        self.e2.grid(row=1, column=1)
        return self.e1 # initial focus

    def apply(self):
        first = self.e1.get()
        second = self.e2.get()
        print first, second # or something

root = Tk()
d = MyDialog(root)
print d.result

Layout three button in a row

from Tkinter import *

class App:
  def __init__(self, root):
    fm = Frame(root, width=300, height=200, bg="blue")
    fm.pack(side=TOP, expand=NO, fill=NONE)
    
    Button(fm, text="Button 1", width=10).pack(side=LEFT)
    Button(fm, text="Button 2", width=10).pack(side=LEFT)
    Button(fm, text="Button 3", width=10).pack(side=LEFT)
    

root = Tk()
display = App(root)
root.mainloop()

Pack side in TOP

from Tkinter import *

class App:
  def __init__(self, root):
    fm = Frame(root, width=300, height=200, bg="blue")
    fm.pack(side=TOP, expand=NO, fill=NONE)
    
    Button(fm, text="Button 1", width=10).pack(side=LEFT)
    Button(fm, text="Button 2", width=10).pack(side=TOP)
    Button(fm, text="Button 3", width=10).pack(side=LEFT)
    

root = Tk()
display = App(root)
root.mainloop()

Nested containers

from Tkinter import *

class MyApp:
  def __init__(self, parent):
    
    self.myParent = parent 

    self.myContainer1 = Frame(parent) 
    self.myContainer1.pack()
    
    self.top_frame = Frame(self.myContainer1) 
    self.top_frame.pack(side=TOP,
      fill=BOTH, 
      expand=YES,
      )  

    self.left_frame = Frame(self.top_frame, background="red",
      borderwidth=5,  relief=RIDGE,
      height=250, 
      width=50, 
      )
    self.left_frame.pack(side=LEFT,
      fill=BOTH, 
      expand=YES,
      )

    self.right_frame = Frame(self.top_frame, background="tan",
      borderwidth=5,  relief=RIDGE,
      width=250,
      )
    self.right_frame.pack(side=RIGHT,
      fill=BOTH, 
      expand=YES,
      ) 


root = Tk()
myapp = MyApp(root)
root.mainloop()

Setting up the widgets and controlling their appearance and location.

from Tkinter import *

class MyApp:
  def __init__(self, parent):
    
    button_width = 6      
    
    button_padx = "2m"    
    button_pady = "1m"    

    buttons_frame_padx =  "3m"   
    buttons_frame_pady =  "2m"       
    buttons_frame_ipadx = "3m"   
    buttons_frame_ipady = "1m"   

    self.myParent = parent   
    self.buttons_frame = Frame(parent)
    
    self.buttons_frame.pack(    
      ipadx=buttons_frame_ipadx,  
      ipady=buttons_frame_ipady,  
      padx=buttons_frame_padx,    
      pady=buttons_frame_pady,    
      )    
    
  
    self.button1 = Button(self.buttons_frame, command=self.button1Click)
    self.button1.configure(text="OK", background= "green")
    self.button1.focus_force()       
    self.button1.configure( 
      width=button_width,  
      padx=button_padx,     
      pady=button_pady     
      )

    self.button1.pack(side=LEFT)  
    self.button1.bind("<Return>", self.button1Click_a)  
    
    self.button2 = Button(self.buttons_frame, command=self.button2Click)
    self.button2.configure(text="Cancel", background="red")  
    self.button2.configure( 
      width=button_width,  
      padx=button_padx,     
      pady=button_pady     
      )
  
    self.button2.pack(side=RIGHT)
    self.button2.bind("<Return>", self.button2Click_a)   
    
  def button1Click(self):      
    if self.button1["background"] == "green":  
      self.button1["background"] = "yellow"
    else:
      self.button1["background"] = "green"
  
  def button2Click(self): 
    self.myParent.destroy()     
    
  def button1Click_a(self, event):  
    self.button1Click()
        
  def button2Click_a(self, event): 
    self.button2Click() 
  
  
      
root = Tk()
myapp = MyApp(root)
root.mainloop()

Creating a GUI object and associating it with its parent: packing, containers vs. widgets

from Tkinter import *

root = Tk()

myContainer1 = Frame(root)  
myContainer1.pack()         

root.mainloop()     

Using the grid geometry manager

from Tkinter import *
import tkSimpleDialog

class MyDialog(tkSimpleDialog.Dialog):

    def body(self, master):
        Label(master, text="First:").grid(row=0, sticky=W)
        Label(master, text="Second:").grid(row=1, sticky=W)
    
        self.e1 = Entry(master)
        self.e2 = Entry(master)
    
        self.e1.grid(row=0, column=1)
        self.e2.grid(row=1, column=1)
    
        self.cb = Checkbutton(master, text="Hardcopy")
        self.cb.grid(row=2, columnspan=2, sticky=W)
    
    def apply(self):
        first = self.e1.get()
        second = self.e2.get()
        print first, second

root = Tk()
d = MyDialog(root)
print d.result

Set positions for components

from Tkinter import *

root = Tk()

def callback():
    print "called the callback!"

toolbar = Frame(root)

b = Button(toolbar, text="new", width=16, command=callback)
b.pack(side=LEFT, padx=20, pady=20)

b = Button(toolbar, text="open", width=6, command=callback)
b.pack(side=LEFT, padx=2, pady=2)

toolbar.pack(side=TOP, fill=X)

mainloop()

Pack side RIGHT and LEFT

from Tkinter import *

root = Tk()

def callback():
    print "called the callback!"

toolbar = Frame(root)

b = Button(toolbar, text="new", width=16, command=callback)
b.pack(side=RIGHT, padx=20, pady=20)

b = Button(toolbar, text="open", width=6, command=callback)
b.pack(side=RIGHT, padx=2, pady=2)

toolbar.pack(side=TOP, fill=X)

mainloop()

Pack layout manager:Button component placed against top of window

from Tkinter import *

class PackDemo( Frame ):
   def __init__( self ):
      Frame.__init__( self )
      self.master.title( "Packing Demo" )
      self.master.geometry( "400x150" )
      self.pack( expand = YES, fill = BOTH )

      self.button1 = Button( self, text = "Add Button",
         command = self.addButton )

      self.button1.pack( side = TOP )


   def addButton( self ):
      Button( self, text = "New Button" ).pack( pady = 5 )
      
def main():
   PackDemo().mainloop()

if __name__ == "__main__":
   main()

Pack layout manager: component placed against bottom of window, fills all available vertical and horizontal space

from Tkinter import *

class PackDemo( Frame ):
   def __init__( self ):
      Frame.__init__( self )
      self.master.title( "Packing Demo" )
      self.master.geometry( "400x150" )
      self.pack( expand = YES, fill = BOTH )

      self.button2 = Button( self, text = "expand = NO, fill = BOTH" )
      self.button2.pack( side = BOTTOM, fill = BOTH )
      
def main():
   PackDemo().mainloop()

if __name__ == "__main__":
   main()

Component Placed against left side of window, fills all available horizontal space

from Tkinter import *

class PackDemo( Frame ):
   def __init__( self ):
      Frame.__init__( self )
      self.master.title( "Packing Demo" )
      self.master.geometry( "400x150" )
      self.pack( expand = YES, fill = BOTH )

      self.button3 = Button( self, text = "expand = YES, fill = X" )
      self.button3.pack( side = LEFT, expand = YES, fill = X )
      
def main():
   PackDemo().mainloop()

if __name__ == "__main__":
   main()

Component Placed against right side of window, fills all available vertical space

from Tkinter import *

class PackDemo( Frame ):
   def __init__( self ):
      Frame.__init__( self )
      self.master.title( "Packing Demo" )
      self.master.geometry( "400x150" )
      self.pack( expand = YES, fill = BOTH )

      self.button4 = Button( self, text = "expand = YES, fill = Y" )
      self.button4.pack( side = RIGHT, expand = YES, fill = Y )   
     
def main():
   PackDemo().mainloop()

if __name__ == "__main__":
   main()