Adding a Scrollbar in a Frame Tkinter

74 views Asked by At

I am pretty new to GUI in TK and I have the following problem when trying to create frames with a scrollbar:

The page is not shown properly.

This is my code (Updated runnable version):

I have imports, I initialise the root, then I define a starting page witch makes you access the app as a viewer user or authenticate to access all the functionality

import tkinter as tk
from tkinter import ttk as ttk
from tkinter.constants import *

from scrollbar import VerticalScrolledFrame
    
    
root = tk.Tk()
root.title("DbmApp")
root.geometry("1600x1200")
root.minsize(800, 600)
root.maxsize(root.winfo_screenwidth(), root.winfo_screenheight())

def main():
    paginaIniziale()



#################               PAGINE              #################
def paginaIniziale():
    def vai_menu_Utente():
        conn = db.Connect()
        index.destroy()
        paginaMenuUtente(conn)

    def vai_login():
        index.destroy()
        paginaLogin()

    frame = VerticalScrolledFrame(root)
    frame.pack(fill=tk.BOTH, expand=True)
    index = frame.interior
    
    stripe = tk.Label(
        index, text="", font=("Bold", 25), bg="light blue", height=350, width=600
    )
    stripe.place(x=0, y=0)

    background = tk.Label(
        index, text="", font=("Bold", 25), bg="#4876FF", height=5, width=600
    )
    background.place(x=0, y=0)

    stringaUtente = tk.Label(
        index, text="Fratm", font=("Bold", 25)
    )
    stringaUtente.place(x=100, y=50)
    stringaUtente = tk.Label(index, text="Benvenuto nel Database", font=("Bold", 25))
    stringaUtente.place(x=100, y=100)
    stringaUtente = tk.Label(
        index, text="Software by RandomGuy", font=("Consolas", 12), bg="light blue"
    )
    stringaUtente.place(x=450, y=550)

    goToMenuButton = tk.Button(
        index,
        text="Entra come ospite",
        font=("Bold", 15),
        bg="white",
        fg="black",
        command=vai_menu_Utente,
    )
    goToMenuButton.place(x=100, y=250, height=75, width=350)

    goToLoginButton = tk.Button(
        index,
        text="Accedi",
        font=("Bold", 15),
        bg="white",
        fg="black",
        command=vai_login,
    )
    goToLoginButton.place(x=100, y=400, height=75, width=350)

    frame.pack(padx=0, pady=100)
    frame.pack_propagate(False)
    frame.configure(height=600, width=600)

main()
root.mainloop()

In this second file I'm creating a class to create Frames with a scrollbar

import tkinter as tk
from tkinter import ttk as ttk
from tkinter.constants import *


class VerticalScrolledFrame (ttk.Frame) :
    
    def __init__(self, parent, *args, **kw):
        ttk.Frame.__init__(self, parent, *args, **kw)
        
        # Create a canvas object and a vertical scrollbar for scrolling it. 
        vscrollbar = ttk.Scrollbar(self, orient=VERTICAL)
        vscrollbar.pack(fill=Y, side=RIGHT, expand=FALSE)
        self.canvas = tk.Canvas (self, bd=0, highlightthickness=0,
                                width = 200, height = 300,
                                yscrollcommand=vscrollbar.set)
        self.canvas.pack(side=LEFT, fill=BOTH, expand=TRUE) 
        vscrollbar.config(command = self.canvas.yview)
        
        # Create a frame inside the canvas which will be scrolled with it.
        self.interior = ttk.Frame(self.canvas)
        self.interior.bind('<Configure>', self._configure_interior)
        self.canvas.bind('<Configure>', self._configure_canvas)
        self.interior_id = self.canvas.create_window(0, 0, window=self.interior, anchor=NW)


    def _configure_interior (self, event):
        # Update the scrollbars to match the size of the inner frame. 
        size = (self.interior.winfo_reqwidth(), self.interior.winfo_reqheight()) 
        self.canvas.config(scrollregion=(0, 0, size[0], size[1]))
        if self.interior.winfo_reqwidth() != self.canvas.winfo_width():
            # Update the canvas's width to fit the inner frame. 
            self.canvas.config(width = self.interior.winfo_reqwidth())

    def _configure_canvas(self, event):
        try:
            canvas_width = self.canvas.winfo_width()
            canvas_height = self.canvas.winfo_height()
            if self.interior.winfo_reqwidth() != canvas_width:
                # Update the inner frame's width to fill the canvas.
                self.canvas.itemconfig(self.interior_id, width=canvas_width, height=canvas_height)
        except tk.TclError as e:
            print(f"Error in _configure_canvas: {e}")
0

There are 0 answers