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()
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()
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.
I have a LabelFrame that has columnspan of 3. I would like the 2 Checkbutton widgets in the frame to be on either side. How can I grid the widgets accordingly?
I tried doing sticky='e' and sticky='w' but it is not doing what I want it to.
frame = tk.LabelFrame(window, text='Tools', font=('Helvetica', 15), fg='white',
bg='#022340')
frame.grid(row=3, column=0, sticky='ew', columnspan=3)
button1 = tk.Checkbutton(frame, text='Button1', font=('Helvetica', 15, 'bold'),bg='red')
button2 = tk.Checkbutton(frame, text='Button2', font=('Helvetica', 15, 'bold'),bg='yellow')
button1.grid(row=0, column=1, sticky='w')
button2.grid(row=0, column=0, sticky='e')
This is what I'm looking for:
I have placed a Label widget with some width and no text in between the two checkbuttons and gave it the same background as that of the root window.
I have used the grid_rowconfigure() and grid_columnconfigure() for the window and the frame to make the GUI responsive.
I have added a Label widget at the bottom of the GUI so that you can have an idea of how to add widgets below it if your app has more than the two checkbutton widgets.
import tkinter as tk
window = tk.Tk()
frame = tk.LabelFrame(window, text='Tools', font=('Helvetica', 15), fg='white', bg='#022340')
frame.grid(row=0, column=0, sticky='nsew')
window.grid_rowconfigure(0, weight=1)
window.grid_columnconfigure(0, weight=1)
frame.grid_rowconfigure((0,1), weight=1)
frame.grid_columnconfigure((1), weight=1)
button1 = tk.Checkbutton(frame, text='Button1', font=('Helvetica', 15, 'bold'), bg='red')
button2 = tk.Checkbutton(frame, text='Button2', font=('Helvetica', 15, 'bold'), bg='yellow')
# the label widget between the two checkbuttons
label_m = tk.Label(frame, width=30, bg='#022340')
label_m.grid(row=0, column=1)
# Add some padding to separate them apart
button1.grid(row=0, column=2, sticky='nsew')
button2.grid(row=0, column=0, sticky='nsew')
# a label widget to show how all widgets are placed in GUI
label = tk.Label(frame, text='A Label Widget', bg='white')
label.grid(row=1, sticky='nswe', columnspan=3)
window.mainloop()
Screenshots
Hope this helps!
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()