TKinter · Part 1 of 2

Tkinter layout: pack(), grid(), place() and frames

Lay out a Python GUI with Tkinter's 3 layout managers, then tidy it up with frames.

#computer science #gcse #python #tkinter #wjec

Next part →

Lay out a Python GUI with Tkinter's 3 layout managers, then tidy it up with frames. This lesson joins videos 52 to 55 of my WJEC GCSE Computer Science Unit 2 Python series into one walkthrough. You will stack widgets with pack() and put them side by side with side="left", padx and pady. Then you line up a sign-up form in rows and columns with grid(), using columnspan and sticky="e", put widgets at exact pixel positions with place() and see why it breaks when text or window sizes change, and group widgets inside a Frame so each part of a form can use its own layout. Chapters 0:00 Introduction 0:39 Layout with pack() 2:43 Layout with grid() 6:07 Layout with place() 9:05 Frames 12:04 Summary Each part ends with a "Your turn" task, so pause and try it before the next chapter. From section G, Graphical user interfaces with Tkinter (specification references 2.2.1 and 2.3.1). The narration uses an AI clone of my own voice.

Transcript

Tkinter layout.
In this video, you will learn the 3 ways to lay out widgets in a Tkinter window, and
how to group them with frames.
There are 4 parts. First, you will stack widgets with pack, and put them side by
side with space around them. Next, you will line up labels and entry boxes in rows
and columns with grid. Then you will put widgets at exact positions with place, and
see why it goes wrong when things change size.
Finally, you will group widgets inside frames to build a tidy form.
Each part ends with a task for you to try.
Pause the video when you get there, and try it before you move on.
Part 1. Layout with pack. You will lay out widgets with pack, using side to place
them next to each other, and padx and pady to add space.
Click File, then New File. Import tkinter as tk
and create a 400 by 200 window titled Tuck Shop.
Add the heading label.
Set heading_label equals tk.Label, with the window, text equals
Tuck Shop, and font Arial 16.
Then call heading_label.pack, with pady equals 10 in the brackets.
pady leaves 10 pixels above and below the label.
Add the info_label with the text Choose a snack, and pack it with empty brackets, no
options. It sits under the heading, because pack stacks widgets from the top down.
Add the apple_button with tk.Button and the text Apple.
Call apple_button.pack, with side equals left in speech marks, padx equals
10, and pady equals 10. Side equals left puts widgets next to each other, and
padx adds space to the left and right.
Add the banana button with the text Banana and the raisins button with the text
Raisins, packed the same way.
Add window.mainloop, save the file as pack_layout.py, and press
F5 to run it. The heading and Choose a snack are centred at the top, one under the
other. Below them, the Apple, Banana and Raisins buttons sit side by side from the
left edge, with 20 pixels between each button.
Now remove side equals left from the 3 buttons and run it again.
The buttons now stack underneath each other.
Put side equals left back, and change padx to 30.
Run it again to see the gaps between the buttons grow.
Your turn. Add a fourth button with the text Crisps, packed the same way as the
others, then run it and check that it appears to the right of Raisins.
Part 2. Layout with grid. You will line up labels and entry boxes in rows and
columns with grid, using sticky and columnspan.
Open IDLE, click File, then New File.
Type import tkinter as tk, then make the window with
window equals tk.Tk, and give it the title "Club Sign Up".
Leave out geometry this time, so the window grows to fit whatever you put in it.
Now the heading. Make heading_label, a label with the text "After School Club"
in Arial, size 14. Then call heading_label.grid, and in the brackets
type row equals 0, column equals 0, columnspan equals 2, and pady
equals 10. Rows and columns count from 0 at the top left.
Columnspan equals 2 lets the heading stretch across both columns, so it sits in the
middle of the form.
Next, the first row of the form.
Make name_label with the text "Name", and grid it in row 1, column 0.
Then make name_entry, an entry box, and grid it in row 1, column
1. Add padx equals 5 and pady equals 5 to both so they have a little space
around them. Labels go in column 0 and boxes go in column 1.
Add the "Age" and "Form group" rows the same way.
The age label and age entry go in row 2.
The form label, with the text "Form group", and the form entry go in row 3.
Each new row number puts the widgets one line lower.
Press F5 to run it. Look at the labels.
Column 0 is as wide as its longest label, "Form group", so the shorter labels,
"Name" and "Age", sit in the middle of the column.
They do not line up with each other, and that looks untidy.
Close the window and add sticky equals, in speech marks, e, to each label's grid.
Sticky tells a widget which side of its cell to stick to, using compass points.
The letter e means east, which is the right hand side.
Now every label sits on the right of column 0, right next to its box.
Now the button. Make sign_up_button with the text "Sign up".
Grid it in row 4, column 0, with columnspan equals 2, and sticky equals, in speech
marks, e w. The letters e and w mean east and west, so the button stretches
from the left edge to the right edge of both columns.
Add padx equals 5 and pady equals 10.
Finally, type window.mainloop, with brackets, on the last line.
Click File, then Save As, save the file as grid_layout.py, and press
F5 to run it again.
The "Club Sign Up" window shows "After School Club" centred across the top.
Under it are 3 rows, with the labels "Name", "Age" and "Form group"
lined up on the right of column 0, and an entry box beside each in column 1.
The "Sign up" button stretches across the full width at the bottom.
Your turn. Add a fifth field called "Email" in row 4, with its label stuck to the
east and its entry box in column 1, then move the "Sign up" button down to row 5
and run it to check everything still lines up.
Part 3. Layout with place. You will put widgets at exact x and y
positions with place, and see why this is a poor choice when text or window sizes
change.
Open IDLE, click File, then New File.
Type import tkinter as tk, make the window, and give it the title
"Book Return". Then type window.geometry, and in brackets and speech marks,
300x150, so the window is 300 pixels wide and 150
pixels high.
Make book_label, a label with the text "Book number".
Then call book_label.place, and in the brackets type x equals 20, comma,
y equals 20. The x value is the number of pixels from the left of the window, and
the y value is the number of pixels from the top.
So this label starts 20 pixels in and 20 pixels down.
Now make book_entry, an entry box with width equals 15.
Place it at x equals 120, y equals 20.
It has the same y value as the label, so it sits on the same line, and starting at
120 pixels leaves room for the label text.
Make return_button, a button with the text "Return book".
Place it at x equals 120, y equals 60.
The x value matches the entry box, so the button lines up under it, and 60 pixels
down puts it on the next line.
Type window.mainloop, with brackets, at the end.
Click File, then Save As, save the file as place_layout.py,
and press F5 to run it. You see "Book number" at the top left, the entry box
beside it, and the "Return book" button under the entry box.
Now see what goes wrong. Close the window and change the label text to "Library book
number". Run it again. The longer label now runs under the entry box.
Place puts each widget exactly where you told it to, and it does not move anything
out of the way.
Change the text back to "Book number".
This time change the geometry to, in speech marks, 200x60, and run it again.
The entry box is cut off on the right, and the button is not shown at all, because
60 pixels down is now outside the window.
Place does not shrink or move widgets to fit.
So use place only for small, fixed windows where nothing will change size.
Pack and grid work out the layout for you and adjust when text or windows change, so
they are usually the better choice.
Your turn. Put the geometry back to 300x150, add a label
with the text "Due back" at x equals 20, y equals 100, then
lengthen its text to "Date the book is due back" and run it to see whether anything
overlaps.
Part 4. Frames. You will group widgets inside frames to build a tidy form.
Open IDLE, click File, then New File.
Type import tkinter as tk, make the window, and give it the title "Parent
Contact".
A frame is a box that holds other widgets.
Make heading_frame equals tk.Frame, and in the brackets put
window. Pack it with pady equals 10.
Now make heading_label with the text "Parent Contact Details" in Arial,
size 14. The key change is the first thing in the brackets.
Instead of window, type heading frame.
That puts the label inside the frame rather than straight in the window.
Then pack the label.
Next, make form_frame, a frame in the window.
In the brackets add b d equals 2 and relief equals, in speech marks, groove.
That gives the frame a grooved border 2 pixels wide.
Then add padx equals 10 and pady equals 10, which leaves space inside the border.
Pack the form frame with padx equals 10.
Now fill the form frame. Make the "Child name", "Parent name" and "Phone" labels,
each with form frame as the first thing in the brackets, and an entry box beside
each one. Lay them out with grid.
The labels go in column 0 with sticky equals e, and the boxes go in column 1,
in rows 0, 1 and 2. Rows and columns now count from the top left of the frame, not
the window, so the first row inside the frame is row 0.
Make button_frame, another frame in the window, and pack it with pady equals 10 so
it sits under the form.
Put the "Save" and "Clear" buttons in button frame.
Pack each one with side equals, in speech marks, left, and padx equals
5, so they sit side by side. These buttons do nothing yet, because this video is
about layout.
Type window.mainloop, with brackets, at the end.
Click File, then Save As, save the file as frames.py, and press F5 to run
it.
The "Parent Contact" window has 3 parts.
The heading "Parent Contact Details" is at the top.
Under it is a box with a grooved border holding the "Child name", "Parent name" and
"Phone" labels, with an entry box beside each.
At the bottom, the "Save" and "Clear" buttons sit side by side.
Notice that the window itself uses pack, and form frame uses grid.
You can use a different layout in each frame.
But never mix pack and grid in the same frame, because they fight over where things
go.
Your turn. Add an "Email" label and entry box to form frame in row 3, using grid,
then add a third button with the text "Close" to button frame, packed on the left,
and run it to check the layout stays tidy.
That's Tkinter layout done. You stacked widgets with pack, lined up a form with
grid, saw where place goes wrong, and grouped widgets inside frames.
If you skipped any of the 4 tasks, go back to the end of that part and have a go.
Next, watch the next video on screen, or pick another topic from the playlist.