I'm trying to put together a window that displays a bunch of labels generated from a dict. I'm having trouble getting the scrollbars to work properly. They won't stick to the sides of the frame when I resize the window, and I can't get the canvas to respond to the scroll command. I need the window to support a large number of labels.
from Tkinter import *
from math import floor
bits = {}
#the dict is then built
class Bitbox(Canvas):
def __init__(self, parent, bitdict, *args, **kwargs):
Canvas.__init__(self, parent, background="black")
self.bitdict = bitdict
self.parent = parent
self.lbllist = []
n=0
for i in bitdict.keys():
label = Label(self, text=i, bg='black', fg='green')
n += 1
label.grid(row = ((n-1)%30), column=int(floor((n-1)/30)))
self.lbllist.append(label)
def main():
root = Tk()
frame = Frame(root)
frame.grid(sticky=N+S+E+W)
bts = Bitbox(frame, bits)
bts.grid(row=0, column=0)
vbar = Scrollbar(frame, orient=VERTICAL)
vbar.grid(row=0, column=1, sticky=N+S)
vbar.config(command=bts.yview)
hbar = Scrollbar(frame, orient=HORIZONTAL)
hbar.grid(row=1, column=0, columnspan=2, sticky=W+E)
bts.config(xscrollcommand=hbar.set)
hbar.config(command=bts.xview)
bts.config(yscrollcommand=vbar.set)
bts.config(scrollregion=(0,0,500,1000))
root.mainloop()
Clearly I'm new at all this. It's entirely possible I have a fundamental misunderstanding of how these widgets interact. Any help is much appreciated.
to get the scrollbar to react to the mouse bind the mouse to the scrollbar like this:
def on_mousewheel(event):
bts.yview_scroll(-1*(event.delta/120), "units")
def main():
global bts
#your code...
root.bind_all("<MouseWheel>",on_mousewheel)
Related
I am trying to get my scrollable canvas to work. It works when I pack the elements using .pack, however when I insert the elements via .place, the scrollbar stops working. Here is a minimal reproducable example of my code.
startup.py file:
import frame as f
import placeWidgetsOnFrame as p
p.populate3()
f.window.mainloop()
frame.py file:
#Creates widnow
window = customtkinter.CTk()
window.geometry("1900x980")
customtkinter.set_appearance_mode("dark")
window.resizable(False, False)
#Creates Frame for GUI
mainFrame = customtkinter.CTkFrame(window, width=1900, height=980, corner_radius=0)
mainFrame.pack(expand=True, fill=tk.BOTH)
mainFrame.pack_propagate(False)
topFrame = customtkinter.CTkFrame(master=mainFrame, width=1865, height=140, corner_radius=10)
topFrame.grid(columnspan=2, padx=15, pady=15)
topFrame.pack_propagate(0)
leftFrame = customtkinter.CTkFrame(master=mainFrame, width=380, height=530, corner_radius=10)
leftFrame.grid(row=1, column=0, padx=15, pady=10)
leftFrame.pack_propagate(False)
rightFrame = customtkinter.CTkFrame(master=mainFrame, width=1450, height=775, corner_radius=10)
rightFrame.grid(row=1, column=1, padx=15, pady=10, rowspan=2)
rightFrame.pack_propagate(False)
bottomLeftFrame = customtkinter.CTkFrame(mainFrame, width=380, height=220, corner_radius=10)
bottomLeftFrame.grid(row=2, column=0, padx=15, pady=10)
bottomLeftFrame.pack_propagate(False)
#Creates Scrollbar for right Frame
#Creates a canvas for the right Frame
canvas2=tk.Canvas(rightFrame, bg="#000000", highlightthickness=0, relief="flat")
canvas2.pack(side="left", fill="both", expand=True)
#Creates a scroll bar for the right Frame
scrollbar = customtkinter.CTkScrollbar(master=rightFrame, orientation="vertical", command=canvas2.yview, corner_radius=10)
scrollbar.pack(side=tk.RIGHT, fill=tk.Y)
#Configures scrollbar to canvas
canvas2.configure(yscrollcommand=scrollbar.set)
canvas2.bind("<Configure>", lambda *args, **kwargs: canvas2.configure(scrollregion=canvas2.bbox("all")))
#Creates a scrollable frame to place widgets on
scrollableFrame = customtkinter.CTkFrame(canvas2, fg_color=("#C0C2C5", "#343638"), corner_radius=10)
canvasFrame = canvas2.create_window((0,0), window=scrollableFrame, anchor="nw", tags=("cf"))
#TO DO - resize canvas and to fit all widgets
def handleResize(event):
c = event.widget
cFrame = c.nametowidget(c.itemcget("cf", "window"))
minWidth = cFrame.winfo_reqwidth()
minHeight = cFrame.winfo_reqheight()
print (event.width)
print (event.height)
if minWidth < event.width:
c.itemconfigure("cf", width=event.width)
if minHeight < event.height:
c.itemconfigure("cf", height=event.height)
print (event.width)
print (event.height)
c.configure(scrollregion=c.bbox("all"))
canvas2.bind('<Configure>', handleResize)
def onMousewheel(event):
canvas2.yview_scroll(-1 * round(event.delta / 120), "units")
canvas2.bind_all("<MouseWheel>", onMousewheel)
canvas2.bind("<Destroy>", lambda *args, **kwargs: canvas2.unbind_all("<MouseWheel>"))
placeWidgetsOnFrame.py file:
import tkinter
import customtkinter
import frame as f
rightFrame = f.scrollableFrame
def populate2():
for i in range(30):
emailLabel = customtkinter.CTkLabel(master=rightFrame, text="Please enter your email:")
emailLabel.pack(padx=10, pady=10)
def populate3():
x=50
for i in range(30):
emailLabel = customtkinter.CTkLabel(master=rightFrame, text="Please enter your email:")
emailLabel.place(x=40, y=x)
x=x+50
Here is the output when populate3() is run:
Here
Here is the output when populate2() is run
Here
Does anyone know why this is? I can always go back and change the way I insert widgets to .pack rather than .place, however I would rather use .place as I find it easier to place widgets where I want to.
The reason is because pack by default will cause the containing frame to grow or shrink to fit all of the child widgets, but place does not. If your frame starts out as 1x1 and you use place to add widgets to it, the size will remain 1x1. When you use place, it is your responsibility to make the containing widget large enough to contain its children.
This single feature is one of the most compelling reasons to choose grid or pack over place - these other geometry managers do a lot of work for you so that you can think about the layout logically without getting bogged down in the details of the layout.
I'm an amateur programmer and I used Gtk a long time ago and PyQt recently to create GUIs but have just returned to Tkinter for it's elegance. In Gtk and Qt the grid commands seem to resize widgets in an automatic fashion for the window size. In Tkinter I'm really confused by how to setup a window to be resizable.
Using Brian Oakley's suggestion at: How can i fit my tkinter app to any size screen? and the various sources cited I've tried to write the following simple code so it should work on any size screen. For some reason I am unable change the size of the parent column s an extend the LB listbox to the bottom of the screen. If I add width = 10, height = 75 to the LB definition line it does extend, but of course the bottom of LB will be lost when the window is resized. I realize this is really messy code but I think it explains the problem. Can someone tell me what to do to the code (and especially LB) to it make usable on various screen sizes?
Thank you very much in advance.
class Application(tk.Frame): # /5104330/
#
def __init__(self, parent, *args, **kwargs): # /17466561/
tk.Frame.__init__(self, parent, *args, **kwargs) # /17466561/
self.parent = parent # root - /17466561/
# Makes column 1 three times wider than column 2
# THIS DOES NOT HAVE ANY EFFECT. WHY NOT?:
self.parent.columnconfigure(0, weight=3)
self.parent.columnconfigure(1, weight=1)
# Setup frame
frame1 = tk.Frame(self)# /61989498/
frame1.grid(row=0, column=0, rowspan = 20, columnspan = 8, sticky='nsew')
# Create widgets
scrollbar = tk.Scrollbar(frame1, orient=tk.VERTICAL) # /10870855/, /32715745/
self.LB = tk.Listbox(frame1, yscrollcommand=scrollbar.set)#, width = 10, height = 75)
scrollbar.config(command=self.LB.yview)
# Pack the widgets
self.LB.pack(side=tk.LEFT, fill=tk.BOTH, expand=1)
scrollbar.pack(side=tk.RIGHT, fill=tk.Y, expand=1)
# insert data
for r in range(0, 50):
self.LB.insert(tk.END, str(r)+'-LB1')
# As per https://stackoverflow.com/questions/31885234/, /53073534/ and /64545856/
for i in range(0,35):
# None of these extend the self.LB down to the bottom of the window:
self.parent.grid_rowconfigure(i, weight=1)
frame1.grid_rowconfigure(i, weight=1)
self.LB.grid_rowconfigure(i, weight=1)
#
self.parent.rowconfigure(i, weight=1)
frame1.rowconfigure(i, weight=1)
self.LB.rowconfigure(i, weight=1)
#
frame2 = tk.Frame(self, bd=1, relief='flat', bg='white')# , width = 12, height = 700) # /61989498/
frame2.grid(row=1, column=9, sticky='nsew', rowspan=40, columnspan = 3, ipadx=4)
self.slbl = tk.Label(frame2, text ='Enter Search Term:'); self.slbl.pack(side=tk.TOP, padx=20)
if __name__ == "__main__": # /17466561/
root = tk.Tk()
Application(root).pack(side='top', fill='both', expand=True)
root.attributes('-zoomed', True) # maximize the window
root.mainloop()
While I dislike answering my own question, I think the solution is just to remove the pack commands and use grid on the root window to get around the problem. Simplifying I have used:
import tkinter as tk
class Application(tk.Frame):
#
def __init__(self, parent, *args, **kwargs):
tk.Frame.__init__(self, parent, *args, **kwargs)
self.parent = parent
# Create widgets
scrollbar = tk.Scrollbar(self.parent, orient=tk.VERTICAL)
self.LB = tk.Listbox(self.parent, yscrollcommand=scrollbar.set)
scrollbar.config(command=self.LB.yview)
# Pack the widgets
self.LB.grid(row=0, column=0, rowspan = 98, columnspan = 8, sticky='nsew')
scrollbar.grid(row=0, column=8, rowspan = 98, columnspan = 1, sticky='nsw')
# insert data
for r in range(0, 50):
self.LB.insert(tk.END, str(r)+'-LB1')
for i in range(0,98):
# Extend the self.LB down to the bottom of the maximized window
self.parent.grid_rowconfigure(i, weight=1)
self.slbl = tk.Label(self.parent, text ='Enter Search Term:')
self.slbl.grid(row=1, column=9, sticky='nsew', rowspan=40, columnspan = 3, ipadx=4)
if __name__ == "__main__":
root = tk.Tk()
Application(root)
root.attributes('-zoomed', True) # maximize the window
root.mainloop()
##########################################################
im trying to make an application that can go to different frames but i ran into a problem that seems basic, but its new to me and dont know how to fix it. how do i move widgets on a frame using place?
when i try to use this code on about_btn:
self.about_btn.place(rely=0.5)
then the start button is covered the half by the about button, i want to know why is it doing this and how do i fix it? using higher rely value button will go covered by different frame. i want to move widgets frely using place and moving them on the specific frame. Any help and suggestions or improvement for code will be very helpful, here is my example code:
import tkinter as tk
from tkinter import *
class App():
def __init__(self, parent):
self.app = parent
self.app.geometry("300x300")
self.app.title("test application")
self.home_frame = tk.Frame(self.app)
self.category_frame = tk.Frame(self.app)
self.home_frame.pack()
self.start_btn = tk.Button(self.home_frame, text="Start")
self.start_btn.pack()
self.about_btn = tk.Button(self.home_frame, text="About")
self.about_btn.place(rely=0.5)
if __name__ == "__main__":
app1 = tk.Tk()
App_class = App(app1)
app1.resizable(False, False)
app1.mainloop()
Do not mix geometry management algorithms within a container. You are using pack for start_btn and place for about_btn both in the home_frame container. Pick one - ideally either grid or pack. Place is not usually sensible.
For example, to pack your buttons on a row at the top and right:
self.home_frame.pack(side=tk.TOP, fill=tk.BOTH, expand=True)
self.about_btn.pack(side=tk.RIGHT, anchor=tk.NE)
self.start_btn.pack(side=tk.RIGHT, anchor=tk.NE)
Using place instead:
self.home_frame.place(relwidth=1.0, relheight=1.0)
self.start_btn.place(relx=0.5, rely=0, relwidth=0.25)
self.about_btn.place(relx=0.75, rely=0, relwidth=0.25)
Frankly, learn to use grid. It will be worth it. Here is a reworked version that illustrates all three geometry managers for two buttons.
import tkinter as tk
class App():
def __init__(self, parent):
self.app = parent
self.app.geometry("300x300")
self.app.title("test application")
f1 = tk.Frame(self.app, relief=tk.GROOVE, borderwidth=2)
b1a = tk.Button(f1, text="Place A")
b1b = tk.Button(f1, text="Place B")
b1a.place(relx=0.5, rely=0, relwidth=0.25)
b1b.place(relx=0.75, rely=0, relwidth=0.25)
f2 = tk.Frame(self.app, relief=tk.GROOVE, borderwidth=2)
b2a = tk.Button(f2, text="Two A")
b2b = tk.Button(f2, text="Two B")
b2b.pack(side=tk.RIGHT, anchor=tk.NE)
b2a.pack(side=tk.RIGHT, anchor=tk.NE)
f3 = tk.Frame(self.app, relief=tk.GROOVE, borderwidth=2)
b3a = tk.Button(f3, text="Grid A")
b3b = tk.Button(f3, text="Grid B")
b3a.grid(row=0, column=0, sticky=tk.NE)
b3b.grid(row=0, column=1, sticky=tk.NE)
f3.grid_rowconfigure(0, weight=1)
f3.grid_columnconfigure(0, weight=1)
f1.grid(row=0, column=0, sticky=tk.NSEW)
f2.grid(row=1, column=0, sticky=tk.NSEW)
f3.grid(row=2, column=0, sticky=tk.NSEW)
for row in range(0,3):
parent.grid_rowconfigure(row, weight=1)
parent.grid_columnconfigure(0, weight=1)
if __name__ == "__main__":
root = tk.Tk()
app = App(root)
#app1.resizable(False, False)
root.mainloop()
I have a problem i want to put a image as the background for this little converter can someone help me? I was looking online and on stackoverflow but none of the things i found would work with the class.
__author__ = 'apcs'
from tkinter import *
class FarenheitToCelsius(Frame):
def __init__(self):
Frame.__init__(self)
self.master.title("Farenheit To Celsius Conversion")
self.grid()
self.farenheitLabel = Label(self, text="Farenheit")
self.farenheitLabel.grid(row=0, column=0)
self.farVar = DoubleVar()
self.farEntry = Entry(self, textvariable=self.farVar)
self.farEntry.grid(row=0, column=1)
self.celsiusLabel = Label(self, text="Celsius")
self.celsiusLabel.grid(row=1, column=0)
self.celVar = DoubleVar()
self.celEntry = Entry(self, textvariable=self.celVar)
self.celEntry.grid(row=1, column=1)
self.button = Button(self,
text="Convert to Celsius",
command=self.convertToFarenheit)
self.button2 = Button(self,
text="Convert to Farenheit",
command=self.convertToCelsius)
self.button.grid(row=2, column=1, columnspan=1)
self.button2.grid(row=2, column=0, columnspan=1)
def convertToFarenheit(self):
fare = self.farVar.get()
cels = (fare - 32) * 5 / 9
self.celVar.set(cels)
def convertToCelsius(self):
cel = self.celVar.get()
far = cel * 9 / 5 + 32
self.farVar.set(far)
def main():
FarenheitToCelsius().mainloop()
main()
I can think of at least three ways to do this:
Create an image in a label, and use place to put it in the frame. Then create all of the other widgets and use pack or grid as you normally would. Make sure you create the frame first, then the label with the image, then the children of the frame, so that the stacking order is correct.
Use a canvas instead of a frame, and use the create_image method to add an image. Then you can pack/place/grid children as normal.
Instead of a frame, use a label as the container, and then pack/place/grid widgets into the label (yes, you can add children to a label widget).
I'm new to this place and tkinter. I am stuck at making a scrollable listbox or canvas. I have tried both widgets. Within this listbox or canvas, I have several entry and label widgets. The origin point is R0,C0. I used row/columnconfigure to stretch the listbox or canvas.
In the main window, I had 4 buttons on row four to column four (0,4->4,4). I placed the scrollbar on column 5. I attempted to use the grid method. The issue I am having is making the scrollbar functional.
Note: Turning the mainframe into a class is only one of the ways I have tried. Packing the scrollbar on the right has worked, with the listbox/canvas packed on the left. However, the listbox/canvas widget that the scrollbar is commanded to does not scroll the listbox/canvas. Also, adding many entry boxes does not cause the listbox/canvas to scroll. Help please.
from tkinter import *
from tkinter.ttk import *
Style().configure("B.TFrame", relief="flat",
background="blue")
Style().configure("R.TFrame", relief="flat",
background="red")
Style().configure("R.TLabel", background="red")
class Application(Frame):
def __init__(self, master=None):
Frame.__init__(self, master, style="B.TFrame")
self.grid(sticky=N+S+E+W)
self.mainframe()
def mainframe(self):
top=self.winfo_toplevel()
self.menuBar = Menu(top)
top["menu"] = self.menuBar
self.subMenu = Menu(self.menuBar, tearoff=0)
self.subMenu2 = Menu(self.menuBar, tearoff=0)
self.menuBar.add_cascade(label="File", menu=self.subMenu)
self.menuBar.add_cascade(label="About", menu=self.subMenu2)
self.subMenu.add_command(label="Open")
self.subMenu.add_command(label="Save")
self.subMenu.add_command(label="Exit")
self.subMenu2.add_command(label="About")
self.subMenu2.add_command(label="Help")
self.data = Listbox (self, bg='red')
scrollbar = Scrollbar(self.data, orient=VERTICAL)
self.add = Button(self, text="")
self.remove = Button(self, text="")
self.run = Button(self, text="")
self.stop = Button(self, text="")
self.data.grid (row=0, column=0, rowspan=4, columnspan=4, sticky=N+E+S+W)
self.data.columnconfigure(1, weight=1)
self.data.columnconfigure(3, weight=1)
self.add.grid(row=4,column=0,sticky=EW)
self.remove.grid(row=4,column=1,sticky=EW)
self.run.grid(row=4,column=2,sticky=EW)
self.stop.grid(row=4,column=3,sticky=EW)
scrollbar.grid(column=5, sticky=N+S)
Without any content in the listbox, there's nothing to scroll...
This seems to work though (shortened the example a bit). See also the example at the scrollbar documentation.
class Application(Frame):
def __init__(self, master=None):
Frame.__init__(self, master)
self.grid(sticky=N+S+E+W)
self.mainframe()
def mainframe(self):
self.data = Listbox(self, bg='red')
self.scrollbar = Scrollbar(self.data, orient=VERTICAL)
self.data.config(yscrollcommand=self.scrollbar.set)
self.scrollbar.config(command=self.data.yview)
for i in range(1000):
self.data.insert(END, str(i))
self.run = Button(self, text="run")
self.stop = Button(self, text="stop")
self.data.grid(row=0, column=0, rowspan=4,
columnspan=2, sticky=N+E+S+W)
self.data.columnconfigure(0, weight=1)
self.run.grid(row=4,column=0,sticky=EW)
self.stop.grid(row=4,column=1,sticky=EW)
self.scrollbar.grid(column=2, sticky=N+S)
a = Application()
a.mainframe()
a.mainloop()
You must define the command attribute to the scrollbar, and you must supply the yscrollcommand attribute to the listbox. These two attributes work together to make something scrollable.
The yscrollcommand option tells the listbox "when you are scrolled in the Y direction, call this command. This is usually the set method of a scrollbar, so that when the user scrolls via arrow keys, the scrollbar gets updated.
The command attribute of a scorllbar says "when the user moves you, call this command". This is usually the yview or xview method of a widget, which causes the widget to change its view parameters in the Y or X direction.
In your case, after creating the widgets you would do this:
self.data.config(yscrollcommand=self.scrollbar.set)
scrollbar.config(command=self.data.yview)
This thread is old but in case somebody else falls across it as I did, it needs a few precisions.
Junuxx's answer doesnt work as is, not only because there is an indentation problem due to difficulties in seizing code here (from "self.run" which is part of the "mainframe" function) but because it seems necessary to put the listbox and the scrollbar in their own frame.
Here is a working code for Python 2 and 3 :
#!/usr/bin/env python2
try:
# for Python2
from Tkinter import *
except ImportError:
# for Python3
from tkinter import *
class Application(Frame):
def __init__(self, master=None):
Frame.__init__(self, master)
self.grid(sticky=N+S+E+W)
self.mainframe()
def mainframe(self):
frame = Frame(self)
scrollbar = Scrollbar(frame, orient=VERTICAL)
data = Listbox(frame, yscrollcommand=scrollbar.set,
bg='red')
scrollbar.config(command=data.yview)
scrollbar.pack(side=RIGHT, fill=Y)
data.pack(side=LEFT, fill=BOTH, expand=1)
for i in range(1000):
data.insert(END, str(i))
self.run = Button(self, text="run")
self.stop = Button(self, text="stop")
frame.grid(row=0, column=0, rowspan=4,
columnspan=2, sticky=N+E+S+W)
frame.columnconfigure(0, weight=1)
self.run.grid(row=4,column=0,sticky=EW)
self.stop.grid(row=4,column=1,sticky=EW)
a = Application()
a.mainframe()
a.mainloop()
You may find further information here : https://www.effbot.org/tkinterbook/listbox.htm.
Hope this helps.