Layouts

Geometry Managers

Grid Layouts

Grid layouts are used most frequently,
so we will focus on the Grid Manager

Simple Grid

Open up simplegrid.py and add these two labels:

field_heading = tkinter.Label(window)
field_heading.config(text="Field Name", font="Verdana 10 bold")
field_heading.grid(row=0, column=0)

value_heading = tkinter.Label(window)
value_heading.config(text="Value", font="Verdana 10 bold")
value_heading.grid(row=0, column=1)

Your app should have two bold labels side by side

Complete Your Grid

Add widgets so your app looks (sort of) like the example

Resizing

We can configure columns to resize at different rates:

window.columnconfigure(0, weight=0)
window.columnconfigure(1, weight=1)

Your grid should grow to fit a resized window

Stickiness

Widgets are aligned within cells using compass points:

Sticky Label

Here’s how you would stretch an entry field:

firstname_entry = tkinter.Entry(window)
firstname_entry.grid(row=1, col=1, sticky="we")

Your “First Name” entry should resize with the window

Sticky Form

Align your form widgets to look like this:

Your form should resize smartly, like in the picture

Complex Grid

Open up membermanager.py.

Now we will use the same concept to create
a more complex layout.

Divide into Cells

Divide your layout into cells by drawing lines
between neighbouring widgets.

Identify Content Cells

Highlight every cell which contains
the top left corner of a widget.

Find Spanning Cells

Highlight row spans and column spans
for any widgets that need it.

Apply Settings

You can now use the information to arrange the widgets in the grid:

title_label = tkinter.Label(window)
title_label.config(text="Super Duper Member Manager")
title_label.grid(row=0, column=0, columnspan=4)

Apply the correct row, column and spans to all widgets

Challenge:
Happy Shopper

Create a new app called happyshopper.py
and reproduce this grid layout.

Layouts: Complete!

Cool, now we need to make it all actually work…
Take me to the next chapter!