Tkinterのスクロールバーを使用する方法

初めに

最近Tkinterのスクロールバーをよく使う機会があったので、メモ程度に残しておきます。
他に良い方法がありましたらご教授いただけると幸いです。

例：画像を複数表示しスクロールバーを使用する

show_img.py

from tkinter import *
from tkinter import ttk
import glob
from PIL import Image, ImageTk

class Application():
    def __init__(self) -> None:
        self.root = Tk()
        self.root.resizable(0, 0)
        self.root.title("Scrollbar")

        self.setup()

        self.root.mainloop()
    
    def setup(self):
        self.canvas = Canvas(self.root, bg="white", bd=0, highlightthickness=0, width=300, height=300) # Canvasの表示
        self.canvas.grid(row=0, column=0, padx=5, pady=5)

        self.frame = Frame(self.canvas, bg='white') # Canvas上に載せるFrameの指定
        self.canvas.create_window((0,0),window=self.frame,anchor=NW,width=self.canvas.cget('width'))
        
        self.vbar = ttk.Scrollbar(self.root,orient=VERTICAL) # スクロールバーの指定
        self.vbar.grid(row=0, column=1, sticky=N+S)
        self.vbar.config(command=self.canvas.yview)
        
        self.canvas.config(yscrollcommand=self.vbar.set)
        
        # ------------------- 画像の表示 -------------------
        self.imgs = []

        for index, file in enumerate(glob.glob('./img/*.png')): # ./imgフォルダ内のpngファイルを読み込む
            if index == 50:
                break
            img = Image.open(file)
            img = img.resize((300, int(img.height*300/img.width)))
            img_tk = ImageTk.PhotoImage(img)
            self.imgs.append(img_tk)

            canvas = Canvas(self.frame, bg="white", width=img.width, height=img.height)
            canvas.create_image(int(img.width/2), int(img.height/2), image=img_tk)
            canvas.grid(row=index, column=0, pady=2)

        # -------------------------------------------------
        
        self.frame.update() # Frameの高さを取得するため、Frameの状態をアップデートする

        self.canvas.config(scrollregion=(0,0,500,self.frame.winfo_height())) # self.frame.winfo_height() -> Frameの高さを取得する
        self.frame.bind_all("<MouseWheel>", self._on_mousewheel) # マウスのスクロールイベントを対応付ける
    
    def _on_mousewheel(self, event):
        self.canvas.yview_scroll(int(-1*(event.delta/120)), "units")

if __name__=="__main__":
    Application()

例として、画像を複数表示するウィンドウを作成しました。

スクロールバーを使用する方法として、サイズを指定したCanvas上にサイズを指定しないFrameを載せて、そのFrameにwidgetを載せ、そしてFrameの高さを取得しCanvasにスクロールバーを対応づけるというものがあります。

最後に

なにか間違いなどありましたら、ぜひコメントをよろしくお願いいたします。