Tkinter Grid of Labels with fixed column-sizes - python-3.x

I just started to learn python and tried to setup a simple GUI with Tkinter.
I am having problems understanding the grid feature of Tkinter.
I want to create a GUI, where I can dynamically add new frames with a fixed setup.
For simplicity, I just used labels in this example.
This is my code:
from tkinter import *
def newLabelWithContent(root, name):
frame = Frame(root)
frame.grid_columnconfigure(tuple(range(18)), weight=1)
frame.grid_rowconfigure(0, weight=1)
frame.pack(fill="both", side = TOP)
Label(frame, text=name, borderwidth=2, relief="groove").grid(column=0, row=0, sticky="news", columnspan=6)
Label(frame, text="Actual", borderwidth=2, relief="groove").grid(column=6, row=0, sticky="news", columnspan=4)
Label(frame, text="Unit", borderwidth=2, relief="groove").grid(column=10, row=0, sticky="news", columnspan=1)
Label(frame, text="Type", borderwidth=2, relief="groove").grid(column=11, row=0, sticky="news", columnspan=1)
Label(frame, text="Set Value", borderwidth=2, relief="groove").grid(column=12, row=0, sticky="news", columnspan=4)
Label(frame, text="Set-/Action-Button", borderwidth=2, relief="groove").grid(column=16, row=0, sticky="news", columnspan=2)
for widget in frame.winfo_children():
widget.grid(padx=0, pady=2)
root = Tk()
root.title("BaseTopic")
root.geometry("500x200")
newLabelWithContent(root, "First Element")
newLabelWithContent(root, "Second Elemnt")
newLabelWithContent(root, "Short")
newLabelWithContent(root, "Looooooooooooooooooooong")
root.mainloop()
The result looks like this:
But I want that all columns have the same size, no matter which text is displayed on the labels. So it looks more like a table. When the window is resized the labels should resize too.

It is hard to align those labels if they are in different frames. Put all of them inside same frame instead.
from tkinter import *
def newLabelWithContent(frame, name):
cols, rows = frame.grid_size()
Label(frame, text=name, borderwidth=2, relief="groove").grid(column=0, row=rows, sticky="news", columnspan=6)
Label(frame, text="Actual", borderwidth=2, relief="groove").grid(column=6, row=rows, sticky="news", columnspan=4)
Label(frame, text="Unit", borderwidth=2, relief="groove").grid(column=10, row=rows, sticky="news", columnspan=1)
Label(frame, text="Type", borderwidth=2, relief="groove").grid(column=11, row=rows, sticky="news", columnspan=1)
Label(frame, text="Set Value", borderwidth=2, relief="groove").grid(column=12, row=rows, sticky="news", columnspan=4)
Label(frame, text="Set-/Action-Button", borderwidth=2, relief="groove").grid(column=16, row=rows, sticky="news", columnspan=2)
for widget in frame.winfo_children():
widget.grid(padx=0, pady=2)
root = Tk()
root.title("BaseTopic")
root.geometry("800x200")
frame = Frame(root)
frame.pack(fill='both', expand=1)
frame.grid_columnconfigure(tuple(range(18)), weight=1)
newLabelWithContent(frame, "First Element")
newLabelWithContent(frame, "Second Elemnt")
newLabelWithContent(frame, "Short")
newLabelWithContent(frame, "Looooooooooooooooooooong")
root.mainloop()

Related

Why is the tkinter text widget screwing up my cell sizes?

All was going well as seen in the 1st pic below. all the cells are the same perfect size. its great.
But then comes the implementation of the textbox. and all hell breaks loose. as seen in the 2nd picture it completely disrupts my grid layout. i dont want the textbox adjusting cell sizes, i want it to go where i tell it to go like all the other widgets do. Ive spent hours on this and no avail!
import tkinter as tk
from tkinter import ttk, scrolledtext
root = tk.Tk()
root.state('zoomed')
root.configure(background='#8585ad')
for i in range(0,20):
for x in range(0,20):
root.columnconfigure(i, weight=1)
root.rowconfigure(x, weight=1)
for i in range(0, 20): # 0-19(20 is excluded) so this will loop 10x
for x in range(0, 20):
tk.Label(root, text=f"C-{i}, R-{x}", bg="green", fg="white").grid(column=i, row=x, sticky="NSEW", padx=1, pady=1)
main_frame = tk.Label(root, text="MAIN FRAME", bg="blue", fg="white", anchor="n").grid(column=1, row=1, columnspan=18, rowspan=18, sticky="NSEW")
frame1 = tk.Label(root, text="FRAME 1", bg="red", fg="white", anchor="n").grid(column=2, row=2, columnspan=3, rowspan=16, sticky="NSEW")
frame2 = tk.Label(root, text="FRAME 2", bg="green", fg="white", anchor="n").grid(column=6, row=2, columnspan=6, rowspan=16, sticky="NSEW")
frame3 = tk.Label(root, text=" FRAME 3", bg="red", fg="white", anchor="n").grid(column=13, row=2, columnspan=5, rowspan=16, sticky="NSEW")
for i in range(2, 5): # start at 2 and end after the 3rd loop.
for x in range(3, 18): # to loop 15x and for index to start at 3 so i then put (3,18), 18-3 = 15
tk.Label(root, text=f"Button-{(x-2)}", bg="white", fg="black").grid(column=i, row=x, sticky="EW", padx=5, pady=5)
frame1_header = tk.Label(root, text="User Panel", bg="black", fg="white").grid(column=2, row=2, columnspan=3, sticky="SEW", padx=5, pady=5)
frame2_header = tk.Label(root, text="Editor", bg="black", fg="white").grid(column=6, row=2, columnspan=6, sticky="SEW", padx=5, pady=5)
frame3_header = tk.Label(root, text="Info Panel", bg="black", fg="white").grid(column=13, row=2, columnspan=5, sticky="SEW", padx=5, pady=5)
frame2_text_area = tk.Label(root, text="Text Box", bg="black", fg="white", anchor="center").grid(column=6, row=3, columnspan=4, rowspan=15, sticky="NSEW", padx=5, pady=5)
frame2_list_box = tk.Label(root, text="List Box", bg="grey", fg="white", anchor="center").grid(column=10, row=3, columnspan=2, rowspan=15, sticky="NSEW", padx=5, pady=5)
frame3_tab_panel = ttk.Notebook(root)
frame3_tab_panel.grid(column=13, row=3, columnspan=5, rowspan=15, sticky="NSEW", padx=5, pady=5)
tab1 = ttk.Frame(root)
tab2 = ttk.Frame(root)
tab3 = ttk.Frame(root)
frame3_tab_panel.add(tab1, text ='Generic Editor')
frame3_tab_panel.add(tab2, text ='Text Compare')
frame3_tab_panel.add(tab3, text ='Script Ref')
# width and height does indeed adjust the texbox size but the textbox still isnt properly sticking to the grid that i set.
frame3_tab_panel_tab1 = tk.Text(root, relief="ridge", bd=2, undo=True, wrap="none", background='#1E1E1E', insertbackground='white')#, width=40, height=10)
frame3_tab_panel_tab1.grid(column=13, row=4, columnspan=5, rowspan=14, padx=5, pady=5)
frame3_tab_panel_tab1.config(font=('Consolas bold',10), fg="white")
frame3_tab_panel_tab1.focus()
root.mainloop()
"""
text_area = scrolledtext.ScrolledText(tab1, wrap = tk.WORD, width=40, height=10, font=("Times New Roman", 15))
text_area.grid(column = 0, pady = 10, padx = 10)
text_area.focus()
"""
without textbox. as you can see its all perfectly even.
FYI: this is just a template im working on so i can better understand tk's positioning.
textbox ruining grid by not adjusting itself accordingly and fitting to the grid i set.
There is a lot of wrong doing in your code and you really should take a good tutorial for tkinter and you may wish to have a brief overview of tkinters geometry management.
The biggest issue is whats causes your code to work differently as you expect it, you always define the root as the master. Every widget, except for the root window, has a master and is set by the ONLY positional argument every widget requiers. Note that if None is given, the root window is set by default. This is, because tkinter is built hirachically and at the top of this hirachy stands the root window (the instance of tk.Tk()).
A master should be a container and this means either the root window, a Toplevel or a Frame. Masters can have so called children, which can be every other widget plus frames that are handled as children. The relationship between a master and a frame are various, but for the scope of this question we will just look at the geometry.
Every widget has a geometry and can be received by the universal widget method .winfo_geometry() that will give you a geometry string 'widthxheight±x_offset±y_offset' (e.g. '120x50-0+20'). The geometry string is the basement for every calculations to order your widgets, which you can affect by choosing a geometry manager and different optional keywords. With those information an output will be created and displayed on your screen.
Suggestion:
import tkinter as tk
from tkinter import ttk, scrolledtext
def populate_frame_1():
frame_1_label = tk.Label(frame_1,text='User Panel',
background = 'black',
foreground = 'white')
frame_1_label.grid(column=0,row=0,sticky='ew',columnspan=3)
frame_1.columnconfigure(0,weight=1)
frame_1.columnconfigure(1,weight=1)
frame_1.columnconfigure(2,weight=1)
for i in range(0, 3):
for x in range(1, 16):
l = tk.Button(frame_1, text=f"Button-{(x-2)}",
bg="white", fg="black")
l.grid(column=i, row=x, sticky="EW", padx=5, pady=5)
def populate_frame_2():
frame_2_label = tk.Label(frame_2,text='Editor',
background = 'black',
foreground = 'white')
textbox = tk.Text(frame_2,width=35)
listbox = tk.Listbox(frame_2,bg='yellow')
frame_2_label.grid(column=0,row=0,sticky='ew',columnspan=6)
textbox.grid(column=0,row=1,sticky='ns',columnspan=4)
listbox.grid(column=4,row=1,sticky='ns',columnspan=2)
frame_2.rowconfigure(1,weight=2)
def populate_frame_3():
frame_3_label = tk.Label(frame_3,text='Info Panel',
background = 'black',
foreground = 'white')
frame_3_label.grid(column=0,row=0,sticky='ew',columnspan=5)
control_panel = ttk.Notebook(frame_3)
tab1 = ttk.Frame(control_panel)
tab2 = ttk.Frame(control_panel)
tab3 = ttk.Frame(control_panel)
control_panel.add(tab1, text ='Generic Editor')
control_panel.add(tab2, text ='Text Compare')
control_panel.add(tab3, text ='Script Ref')
control_panel.grid(column=0,row=1,sticky='nswe')
frame3_tab_panel_tab1 = tk.Text(tab1, relief="ridge", bd=2, undo=True,
wrap="none", background='#1E1E1E',
insertbackground='white',width=40, height=10)
frame3_tab_panel_tab1.pack(fill=tk.BOTH,expand=True)
frame3_tab_panel_tab1.config(font=('Consolas bold',10), fg="white")
frame3_tab_panel_tab1.focus()
frame_3.rowconfigure(1,weight=2)
frame_3.columnconfigure(0,weight=2)
XOFFSET = 75
YOFFSET = 50
root = tk.Tk()
root.state('zoomed')
root.configure(background='#8585ad')
main_frame = tk.Frame(root,background='blue')
frame_1 = tk.Frame(main_frame,background='red')
frame_2 = tk.Frame(main_frame,background='green')
frame_3 = tk.Frame(main_frame,background='red')
main_frame.pack(fill=tk.BOTH,expand=True,
padx=XOFFSET,pady=YOFFSET)
frame_1.pack(side=tk.LEFT,fill=tk.BOTH,padx=XOFFSET,pady=YOFFSET,expand=True)
frame_2.pack(side=tk.LEFT,fill=tk.Y,pady=YOFFSET,expand=True)
frame_3.pack(side=tk.LEFT,fill=tk.BOTH,padx=XOFFSET,pady=YOFFSET,expand=True)
populate_frame_1()
populate_frame_2()
populate_frame_3()
root.mainloop()
Change
frame3_tab_panel_tab1.grid(
column=13, row=4, columnspan=5, rowspan=14, padx=5, pady=5
)
to
frame3_tab_panel_tab1.grid(
column=13, row=4, columnspan=5, rowspan=14, padx=5, pady=5,
sticky="NSEW"
)
I managed to solve it by replacing the Text() widget with the scrolledtext.ScrolledText() widget. Its strange. No grid was required and if i remove height and width then it messes it up. Why does height and width have such an impact? why does it even exist when you have things like column and row configure along with sticky. Tkinter is quite confusing sometimes with its logic. But anyways, got there in the end.
Here's the code in case anyone encounters a similar issue.
import tkinter as tk
from tkinter import ttk, scrolledtext
root = tk.Tk()
root.state('zoomed')
root.configure(background='#8585ad')
for i in range(0,20):
for x in range(0,20):
root.columnconfigure(i, weight=1)
root.rowconfigure(x, weight=1)
for i in range(0, 20): # 0-19(20 is excluded) so this will loop 10x
for x in range(0, 20):
tk.Label(root, text=f"C-{i}, R-{x}", bg="green", fg="white").grid(column=i, row=x, sticky="NSEW", padx=1, pady=1)
main_frame = tk.Label(root, text="MAIN FRAME", bg="blue", fg="white", anchor="n").grid(column=1, row=1, columnspan=18, rowspan=18, sticky="NSEW")
frame1 = tk.Label(root, text="FRAME 1", bg="red", fg="white", anchor="n").grid(column=2, row=2, columnspan=3, rowspan=16, sticky="NSEW")
frame2 = tk.Label(root, text="FRAME 2", bg="green", fg="white", anchor="n").grid(column=6, row=2, columnspan=6, rowspan=16, sticky="NSEW")
frame3 = tk.Label(root, text=" FRAME 3", bg="red", fg="white", anchor="n").grid(column=13, row=2, columnspan=5, rowspan=16, sticky="NSEW")
for i in range(2, 5): # start at 2 and end after the 3rd loop.
for x in range(3, 18): # to loop 15x and for index to start at 3 so i then put (3,18), 18-3 = 15
tk.Label(root, text=f"Button-{(x-2)}", bg="white", fg="black").grid(column=i, row=x, sticky="EW", padx=5, pady=5)
frame1_header = tk.Label(root, text="User Panel", bg="black", fg="white").grid(column=2, row=2, columnspan=3, sticky="SEW", padx=5, pady=5)
frame2_header = tk.Label(root, text="Editor", bg="black", fg="white").grid(column=6, row=2, columnspan=6, sticky="SEW", padx=5, pady=5)
frame3_header = tk.Label(root, text="Info Panel", bg="black", fg="white").grid(column=13, row=2, columnspan=5, sticky="SEW", padx=5, pady=5)
frame2_text_area = tk.Label(root, text="Text Box", bg="black", fg="white", anchor="center").grid(column=6, row=3, columnspan=4, rowspan=15, sticky="NSEW", padx=5, pady=5)
frame2_list_box = tk.Label(root, text="List Box", bg="grey", fg="white", anchor="center").grid(column=10, row=3, columnspan=2, rowspan=15, sticky="NSEW", padx=5, pady=5)
frame3_tab_panel = ttk.Notebook(root)
frame3_tab_panel.grid(column=13, row=3, columnspan=5, rowspan=15, sticky="NSEW", padx=5, pady=5)
frame3_tab_panel_tab1 = scrolledtext.ScrolledText(root, bd=2, undo=True, wrap="none", width=40, height=10, font=("Times New Roman", 15), background='#1E1E1E', insertbackground='white')
frame3_tab_panel_tab1.config(font=('Consolas bold',10), fg="white")
frame3_tab_panel_tab1.focus()
tab2 = ttk.Frame(root)
tab3 = ttk.Frame(root)
frame3_tab_panel.add(frame3_tab_panel_tab1, text ='Generic Editor')
frame3_tab_panel.add(tab2, text ='Text Compare')
frame3_tab_panel.add(tab3, text ='Script Ref')
root.mainloop()

TKinter Grid Positionning

I want to make the following with Canvas. But the bottom canvas stays centered and does not spread on all column and on one row. Where is the issue ?
Bonus: where to specify the width and height for the root windows (for instance height 400 and width 300) and grid will calculate accordingly each row and column size?
Thank you
from tkinter import *
root = Tk()
can_l = Canvas(root, bg='green')
can_c = Canvas(root, bg='blue')
can_r = Canvas(root, bg='red')
can_b = Canvas(root, bg='cyan')
can_l.grid(column=0, row=0, columnspan=1, rowspan=3)
can_c.grid(column=1, row=0, columnspan=1, rowspan=3)
can_r.grid(column=2, row=0, columnspan=1, rowspan=3)
can_b.grid(column=0, row=3, columnspan=3, rowspan=1)
root.mainloop()
Thank you Bryan, I was thinking that sticky was only to position a widget like a button in a wider widget like a canvas
I dont understand though why it does not respect me when I say columnspan = 3 for the bottom canvas
from tkinter import *
root = Tk()
can_l = Canvas(root, bg='green')
can_c = Canvas(root, bg='blue')
can_r = Canvas(root, bg='red')
can_b = Canvas(root, bg='cyan')
can_l.grid(column=0, row=0, columnspan=1, rowspan=3)
can_c.grid(column=1, row=0, columnspan=1, rowspan=3)
can_r.grid(column=2, row=0, columnspan=1, rowspan=3)
can_b.grid(column=0, row=3, columnspan=3, rowspan=1, sticky ='swse')
root.mainloop()

How am I suppose to get the width and height of a Frame in Python

In my python code, I am trying to make the width of my button the same as the width of the Frame it is in. The Frame's width changes when the window is resized. I tried Widget['width'] and Widget.winfo_width() but both of them give me errors.
My code:
from tkinter import *
root = Tk()
root.geometry('750x500')
root.minsize(750, 500)
# Frames
Screen = Frame(root, height=500, width=500, bg='pink').grid(row=0, column=0, sticky='nsew', rowspan=4)
root.grid_columnconfigure(0, weight=3)
Buttons = Frame(root, height=500, width=100, bg="blue").grid(row=0, column=1, sticky='nsew', rowspan=4, columnspan=2)
root.grid_columnconfigure(2, weight=1)
root.grid_rowconfigure(3, weight=1)
# Buttons
UpgradeBtn = Button(Buttons, text="Upgrades")
UpgradeBtn.grid(row=0, column=1, columnspan=2)
WallBreakBtn = Button(Buttons, text="Wall Breaking")
WallBreakBtn.grid(row=1, column=1, columnspan=2)
root.mainloop()
Could you help me?
The .grid method returns None so Screen and Buttons in your original code were both None, not widgets. Running .grid in a second statement means Screen or Buttons will have the winfo_XXX methods.
from tkinter import *
root = Tk()
root.geometry('750x500')
root.minsize(750, 500)
# Frames
Screen = Frame(root, height=500, width=500, bg='pink')
Screen.grid(row=0, column=0, sticky='nsew', rowspan=4) # Change
root.grid_columnconfigure(0, weight=3)
Buttons = Frame(root, height=500, width=100, bg="blue")
Buttons.grid(row=0, column=1, sticky='nsew', rowspan=4, columnspan=2) # Change
root.grid_columnconfigure(2, weight=1)
root.grid_rowconfigure(3, weight=1)
# New function
def on_upgrade():
print(Screen.winfo_width(), Screen.winfo_height())
# Buttons
UpgradeBtn = Button(Buttons, text=" w x h ", command = on_upgrade ) # Change
UpgradeBtn.grid(row=0, column=1, columnspan=2)
WallBreakBtn = Button(Buttons, text="Wall Breaking")
WallBreakBtn.grid(row=1, column=1, columnspan=2)
root.mainloop()
This prints the width and height of Screen to the console.

python3 tkinter event.x event.y negative values

In using the code reproduced below, I noticed that in both Press-Release and Motion actions, tkinter reports negative event.x values when we move the mouse from right to left.
My question: for the purposes of identifying correctly the widget that the mouse finally rested, whatever the direction taken, what is the correct way of identifying the (event.x, event.y) points in the containing frame?
#!/usr/bin/env python3
from tkinter import *
root = Tk()
def press(event):
print(f"{event.widget} clicked at: {event.x, event.y}")
print(f"{event.widget.grid_info()}")
def release(event):
print("RELEASE")
end_x, end_y = event.x, event.y
print(f"{end_x, end_y}")
locate(end_x, end_y)
def motion(event):
print(f"{event.widget}: mouse position motion at {event.x, event.y}")
def locate(end_x, end_y):
end_x = int(end_x)
end_y = int(end_y)
print(f"Released at {fr.grid_location(end_x, end_y)}")
end_col, end_row = fr.grid_location(end_x, end_y)
print(end_col, end_row)
print(f"Actual frame info: {fr.grid_info()}")
fr = Frame(root, width=200, height=300,bg="dark blue")
fr.grid(sticky=NSEW, padx=2, pady=2)
lbl1 = Label(master=fr, text="LABEL 1", padx=2, pady=2, width=10, relief=SUNKEN)
lbl1.grid(column=0, row=0, sticky=NSEW)
lbl2 = Label(master=fr, text="LABEL 2", padx=2, pady=2, width=10, relief=SUNKEN)
lbl2.grid(column=1, row=0, sticky=NSEW)
lbl3 = Label(master=fr, text="LABEL 3", padx=2, pady=2, width=10, relief=SUNKEN)
lbl3.grid(column=2, row=0, sticky=NSEW)
lbl4 = Label(master=fr, text="LABEL 4", padx=2, pady=2, width=10, relief=SUNKEN)
lbl4.grid(column=0, row=1, sticky=NSEW)
lbl5 = Label(master=fr, text="LABEL 5", padx=2, pady=2, width=10, relief=SUNKEN)
lbl5.grid(column=1, row=1, sticky=NSEW)
lbl6 = Label(master=fr, text="LABEL 6", padx=2, pady=2, width=10, relief=SUNKEN)
lbl6.grid(column=2, row=1, sticky=NSEW)
lbl1.bind_all("<Button-1>", press)
lbl1.bind_all("<ButtonRelease-1>", release)
lbl1.bind_all("<B3-Motion>", motion)
lbl1.bind_all("<ButtonRelease-3>", release)
root.mainloop()
Thanks.
for the purposes of identifying correctly the widget that the mouse finally rested, whatever the direction taken, what is the correct way of identifying the (event.x, event.y) points in the containing frame?
The x/y coordinates of the release event are relative to the widget that got the press event, which explains why the values can be negative.
The coordinates to use for finding the widget under the cursor are event.x_root and event.y_root, which you can pass to winfo_containing to get the actual widget.
For example:
def release(event):
window = root.winfo_containing(event.x_root, event.y_root)
print(f"window under the cursor: {window}")

How to reposition widgets in tkinter without disturbing adjacent widgets?

I have a button in column 5, and have several Labels at column 1, 2, 3 and 4 (each at row 0). When I use pady for my button in column 5 , other labels also come down making it harder to achieve the desired layout.
I don't know of any other way of repositioning widgets in the y-direction except pady.
Code
from tkinter import *
from tkinter import ttk
root = Tk()
root.geometry("1000x500")
root.title("Stock Manager")
root.resizable(False, False)
Label(root, text="Image", font=20).grid(column=0, row=0, pady=5, padx=50)
Label(root, text="Product No.", font=20).grid(column=1, row=0, pady=5, padx=40)
prodnumempty = Label(root, text="00547", font=16).grid(column=1, row=1)
Label(root, text="Description", font=20).grid(column=2, row=0, pady=5, padx=40)
Label(root, text="Quantity", font=20).grid(column=3, row=0, pady=5, padx=40)
Label(root, text="Price", font=20).grid(column=4, row=0, pady=5, padx=40)
historybtn = ttk.Button(root, text="See Product History").grid(column=5, row=0)
root.mainloop()
I want the See Product History button to be at the bottom while other labels should remain fixed at their position.
One approach is to have all the labels in a frame, gridded on the left, and the button gridded on th eright, in a lower row:
Something like this:
import tkinter as tk
from tkinter import ttk
root = tk.Tk()
root.geometry("1000x500")
root.title("Stock Manager")
root.resizable(False, False)
left_frame = tk.Frame(root, width=900, height=500)
tk.Label(left_frame, text="Image", font=20).grid(column=0, row=0, pady=5, padx=50)
tk.Label(left_frame, text="Product No.", font=20).grid(column=1, row=0, pady=5, padx=40)
prodnumempty = tk.Label(left_frame, text="00547", font=16).grid(column=1, row=1)
tk.Label(left_frame, text="Description", font=20).grid(column=2, row=0, pady=5, padx=40)
tk.Label(left_frame, text="Quantity", font=20).grid(column=3, row=0, pady=5, padx=40)
tk.Label(left_frame, text="Price", font=20).grid(column=4, row=0, pady=5, padx=40)
left_frame.grid(column=2, row=0)
historybtn = ttk.Button(root, text="See Product History").grid(column=5, row=1)
root.mainloop()

Resources