Tkinter canvas & scrollbar with grid

Question

I have a canvas in a frame

photoFrame = Frame(centerFrame, width=250, height=190, bg="#EBEBEB")
photoFrame.grid(row=0, column=1, sticky="nsew")
photoCanvas = Canvas(photoFrame, bg="#EBEBEB")
photoCanvas.grid(row=0, column=0, sticky="nsew")

and I try to put a scrollbar to my canvas with this

photoScroll = Scrollbar(photoFrame, orient=VERTICAL)
photoScroll.config(command=photoCanvas.yview)
photoCanvas.config(yscrollcommand=photoScroll.set)
photoScroll.grid(row=0, column=1, sticky="ns")

The scrollbar appears but it's disabled. Can you help me please ?

Sorry for my bad english.

In a for loop I add lots of Image button with this code

element = Button(photoCanvas, image = listPhotos[i], borderwidth=0, height = 200, width = 200, bg="#EBEBEB")
element.grid(row=rowPhoto, column=columnPhoto, padx=5, pady=5, sticky="nsew")

Finnally I have this

    root = Tk()    
    photoFrame = Frame(root, width=250, height=190, bg="#EBEBEB")
        

    photoCanvas = Canvas(photoFrame, bg="#EBEBEB")
    photoCanvas.grid(row=0, column=0, sticky="nsew")
    
    for i in range(0, len(listPhotos), 1):
       element = Button(photoCanvas, image = listPhotos[i], borderwidth=0, height = 200, width = 200, bg="#EBEBEB")
       element.grid(row=rowPhoto, column=columnPhoto, padx=5, pady=5, sticky="nsew")
    
    photoScroll=Scrollbar(photoFrame,orient=VERTICAL)
    photoScroll.config(command=photoCanvas.yview)
    photoCanvas.config(yscrollcommand=photoScroll.set)
    photoScroll.grid(row=0, column=1, sticky="ns")

in my app, the purple rectangle is the next frame and I need a vertical scrollbar

Say if you have some questions

i understand, but it's a project so i have more than 300 lines and it's private content sometimes ... i try to do it better — Kevin Jordil, Nov 07 '17 at 15:36
it's not a processionnal application, others can take my designs If you open a python file you can run it i think — Kevin Jordil, Nov 07 '17 at 15:45
I suggest you to put all your buttons in a frame and then put this frame inside the canvas with `canvas.create_window(x, y, window=frame)`. See [this question](https://stackoverflow.com/questions/16188420/python-tkinter-scrollbar-for-frame) for more details. — j_4321, Nov 09 '17 at 12:35
If you try the code of the question I have linked, you will see that the scrollbar does work. Just replace the labels by whatever widgets you want to. — j_4321, Nov 13 '17 at 10:48
i have already try but i don't user pack method, but the grid — Kevin Jordil, Nov 13 '17 at 11:13

score 4 · Answer 1 · answered Nov 13 '17 at 15:41

One way to scroll a group of widgets is to put them (with grid of pack) inside a frame and put this frame inside a canvas.

The two key elements (besides connecting the scrollbar to the canvas) for the scrolling to work are:

Use canvas.create_window(x, y, window=frame) to put the frame inside the canvas so that it is treated like a canvas item.
Update the canvas scrollregion each time the size of the frame changes (for instance after adding a new widget) with canvas.configure(scrollregion=canvas.bbox('all')).

Here is an adaptation of the code of the question Python Tkinter scrollbar for frame, but using the widgets name from the OP's question and grid instead of pack:

import tkinter as tk

def update_scrollregion(event):
    photoCanvas.configure(scrollregion=photoCanvas.bbox("all"))

root = tk.Tk()   


photoFrame = tk.Frame(root, width=250, height=190, bg="#EBEBEB")
photoFrame.grid()
photoFrame.rowconfigure(0, weight=1) 
photoFrame.columnconfigure(0, weight=1) 

photoCanvas = tk.Canvas(photoFrame, bg="#EBEBEB")
photoCanvas.grid(row=0, column=0, sticky="nsew")

canvasFrame = tk.Frame(photoCanvas, bg="#EBEBEB")
photoCanvas.create_window(0, 0, window=canvasFrame, anchor='nw')

for i in range(10):
   element = tk.Button(canvasFrame, text='Button %i' % i, borderwidth=0, bg="#EBEBEB")
   element.grid(padx=5, pady=5, sticky="nsew")

photoScroll = tk.Scrollbar(photoFrame, orient=tk.VERTICAL)
photoScroll.config(command=photoCanvas.yview)
photoCanvas.config(yscrollcommand=photoScroll.set)
photoScroll.grid(row=0, column=1, sticky="ns")

canvasFrame.bind("<Configure>", update_scrollregion)

root.mainloop()

@j_4321, it's very rare to find someone who explains in a clear way like this. I like your explanation before start coding. Thanks man. — AhmedWas, Sep 25 '18 at 12:37

Tkinter canvas & scrollbar with grid

1 Answers1

Linked