Tkinter Lesson 2 Notes: Placing Widgets in a GUI

• Shortcut
  • Earlier, we took two commands to put a widget on a page
    button = Button(root, text="Click")
button.grid()
  • It is easier to combine these two on a single line
    Button(root, text = "Click").grid()
  • If a widget is going to be used (bound to an action), then you will need to use both lines of code (assign the widget to a variable name, then grid() it on a separate line). If a widget is useless (just decoration or a Label), it can be created on a single line.
• Geometry Managers
  • The geometry manager is responsible for arranging widgets in a window.
  • Tkinter has three different geometry managers available: pack(), grid(), place()
  • Each manager does the same essential job, but approaches it in a different method.
  • A window should use only one geometry manager (don't mix and match)
• Geometry Manager Choices
  • pack()
    • Quick and dirty "stuff it on the screen" method.
    • Limited control over placement.
    • Good for very simple windows. Doesn't scale up well.
  • grid()
    • Layout the screen based on the concept of a grid or table, with each element being in a particular row and column.
    • Good combination of control and ease of use.
  • place()
    • Specify the layout based on relative x,y coordinates.
    • More complicated, but gives most control over placement.
• grid() Basics
  • grid(row=#, column=#)
  • row declares which row to put widget in
  • column declares which column to put widget in
  • If no row is specified, widget goes on a new row
  • If no column is specified, widget goes in column 0 (first column)
• The grid() Concept
  
  
  • Imagine the window broken into a grid of rows and columns (like in a spreadsheet or a table).
  • You may have as many rows or columns as you want
  • The row and column numbers start at zero.
  • To place an item in the window, you declare which row and which column the item is in.
• Using the Concept
  • For each widget, designate which row and column it is in.
  • You do not have to declare an item for each space in the grid. Some column / row combinations can be empty.
    
    # row 0 -------------------------------------------
    Label(root, text="Name:").grid(row=0, column=0)
    Entry(root,width=30).grid(row=0, column=1)
    # row 1 -------------------------------------------
    Label(root, text = "Password:").grid(row=1, column=0)
    Entry(root, width=30).grid(row=1, column=1)
    # row 2 -------------------------------------------
    Button(root, text="Enter").grid(row=2, column=1)
    
• Alignment using "sticky"
  • If a column or row is larger than a widget, the widget is aligned using the "sticky =" option.
  • sticky options are N, E, S, and W.
  • You may use one option or a combination
  • sticky = N
  • sticky = NW #aligns in top-left corner
  • sticky = EW #stretches widget to fill width of column
  • sticky = NS #stretches widget to fill height of row
  • If sticky is not set, the widget is centered by default.
• sticky Examples
  
  
  sticky = E # Enter button is on the right

  
  sticky = W # Enter button is on the left

  
  sticky = EW # Enter button stretches across the window

• Spanning
  
  • A single widget can take up more than one row or column
  • To make a widget span more than one row or column, use the following:
  • rowspan = # spans rows
  • columnspan = # spans columns
  • Sample Code:
    Entry(root,width=30).grid(row=0, column=1, columnspan = 2)
Entry(root,width=30).grid(row=1, column=1, columnspan = 2)
• Padding Widgets
  • Empty space around a widget is called "padding"
  • Set the padding on the sides (left and right) using padx = #.
    Set the padding on the top and bottom of a widget using pady = #
  • If no padx or pady is specified, the default is to have no padding at all (padx = 0, pady = 0)
• Padding Examples

  padx=0, pady=0	padx=4
  pady=4	padx=4, pady = 4

• Sample Code
  
  
  from Tkinter import *
  root = Tk()
  root.title("Quiz")
  q1 = "Favorite color: "
  q2 = "Favorite dessert: "
  q3 = "Favorite book: "
  q4 = "Favorite pet: "

  Label(root, text = "My Favorite Things", fg = '#006699', font = ('Papyrus', 20)).grid(row=0, column = 0, columnspan = 2)

  
  list = [q1, q2, q3, q4]
  rownum = 1
  colnum = 0
  for item in list:
      lbl = Label(root, text = item)
      lbl.grid(row = rownum, column = colnum, pady = 2, sticky = W)
      entry = Entry(root, width = 20)
      entry.grid(row = rownum, column = colnum+1, pady = 2)
      rownum += 1
      colnum = 0
  Button(root, text = "Tell Us").grid(row = rownum, column = 0, columnspan = 2, sticky = EW, pady = 4)