[Python / Tkinter] A class that creates a scrollable Frame

Introduction

Tkinter is the easiest choice for creating GUIs in Python. However, there are some dissatisfactions with the content. One of them is that you can't scroll the Frame. The following introduces a class for creating a scrollable Frame.

The classes introduced below are some of the classes posted on the following sites. Thank you very much for helping me: ・ Scrollable Frames in Tkinter | The Teclado Blog, https://blog.tecladocode.com/tkinter-scrollable-frames/

Full code

Since it is not possible to attach a Scrollbar to a Frame in Tkinter, we first create a Canvas that is a scrollable widget and put the Frame in it. And the width of Frame is included in the scrollable range of Canvas. This makes it possible to scroll the internal Frame at the same time as the Canvas is scrolled.

import tkinter as tk
import tkinter.ttk as ttk

class ScrollableFrame(ttk.Frame):
    def __init__(self, container, bar_x = True, bar_y = True):
        super().__init__(container)
        self.canvas = tk.Canvas(self)
        self.scrollable_frame = ttk.Frame(self.canvas)
        self.scrollable_frame.bind(
            "<Configure>",
            lambda e: self.canvas.configure(
                scrollregion=self.canvas.bbox("all")
            )
        )
        self.canvas.create_window((0, 0), window=self.scrollable_frame, anchor="nw")
        if bar_y:
            self.scrollbar_y = ttk.Scrollbar(self, orient="vertical", command=self.canvas.yview)
            self.scrollbar_y.pack(side=tk.RIGHT, fill="y")
            self.canvas.configure(yscrollcommand=self.scrollbar_y.set)
        if bar_x:
            self.scrollbar_x = ttk.Scrollbar(self, orient="horizontal", command=self.canvas.xview)
            self.scrollbar_x.pack(side=tk.BOTTOM, fill="x")
            self.canvas.configure(xscrollcommand=self.scrollbar_x.set)
        self.canvas.pack(side=tk.LEFT, fill="both", expand=True)

Actually use

When you actually use it, it will be as follows.

root = tk.Tk()

frame = ScrollableFrame(root)

for i in range(50):
    for j in range(50):
        ttk.Entry(frame.scrollable_frame, width=5).grid(row=i, column=j)

frame.pack()
root.mainloop()

How to use

There are two points, when the instance is created and the widget is placed in the ScrollableFrame.

① When creating an instance

Scrollable frames may be rare if you need both the x-axis and the y-axis. Therefore, I made it possible to select the Scrollbar to add. The initial value is True, so select Hide if necessary.

def __init__(self, container, bar_x = True, bar_y = True):

② Placement of Widget in ScrollableFrame

As explained above, the Frame is created in the Canvas. Therefore, when placing the widget, it is necessary to place it in the Frame (scrollable_frame) in the Canvas. Do as follows.

frame = ScrollableFrame(root)
ttk.Label(frame.scrollable_frame, text="sample").pack

[Supplement]

This class is a modification of the class posted on the following site. ・ Scrollable Frames in Tkinter | The Teclado Blog, https://blog.tecladocode.com/tkinter-scrollable-frames/

There are two changes:

--Since Scrollbar was only available on the y-axis, we made changes to support both the y-axis and the x-axis. ――It is often more convenient to be able to select display / non-display of the x-axis and y-axis, so we have made it possible to select that as well.