How to Build User Interfaces with Python — Tkinter Widgets — Part. 2

More and more widgets

This story follows the User Interfaces series. If you have missed the last Tkinter story, you can find it here:

In the previous story, I talked about some Tkinter widgets you can use in your applications:

• Frame
• Text
• Checkbutton
• Slider
• Spinbox

Today, I’ll talk about some other useful widgets! Let’s not waste any more time and get to the heart of the matter.

If you want, you can find the code of the story on GitHub. Else, the code we start with is:

import tkinter as tk
from tkinter import ttk

main_window = tk.Tk()
main_window.title("Widgets")
main_window.geometry("400x400")

main_window.grid_columnconfigure(0, weight=1)
main_window.grid_columnconfigure(1, weight=1)
main_window.grid_columnconfigure(2, weight=1)

Scrollbar

The Scrollbar widget allows you to attach a scrollbar to any widget, to see all the widget content when it is larger than the available space.

This widget is really independent. To use it, first, you have to initialize a Scrollbar widget, then attach it to an existing widget.

The first parameter when initializing a Scrollbar is the container, then you can provide some keywords arguments:

• orient: the scrolling orientation (“vertical” or “horizontal”).
• command: the command of the widget. Most of the time it will be the widget you want to make scrollable.

Here is an example:

scrollable_text_area = tk.Text(main_window, width=40, height=10)
scrollable_text_area.grid(row=0, column=0, columnspan=2, sticky=tk.EW, pady=5, padx=5)

scrollbar = ttk.Scrollbar(main_window, orient=tk.VERTICAL, command=scrollable_text_area.yview)
scrollbar.grid(row=0, column=2, sticky=tk.NS, pady=5, padx=5)

There’s one thing missing: the scrollable widget should communicate with the scrollbar to update its state. We do it this way:

scrollable_text_area["yscrollcommand"] = scrollbar.set

For horizontal scrolling, you replace “y” with “x” everywhere.

Separator

This widget allows you to display a line between widgets.

It takes only two parameters: the container, and the orientation (“horizontal” or “vertical”).

For example, we can add a separator to our window this way:

separator = ttk.Separator(main_window, orient=tk.HORIZONTAL)
separator.grid(row=1, column=0, columnspan=3, sticky=tk.EW, pady=5, padx=5)

Radio Button

Radio buttons allow you to select one and only one choice between multiple choices.

A Radiobutton takes the container as the first parameter. You can then provide other parameters:

• text: the text displayed next to the radio button.
• variable: a variable whose value equals the value selected on the radio buttons.
• value: the value assigned to the variable when the radio button is selected.

Let’s add some radio buttons to our window.

selected_value = tk.StringVar()

radio_button_1 = ttk.Radiobutton(main_window, text="Option 1", value="Option 1", variable=selected_value)
radio_button_1.grid(row=2, column=0, sticky=tk.W, pady=5, padx=5)

radio_button_2 = ttk.Radiobutton(main_window, text="Option 2", value="Option 2", variable=selected_value)
radio_button_2.grid(row=2, column=1, sticky=tk.W, pady=5, padx=5)

radio_button_3 = ttk.Radiobutton(main_window, text="Option 3", value="Option 3", variable=selected_value)
radio_button_3.grid(row=2, column=2, sticky=tk.W, pady=5, padx=5)

I will also add a small button to insert text in our text area depending on the selected radio button.

display_button = ttk.Button(main_window, text="Display", command=lambda: scrollable_text_area.insert(tk.END, f"{selected_value.get()} has been selected"))
display_button.grid(row=3, column=0, columnspan=3, sticky=tk.EW, pady=5, padx=5)

Combobox

A Combobox allows you to select one value in a list. It also allows you to enter a custom value.

Like all the widgets, the first parameter is the container. Then you can provide a textvariable parameter that will contain the text selected in the combobox.

You can add a list of values using combobox["values"] = ("A", "B", "C") .

You can also interact with the combobox using combobox.get() or combobox.set() to get/set its value.

Let’s add a combobox to our window. We will make it read-only:

combobox = ttk.Combobox(main_window, textvariable=combobox_value)
combobox["values"] = ("Option 1", "Option 2", "Option 3")
combobox["state"] = "readonly"
combobox.grid(row=4, column=0, columnspan=3, sticky=tk.EW, pady=5, padx=5)

Listbox

A Listbox is a widget used to display a list of items. You can also browse through the items and select one or several at once.

The keywords arguments for this widget are:

• listvariable: links to a Tkinter.Variable .
• height: the number of items displayed without having to scroll.
• selectmode: set the mode for handling the selection of items in the list.

The listvariable is used to populate your list with items (we’ll see how in an example later).

There are several selection modes:

• BROWSE: allows a single selection. Select an item and drag it to a different line and the selection will follow the mouse.
• EXTENDED: select any adjacent group of items at once by clicking the first item and dragging to the last line.
• SINGLE: allows a single selection and disables mouse dragging.
• MULTIPLE: allows multiple selections and clicking on any line toggles whether it is selected or not.

items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
listbox = tk.Listbox(main_window, listvariable=tk.StringVar(value=items), height=3, selectmode=tk.MULTIPLE)
listbox.grid(row=5, column=0, columnspan=3, sticky=tk.EW, pady=5, padx=5)

LabelFrame

This widget allows you to group widgets related.

The first parameter for it is the container and the second is the displayed text. You can also specify the position of the label using the labelanchor parameter (‘nw’, ‘ne’, ‘sw’, etc…).

Let’s add a group with some buttons to our window:

label_frame = ttk.LabelFrame(main_window, text="Label Frame")
label_frame.grid(row=6, column=0, columnspan=3, sticky=tk.EW, pady=5, padx=5)

label_frame.grid_columnconfigure(0, weight=1)
label_frame.grid_columnconfigure(1, weight=1)
label_frame.grid_columnconfigure(2, weight=1)

button1 = ttk.Button(label_frame, text="Button 1")
button1.grid(row=0, column=0, sticky=tk.EW, pady=5, padx=5)

button2 = ttk.Button(label_frame, text="Button 2")
button2.grid(row=0, column=1, sticky=tk.EW, pady=5, padx=5)

button3 = ttk.Button(label_frame, text="Button 3")
button3.grid(row=0, column=2, sticky=tk.EW, pady=5, padx=5)

Sizegrip

Let’s finish this story with the easiest widget to use: the Sizegrip. It’s a widget allowing you to resize your window using drag and drop.

You just specify its container and you can use it directly, except if you use a grid layout. In this case, you have to configure column and row sizes. I’ve done it at the beginning of the story, so now we can just add the widget, place it, and it will work. Also, you have to make sure your window is configured to be resizable.

sizegrip = ttk.Sizegrip(main_window)
sizegrip.grid(row=7, column=2, sticky=tk.SE, pady=5, padx=5)

Final Note

There are still some widgets to see. These can be a bit complicated to understand, so we will see them in a third part.

In the meantime, you have a good arsenal of widgets to train yourself in handling Tkinter.

To make sure you don’t miss the third part, don’t hesitate to follow me!

You can find the other stories of this series here:

To explore more of my Python stories, click here!

If you liked the story, don’t forget to clap and maybe follow me if you want to explore more of my content :)

You can also subscribe to me via email to be notified every time I publish a new story, just click here!

If you’re not subscribed to Medium yet and wish to support me or get access to all my stories, you can use my link: