GUIs for Python — A Introduction to Tkinter
By: James Denbow
Tags: Python, Tk, Programming, Tkinter, GUI

4. Positioning our Widgets

To this point all our widgets have been stacked directly under the previous widget, centered in our Window / Frame. Although these GUIs are perfectly functional they do not look all that appealing, so let us cover how to move our widgets around.

To this point following we have been using a positioning method and you may not have even realized it. In order for a Widget to even appear on the Window you must call a positioning method on it, up until this point we have been calling the “ pack() ” positioning method. However, there are numerous other positioning methods, in this section we will cover the 3 most common.

Pack — Simple stacking

The pack positioning method is used to simply “pack” the given widget into the next available space within the window where the widget can fit. Most commonly this causes the widgets to be stacked vertically and centered within the window.

givenWidget = Label( ... ) givenWidget.pack()

The pack method does give limited control over how the widgets are placed, as we saw with the login page example frames, you can use the “ side ” argument to tell Tkinter where to pack in the following widget.

#The default value, packs widget along the top side of the parent

givenWidget.pack(side = "top") #Packs widget along the bottom side of the parent

givenWidget.pack(side = "bottom") #Other acceptable inputs are "left" and "right" respectively

Place — Exact positioning

The place positioning method is used to place widgets at exact positions within either the Window or Frame. There are two different ways to use place, either by pixels or by relative position.

When using pixels, use both the “ x ” and “ y ” arguments with the exact number of pixels in each axis:

givenWidget = Label( ... ) givenWidget.place(x = "pixelAmount", y = "pixelAmount")

When using the relative position, use both the “ relx ” and “ rely ” arguments with a float number between 0 and 1.0 for each axis:

givenWidget.place(relx = "percentAmount", rely = "percentAmount")

Grid — Break down the window into a grid system

By far the most popular positioning method the grid method is used to break down the given Window / Frame into a series of rows and columns that can be used to place elements within that grid.

givenWidget = Label( ... ) givenWidget.grid(row = "numberBefore", column = "numberBefore")

Example of what we have learned so far

Continuing our Login Page example from before lets wrap it up using our positioning we just learned. We will be adjusting the top frame so that each label is to the left of the given entry field.

from tkinter import * def loginHandler(username, password):

#Function that handles the login operations root_window = Tk() #Creates window

root_window.title("Tutorial Login") #Gives title to window

root_window.geometry("250x100") #Makes the window size 500x500 #Create our Frames

topFrame = Frame(root_window).grid()

bottomFrame = Frame(root_window).grid(row = 1) #Create Label and Entry for username

Label(topFrame, text = "Username:").grid(row = 0, column = 0)

userEntry = Entry(topFrame)

userEntry.grid(row = 0, column = 1) #Create Label and Entry for password

Label(topFrame, text = "Password:").grid(row = 1, column = 0)

passwordEntry = Entry(topFrame)

passwordEntry.grid(row = 1, column = 1) #Get inputted data from the Entry widgets

submittedUsername = userEntry.get()

submittedPassword = passwordEntry.get() #Create button that calls your loginHandler Function

fun = lambda: loginHandler(submittedUsername, submittedPassword)

Button(bottomFrame, text = "Login", command = fun).grid(column=1) root_window.mainloop()

Running this code gives a more styled version of our login screen, this is still just touching the surface of the styling options within Tkinter.