在 Tkinter 中添加滚动条，以在框架外显示图像

Question

My objective is to add a vertical scroll bar to a frame which has several labels in it. The scroll bar should automatically enabled as soon as the labels inside the frame exceed the height of the frame. I would like to display a product description page in Tkinter. It contains a scrollBar to scroll through the bottom, to view the all listed product. I had created two rows on which i want to scroll through downward.

but after placing it, i am only able to see the scrollbar widget without the scroll function, and the scroll wheel is not available.

I had used an image of resolution - (310 X 480)pixels

So, can anyone suggest me what was i doing wrong. and help me to properly enable scroll through it.

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

root = Tk()
root.geometry("1350x700+0+0")
title = Label(root, text="Product Catalogue", font=("Lucida Handwriting", 20), bg='lightblue', bd=10, relief=GROOVE).pack(side=TOP, fill=X)
manage_Frame = Frame(root, bd=7, relief=RIDGE, bg="grey")
manage_Frame.place(x=13, y=70, width=1320, height=580)
manage_Frame.grid_rowconfigure(0, weight=1)
manage_Frame.grid_columnconfigure(0, weight=1)
xscrollbar = Scrollbar(manage_Frame, orient=HORIZONTAL)
xscrollbar.grid(row=1, column=0, sticky=E+W)
yscrollbar = Scrollbar(manage_Frame)
yscrollbar.grid(row=0, column=1, sticky=N+S)
canvas = Canvas(manage_Frame, bd=0, xscrollcommand=xscrollbar.set, yscrollcommand=yscrollbar.set)
canvas.grid(row=0, column=0, sticky=N+S+E+W)

img1 = ImageTk.PhotoImage(Image.open("F:\\img.jpg"))
lbl1 = Label(canvas, image=img1, padx=20, pady=20)
lbl1.place(x=0, y=0) 
lbl_size1 = Label(canvas, text="Size:", bg="pink").place(x=10,y=400) 
size1 = ttk.Combobox(canvas, font=("Century Gothic", 10), state='readonly', width=4)
size1["value"] = ("XS", "S", "M", "L", "XL", "XXL")
size1.place(x=40, y=400) 
lbl_qty1 = Label(canvas, text="Qty:", bg="pink").place(x=12,y=400) 
qty1 = ttk.Combobox(canvas, font=("Century Gothic", 10), state='readonly', width=4)
qty1["value"] = ("1", "2", "3", "4", "5")
qty1.place(x=150, y=400) 
price1 = Label(canvas, text="Rs 2000", font=("Sitka Heading", 10)).place(x=10, y=20)

img2 = ImageTk.PhotoImage(Image.open("F:\\img.jpg"))
lbl2 = Label(canvas, image=img2, padx=20, pady=20)
lbl2.place(x=310, y=0, ) 
lbl_size2 = Label(canvas, text="Size:", bg="pink").place(x=372, y=400)  
size2 = ttk.Combobox(canvas, font=("Century Gothic", 10), state='readonly', width=4)
size2["value"] = ("XS", "S", "M", "L", "XL", "XXL")
size2.place(x=402, y=400)
lbl_qty2 = Label(canvas, text="Qty:", bg="pink").place(x=467, y=400)  
qty2 = ttk.Combobox(canvas, font=("Century Gothic", 10), state='readonly', width=4)
qty2["value"] = ("1", "2", "3", "4", "5")
qty2.place(x=497, y=400)  
price2 = Label(canvas, text="Rs 1800", font=("Sitka Heading", 10)).place(x=372, y=20)

img3 = ImageTk.PhotoImage(Image.open("F:\\img.jpg"))
lbl3 = Label(canvas, image=img3, padx=20, pady=20)
lbl3.place(x=620, y=0, )  
lbl_size3 = Label(canvas, text="Size:", bg="pink").place(x=670, y=400) 
size3 = ttk.Combobox(canvas, font=("Century Gothic", 10), state='readonly', width=4)
size3["value"] = ("XS", "S", "M", "L", "XL", "XXL")
size3.place(x=700, y=400) 
lbl_qty3 = Label(canvas, text="Qty:", bg="pink").place(x=765, y=400) 
qty3 = ttk.Combobox(canvas, font=("Century Gothic", 10), state='readonly', width=4)
qty3["value"] = ("1", "2", "3", "4", "5")
qty3.place(x=795, y=400)  
price3 = Label(canvas, text="Rs 3000", font=("Sitka Heading", 10)).place(x=670, y=20)

img4 = ImageTk.PhotoImage(Image.open("F:\\img.jpg"))
lbl4 = Label(canvas, image=img4, padx=20, pady=20)
lbl4.place(x=930, y=0, ) 
lbl_size4 = Label(canvas, text="Size:", bg="pink").place(x=980, y=400)
size4 = ttk.Combobox(canvas, font=("Century Gothic", 10), state='readonly', width=4)
size4["value"] = ("XS", "S", "M", "L", "XL", "XXL")
size4.place(x=1010, y=400) 
lbl_qty4 = Label(canvas, text="Qty:", bg="pink").place(x=1075, y=400) 
qty4 = ttk.Combobox(canvas, font=("Century Gothic", 10), state='readonly', width=4)
qty4["value"] = ("1", "2", "3", "4", "5")
qty4.place(x=1105, y=400)  
price4 = Label(canvas, text="Rs 1500", font=("Sitka Heading", 10)).place(x=980, y=20)

img5 = ImageTk.PhotoImage(Image.open("F:\\img.jpg"))
lbl5 = Label(canvas, image=img5, padx=20, pady=20)
lbl5.place(x=0, y=480, )  
lbl_size5 = Label(canvas, text="Size :", bg="pink").place(x=10,y=880) 
size5 = ttk.Combobox(canvas, font=("Century Gothic", 10), state='readonly', width=4)
size5["value"] = ("XS", "S", "M", "L", "XL", "XXL")
size5.place(x=40, y=880)  
lbl_qty5 = Label(canvas, text="Qty : ", bg="pink").place(x=120,y=880)
qty5 = ttk.Combobox(canvas, font=("Century Gothic", 10), state='readonly', width=4)
qty5["value"] = ("1", "2", "3", "4", "5")
qty5.place(x=150, y=880) 
price5 = Label(canvas, text="Rs 2000", font=("Sitka Heading", 10)).place(x=10, y=500)

img6 = ImageTk.PhotoImage(Image.open("F:\\img.jpg"))
lbl6 = Label(canvas, image=img6, padx=20, pady=20)
lbl6.place(x=310, y=480, )
lbl_size6 = Label(canvas, text="Size :", bg="pink").place(x=372, y=880) 
size6 = ttk.Combobox(canvas, font=("Century Gothic", 10), state='readonly', width=4)
size6["value"] = ("XS", "S", "M", "L", "XL", "XXL")
size6.place(x=402, y=880)  
lbl_qty6 = Label(canvas, text="Qty : ", bg="pink").place(x=467, y=880) 
qty6 = ttk.Combobox(canvas, font=("Century Gothic", 10), state='readonly', width=4)
qty6["value"] = ("1", "2", "3", "4", "5")
qty6.place(x=497, y=880)
price6 = Label(canvas, text="Rs 2000", font=("Sitka Heading", 10)).place(x=372, y=500)

img7 = ImageTk.PhotoImage(Image.open("F:\\img.jpg"))
lbl7 = Label(canvas, image=img7, padx=20, pady=20)
lbl7.place(x=620, y=480, ) 
lbl_size7 = Label(canvas, text="Size :", bg="pink").place(x=670, y=880) 
size7 = ttk.Combobox(canvas, font=("Century Gothic", 10), state='readonly', width=4)
size7["value"] = ("XS", "S", "M", "L", "XL", "XXL")
size7.place(x=700, y=880) 
lbl_qty7 = Label(canvas, text="Qty : ", bg="pink").place(x=765, y=880) 
qty7 = ttk.Combobox(canvas, font=("Century Gothic", 10), state='readonly', width=4)
qty7["value"] = ("1", "2", "3", "4", "5")
qty7.place(x=795, y=880) 
price7 = Label(canvas, text="Rs 2000", font=("Sitka Heading", 10)).place(x=670, y=500)

img8 = ImageTk.PhotoImage(Image.open("F:\\img.jpg"))
lbl8 = Label(canvas, image=img8, padx=20, pady=20)
lbl8.place(x=930, y=480, ) 
lbl_size8 = Label(canvas, text="Size :", bg="pink").place(x=980, y=880) 
size8 = ttk.Combobox(canvas, font=("Century Gothic", 10), state='readonly', width=4)
size8["value"] = ("XS", "S", "M", "L", "XL", "XXL")
size8.place(x=1010, y=880) 
lbl_qty8 = Label(canvas, text="Qty : ", bg="pink").place(x=1075,y=880)  
qty8 = ttk.Combobox(canvas, font=("Century Gothic", 10), state='readonly', width=4)
qty8["value"] = ("1", "2", "3", "4", "5")
qty8.place(x=1105, y=880)  
price1 = Label(canvas, text="Rs 2000", font=("Sitka Heading", 10)).place(x=950, y=500)

canvas.config(scrollregion=canvas.bbox(ALL))

xscrollbar.config(command=canvas.xview)
yscrollbar.config(command=canvas.yview)

root.mainloop() 

Answer 1

You can't scroll items added to a canvas with place . You must use create_window in order to add the widgets to a scrollable canvas.