Related
Every time I click on the buttons I get a error. Could anyone help me by providing a fix or telling me what the issue was because I cant see the issue.
Whenever the button is clicked it is supposed to open a new page and the side bar on the left with the buttons in should stay where they are at.
import tkinter
import tkinter.messagebox
import customtkinter
customtkinter.set_appearance_mode("dark")
customtkinter.set_default_color_theme("dark-blue")
class App(customtkinter.CTk):
def __init__(self):
super().__init__()
# configure window
self.title("Opium")
self.geometry(f"{1100}x{580}")
# configure grid layout (4x4)
self.grid_columnconfigure(1, weight=1)
self.grid_columnconfigure((2, 3), weight=0)
self.grid_rowconfigure((0, 1, 2), weight=1)
# create sidebar frame with widgets
self.content_label = customtkinter.CTkLabel(self, text="", font=customtkinter.CTkFont(size=30, weight="bold"))
self.content_label.grid(row=0, column=1, rowspan=4, sticky="nsew", padx=(10, 0), pady=(20, 10))
self.sidebar_frame = customtkinter.CTkFrame(self, width=140, corner_radius=0)
self.sidebar_frame.grid(row=0, column=0, rowspan=4, sticky="nsew")
self.sidebar_frame.grid_rowconfigure(4, weight=1)
self.logo_label = customtkinter.CTkLabel(self.sidebar_frame, text="Opium", font=customtkinter.CTkFont(size=30, weight="bold"))
self.logo_label.grid(row=0, column=0, padx=20, pady=(20, 10))
self.sidebar_button_1 = customtkinter.CTkButton(self.sidebar_frame, text="Button 1", command=self.sidebar_button_event)
self.sidebar_button_1.grid(row=1, column=0, padx=20, pady=10)
self.sidebar_button_2 = customtkinter.CTkButton(self.sidebar_frame, text="Button 2", command=self.sidebar_button_event)
self.sidebar_button_2.grid(row=2, column=0, padx=20, pady=10)
self.sidebar_button_3 = customtkinter.CTkButton(self.sidebar_frame, text="Button 3", command=self.sidebar_button_event)
self.sidebar_button_3.grid(row=3, column=0, padx=20, pady=10)
self.appearance_mode_label = customtkinter.CTkLabel(self.sidebar_frame, text="Appearance Mode:", anchor="w")
self.appearance_mode_label.grid(row=5, column=0, padx=20, pady=(10, 0))
self.appearance_mode_optionemenu = customtkinter.CTkOptionMenu(self.sidebar_frame, values=["Light", "Dark", "System"],
command=self.change_appearance_mode_event)
self.appearance_mode_optionemenu.grid(row=6, column=0, padx=20, pady=(10, 10))
def open_input_dialog_event(self):
dialog = customtkinter.CTkInputDialog(text="Type in a number:", title="CTkInputDialog")
print("CTkInputDialog:", dialog.get_input())
def change_appearance_mode_event(self, new_appearance_mode: str):
customtkinter.set_appearance_mode(new_appearance_mode)
def change_scaling_event(self, new_scaling: str):
new_scaling_float = int(new_scaling.replace("%", "")) / 100
customtkinter.set_widget_scaling(new_scaling_float)
def sidebar_button_event(self):
try:
self.right_frame.destroy()
except AttributeError:
pass
self.right_frame = customtkinter.CTkFrame(self, bg="white", width=900, height=580)
self.right_frame.grid(row=0, column=1, rowspan=3, columnspan=2, sticky="nsew")
self.home_label = customtkinter.CTkLabel(self.right_frame, text="Home", font=customtkinter.CTkFont(size=30, weight="bold"), bg="white")
self.home_label.pack(side="top", fill="both", padx=20, pady=20)
if __name__ == "__main__":
app = App()
app.mainloop()
I have tested the code and the error you are getting when clicking the buttons is
ValueError: ['bg'] are not supported arguments. Look at the documentation for supported arguments.
As the error already says, bg is not a supported argument by customtkinter.
https://github.com/TomSchimansky/CustomTkinter/wiki/CTkLabel#arguments
In your specific case you have to change the two instances of bg="white" to bg_color="white".
import tkinter
import tkinter.messagebox
import customtkinter
customtkinter.set_appearance_mode("dark")
customtkinter.set_default_color_theme("dark-blue")
class App(customtkinter.CTk):
def __init__(self):
super().__init__()
# configure window
self.title("Opium")
self.geometry(f"{1100}x{580}")
# configure grid layout (4x4)
self.grid_columnconfigure(1, weight=1)
self.grid_columnconfigure((2, 3), weight=0)
self.grid_rowconfigure((0, 1, 2), weight=1)
# create sidebar frame with widgets
self.content_label = customtkinter.CTkLabel(
self, text="", font=customtkinter.CTkFont(size=30, weight="bold"))
self.content_label.grid(
row=0, column=1, rowspan=4, sticky="nsew", padx=(10, 0), pady=(20, 10))
self.sidebar_frame = customtkinter.CTkFrame(
self, width=140, corner_radius=0)
self.sidebar_frame.grid(row=0, column=0, rowspan=4, sticky="nsew")
self.sidebar_frame.grid_rowconfigure(4, weight=1)
self.logo_label = customtkinter.CTkLabel(
self.sidebar_frame, text="Opium", font=customtkinter.CTkFont(size=30, weight="bold"))
self.logo_label.grid(row=0, column=0, padx=20, pady=(20, 10))
self.sidebar_button_1 = customtkinter.CTkButton(
self.sidebar_frame, text="Button 1", command=self.sidebar_button_event)
self.sidebar_button_1.grid(row=1, column=0, padx=20, pady=10)
self.sidebar_button_2 = customtkinter.CTkButton(
self.sidebar_frame, text="Button 2", command=self.sidebar_button_event)
self.sidebar_button_2.grid(row=2, column=0, padx=20, pady=10)
self.sidebar_button_3 = customtkinter.CTkButton(
self.sidebar_frame, text="Button 3", command=self.sidebar_button_event)
self.sidebar_button_3.grid(row=3, column=0, padx=20, pady=10)
self.appearance_mode_label = customtkinter.CTkLabel(
self.sidebar_frame, text="Appearance Mode:", anchor="w")
self.appearance_mode_label.grid(row=5, column=0, padx=20, pady=(10, 0))
self.appearance_mode_optionemenu = customtkinter.CTkOptionMenu(self.sidebar_frame, values=["Light", "Dark", "System"],
command=self.change_appearance_mode_event)
self.appearance_mode_optionemenu.grid(
row=6, column=0, padx=20, pady=(10, 10))
def open_input_dialog_event(self):
dialog = customtkinter.CTkInputDialog(
text="Type in a number:", title="CTkInputDialog")
print("CTkInputDialog:", dialog.get_input())
def change_appearance_mode_event(self, new_appearance_mode: str):
customtkinter.set_appearance_mode(new_appearance_mode)
def change_scaling_event(self, new_scaling: str):
new_scaling_float = int(new_scaling.replace("%", "")) / 100
customtkinter.set_widget_scaling(new_scaling_float)
def sidebar_button_event(self):
try:
self.right_frame.destroy()
except AttributeError:
pass
self.right_frame = customtkinter.CTkFrame(
self, bg_color="white", width=900, height=580)
self.right_frame.grid(row=0, column=1, rowspan=3,
columnspan=2, sticky="nsew")
self.home_label = customtkinter.CTkLabel(
self.right_frame, text="Home", font=customtkinter.CTkFont(size=30, weight="bold"), bg_color="white")
self.home_label.pack(side="top", fill="both", padx=20, pady=20)
if __name__ == "__main__":
app = App()
app.mainloop()
For the next time please be so kind and include the error message you are getting with your question
I'm making a game based off of the periodic table with tkinter. I made the particle frame just fine, so I decided to copy the code and reuse it for the element frame, changing only the variable names. But for some reason, even though the particle frame works just fine, nothing shows up for the element frame. Here is my full code:
# Boilerplate
import random
import periodictable as pt
from tkinter import *
root = Tk()
root.title('Periodic Table Game')
root.geometry('350x250')
LightBlue = "#b3c7d6"
Menu = Frame(root)
elementFrame = Frame(root)
particleFrame = Frame(root)
settingsFrame = Frame(root)
root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)
for AllFrames in (Menu, elementFrame, particleFrame, settingsFrame):
AllFrames.grid(row=0, column=0, sticky='nsew')
AllFrames.configure(bg=LightBlue)
def show_frame(frame):
frame.tkraise()
show_frame(Menu)
# Menu Frame
Menu.grid_columnconfigure(0, weight=1)
root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)
MenuTitle = Label(Menu, text="Periodic Table Game", font=("Arial", 15), bg=LightBlue)
MenuTitle.grid(row=0, column=0, pady=25)
MenuTitle.grid_rowconfigure(1, weight=1)
MenuTitle.grid_columnconfigure(1, weight=1)
MenuButton1 = Button(Menu, width=25, text="Guess The Particles", command=lambda: show_frame(particleFrame))
MenuButton1.grid(row=1, column=0)
MenuButton2 = Button(Menu, width=25, text="Guess The Element Name", command=lambda: show_frame(elementFrame))
MenuButton2.grid(row=2, column=0, pady=5)
SettingsButton = Button(Menu, width=25, text="Settings", command=lambda: show_frame(settingsFrame))
SettingsButton.grid(row=3, column=0)
# Particle Frame
particleFrame.grid_columnconfigure(0, weight=1)
BackButtonF2 = Button(particleFrame, text='Back', command=lambda: show_frame(Menu))
BackButtonF2.grid(row=0, column=0, sticky=W)
ParticleLabel = Label(particleFrame, text='testing', bg=LightBlue)
ParticleLabel.grid(row=1, column=0, pady=15)
ParticleEntry = Entry(particleFrame)
ParticleEntry.grid(row=2, column=0, pady=10)
ParticleEnter = Button(particleFrame, text='Enter', width=10)
ParticleEnter.grid(row=3, column=0, pady=10)
# Element Frame
elementFrame.grid_columnconfigure(0, weight=1)
BackButtonF3 = Button(particleFrame, text='Back', command=lambda: show_frame(Menu))
BackButtonF3.grid(row=0, column=0, sticky=W)
ElementLabel = Label(particleFrame, text='testing', bg=LightBlue)
ElementLabel.grid(row=1, column=0, pady=15)
ElementEntry = Entry(particleFrame)
ElementEntry.grid(row=2, column=0, pady=10)
ElementEnter = Button(particleFrame, text='Enter', width=10)
ElementEnter.grid(row=3, column=0, pady=10)
root.mainloop()
Why does identical code work only with one frame?
Precisely, because you copied the code you don't spot where the issue is.
When you are defining the element frame widgets you are placing them all into particleFrame.
Example:
BackButtonF3 = Button(particleFrame, text='Back', command=lambda: show_frame(Menu))
should be
BackButtonF3 = Button(elementFrame, text='Back', command=lambda: show_frame(Menu))
Your problem will be solved.
Change this particleFrame, to elementFrame
snippet code:
BackButtonF3 = Button(elementFrame, text='Back', command=lambda: show_frame(Menu))
BackButtonF3.grid(row=0, column=0, sticky=W)
ElementLabel = Label(elementFrame, text='testing', bg=LightBlue)
ElementLabel.grid(row=1, column=0, pady=15)
ElementEntry = Entry(elementFrame)
ElementEntry.grid(row=2, column=0, pady=10)
ElementEnter = Button(elementFrame, text='Enter', width=10)
ElementEnter.grid(row=3, column=0, pady=10)
Screenshot before:
Screenshot after same as elementFrame and particleFrame:
root frame weight is correct when button btnOpen is not present (commented). Otherwise the weight of root and frLeft is about 1:1. Why button (or frame frButtons) makes a difference?
Here is the code:
from tkinter import *
root = Tk()
root.title("xxx")
root.geometry("500x400")
root.rowconfigure(0, weight=1)
root.columnconfigure(0, weight=15)
root.columnconfigure(1, weight=10)
frLeft = Frame(root, bg="#808080")
frLeft.grid(row=0, column=0, sticky="NSEW")
frRight = Frame(root, bg="#FAF0F0")
frRight.grid(row=0, column=1, sticky="NSEW")
frRight.rowconfigure(0, weight=1)
frButtons = Frame(frRight, bg="red")
frButtons.grid(row=0, column=0, sticky="W", padx=10, pady=10)
btnOpen = Button(frButtons, command=open, text='Open', padx=2).grid(row=0, sticky="WS", padx=10)
root.mainloop()
Correct:
Not correct:
I am creating a Calculator application with Tkinter, and I've included all the useful buttons there. But the problem is whenever I resize my Tkinter window to a custom size using geometry() method, all buttons don't scale up in the same ratio. To be precise, the buttons in the first column strech a lot leaving other buttons the same size they were. Is there a way to fix all this because it has become harder to include more things in the default size.
Here are some images:
Without custom geometry-
With custom geometry (800x800)-
Here's the useful bit of code:
root = Tk()
root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)
root.resizable(False, False)
segoe_font = tkFont.Font(family='Segoe UI', size=16)
segoe_font_ac = tkFont.Font(family='Segoe UI', size=8)
entry_text = StringVar()
inout = Entry(root, textvariable=entry_text)
inout.grid(row=0, column=0, columnspan=4, sticky="nsew")
button18 = Button(root, text="AC", command=allclear, font=segoe_font_ac).grid(row=1, column=0, sticky="nsew")
button1 = Button(root, text="C", command=clear, font=segoe_font).grid(row=1, column=1, sticky="nsew")
button2 = Button(root, text="/", command=divide, font=segoe_font).grid(row=1, column=2, sticky="nsew")
button3 = Button(root, text="×", command=multiply, font=segoe_font).grid(row=1, column=3, sticky="nsew")
button5 = Button(root, text="7", command=tsev, font=segoe_font).grid(row=2, column=0, sticky="nsew")
button6 = Button(root, text="8", command=teig, font=segoe_font).grid(row=2, column=1, sticky="nsew")
button7 = Button(root, text="9", command=tnin, font=segoe_font).grid(row=2, column=2, sticky="nsew")
button4 = Button(root, text="-", command=minus, font=segoe_font).grid(row=2, column=3, sticky="nsew")
button9 = Button(root, text="4", command=tfou, font=segoe_font).grid(row=3, column=0, sticky="nsew")
button10 = Button(root, text="5", command=tfiv, font=segoe_font).grid(row=3, column=1, sticky="nsew")
button11 = Button(root, text="6", command=tsix, font=segoe_font).grid(row=3, column=2, sticky="nsew")
button8 = Button(root, text="+", command=plus, font=segoe_font).grid(row=3, column=3, sticky="nsew")
button12 = Button(root, text="1", command=tone, font=segoe_font).grid(row=4, column=0, sticky="nsew")
button13 = Button(root, text="2", command=ttwo, font=segoe_font).grid(row=4, column=1, sticky="nsew")
button14 = Button(root, text="3", command=tthr, font=segoe_font).grid(row=4, column=2, sticky="nsew")
button15 = Button(root, text="=", command=equals, font=segoe_font).grid(row=4, column=3, rowspan=2, sticky="nsew")
button16 = Button(root, text="0", command=tzer, font=segoe_font).grid(row=5, column=0, columnspan=2, sticky="nsew")
button17 = Button(root, text=".", command=decimal, font=segoe_font).grid(row=5, column=2, sticky="nsew")
entry_text.trace("w", lambda *args: character_limit_and_check_entered_value(entry_text))
root.mainloop()
Can anyone help?
When you resize a window, the grid geometry manager will allocate extra space to every row and every column that has a non-zero weight. The weight is proportional, so a column with a weight of 2 will get twice as many of the extra pixels as a column with a weight of 1. By default, all columns have a weight of zero.
If you want every column or row to be given a percentage of extra available space, you need to give them a non-zero weight. If you want the columns or rows to have an identical width or height you can use the uniform option. All rows or columns with the same uniform value will be of a uniform height or width.
Since you explicitly gave a non-zero weight to only the first row and the first column, that row and column is going to be allocated all extra space. This is why the top entry widget grows in width and height, and all of the buttons in the first column grow in width.
In your case I'm guessing you want the top entry widget to stay the same height, while all of the buttons expand equally. To do that, remove your existing calls to rowconfigure and columnconfigure and replace them with the following:
root.grid_rowconfigure((1,2,3,4,5), weight=1, uniform="row")
root.grid_columnconfigure((0,1,2,3), weight=1, uniform="column")
I think this will help you. I made simple example with 6 buttons but I think you will manage to do it for your case. So I think best option is to use Grid.rowconfigure and Grid.columnconfigure funcitons.
Example code:
from tkinter import *
root = Tk()
root.title("resize button")
root.geometry("500x500")
# here you need to put on what do you want to use row configure, index(row) and weight
Grid.rowconfigure(root, 0, weight=1) # we use on root, row=0 weight=1
Grid.columnconfigure(root, 0, weight=1)
#configure 2nd row
Grid.rowconfigure(root, 1, weight=1)
#configure 3rd row
Grid.rowconfigure(root, 2, weight=1)
#configure 2nd column
Grid.columnconfigure(root, 1, weight=1)
button1 = Button(root, text="Button1")
button2 = Button(root, text="Button2")
button3 = Button(root, text="Button3")
button1.grid(row=0, column=0, sticky="nsew")
button2.grid(row=1, column=0, sticky="nsew")
button3.grid(row=2, column=0, sticky="nsew")
button1_1 = Button(root, text="Button1_1")
button2_1 = Button(root, text="Button2_1")
button3_1 = Button(root, text="Button3_1")
button1_1.grid(row=0, column=1, sticky="nsew")
button2_1.grid(row=1, column=1, sticky="nsew")
button3_1.grid(row=2, column=1, sticky="nsew")
root.mainloop()
Now buttons are resizing with canvas.
in my GUI I used two panedwindow widgets with two inside frames for each of them. All works as I axpected, except the resizing.. when I resize the frames, all widgets start to flick, and I really don't like to see it.
To understand better the issue, I took a piece of code from my real program and I simplified it as much as possible:
from tkinter import *
from tkinter import ttk
class MainWindow:
def __init__(self):
# main window:
self.parent=Tk()
self.parent.geometry("760x620+370+100")
self.parent.title("Main Window")
self.parent.configure(background="#f0f0f0")
self.parent.minsize(760, 600)
self.Frame1=PanedWindow(self.parent, orient=HORIZONTAL)
self.Frame1.grid(row=0, column=0, padx=(5,4), pady=(6,0), sticky="nswe")
self.parent.grid_columnconfigure(0, weight=1)
self.parent.grid_rowconfigure(0, weight=1)
self.Frame1_1=Frame(self.Frame1)
self.Frame1_1.pack(side=LEFT)
self.Frame1_2=Frame(self.Frame1)
self.Frame1_2.pack(side=RIGHT)
self.Frame1_1.grid_columnconfigure(0, weight=1)
self.Frame1_1.grid_rowconfigure(0, weight=1)
# Frame1_1:
self.Frame1_1_1=PanedWindow(self.Frame1_1, orient=VERTICAL)
self.Frame1_1_1.grid(row=0, column=0, sticky="nswe")
self.MainNotebook=ttk.Notebook(self.Frame1_1_1)
self.MainNotebook.pack(fill=BOTH, expand=True)
self.MainNotebookFrame=Frame(self.MainNotebook, background="white")
self.MainNotebookFrame.pack()
self.MainNotebook.add(self.MainNotebookFrame, text="Tab1")
self.Search1SV=StringVar()
self.Search1Entry=ttk.Entry(self.MainNotebookFrame, textvariable=self.Search1SV)
self.Search1Entry.pack(fill=BOTH, padx=5, pady=5)
self.TVDFrame=Frame(self.MainNotebookFrame, background="white", highlightbackground="#7a7a7a", highlightthickness=1)
self.TVDFrame.pack(fill=BOTH, expand=True, padx=5, pady=(0,4))
self.TVDFrame.grid_columnconfigure(1, weight=1)
self.TVDFrame.grid_rowconfigure(1, weight=1)
self.TreeView1=ttk.Treeview(self.TVDFrame, height=10, selectmode="browse")
self.TreeView1.grid(row=0, column=0, columnspan=3, rowspan=3, sticky="nsew")
self.HeaderFrame=Frame(self.TVDFrame, height=25, background="#d9ebf9")
self.HeaderFrame.grid(row=0, column=0, columnspan=3, sticky="nsew")
ttk.Label(self.HeaderFrame, text="Languages:", background="#d9ebf9").grid(row=0, column=0, pady=3)
self.TreeView1SBY=ttk.Scrollbar(self.TVDFrame, orient="vertical", command=self.TreeView1.yview)
self.TreeView1SBY.grid(row=0, column=2, rowspan=2, sticky="nse")
self.TreeView1.configure(yscroll=self.TreeView1SBY.set)
self.TreeView1.insert("", "end", text="Ciao")
self.TreeView1.insert("", "end", text="Hola")
self.TreeView1.insert("", "end", text="привет")
Frame(self.TVDFrame, height=1, width=4, background="white", highlightthickness=0, highlightbackground="white").grid(row=0, column=0, columnspan=3, sticky="new")
Frame(self.TVDFrame, height=1, width=4, background="white", highlightthickness=0, highlightbackground="white").grid(row=2, column=0, columnspan=3, sticky="ew")
Frame(self.TVDFrame, width=1, height=4, background="white", highlightthickness=0, highlightbackground="white").grid(row=0, column=0, rowspan=3, sticky="ns")
self.SecondNotebookFrame=Frame(self.Frame1_1_1)
self.SecondNotebookFrame.pack(fill=BOTH)
self.SecondNotebook=ttk.Notebook(self.SecondNotebookFrame)
self.SecondNotebook.pack(fill=BOTH, expand=True, pady=(2,1))
self.OptionalFrame1=Frame(self.SecondNotebook, background="white")
self.OptionalFrame1.pack()
self.SecondNotebook.add(self.OptionalFrame1, text="Tab1")
self.OptionalFrame2=Frame(self.OptionalFrame1, background="white", highlightbackground="#7a7a7a", highlightthickness=1)
self.OptionalFrame2.pack(fill=BOTH, expand=True, padx=5, pady=(5,4))
self.PBFrame1=Frame(self.Frame1_1, background="white", highlightbackground="#d9d9d9", highlightthickness=1)
self.PBFrame1.grid(row=1, column=0, padx=(1,3), pady=(3,1), sticky="nswe")
self.PBFrame2=Frame(self.PBFrame1, background="white", highlightbackground="#7a7a7a", highlightthickness=1)
self.PBFrame2.pack(fill=BOTH, padx=5, pady=5)
self.Progressbar=ttk.Progressbar(self.PBFrame2, mode="determinate", maximum=100, value=0)
self.Progressbar.pack(fill=BOTH, padx=10, pady=10)
# frame Frame1_2:
self.WorkNotebook=ttk.Notebook(self.Frame1_2)
self.WorkNotebook.pack(fill=BOTH, expand=True, pady=(1,0))
self.WorkNotebookFrame=Frame(self.WorkNotebook, background="white")
self.WorkNotebookFrame.pack()
self.WorkNotebook.add(self.WorkNotebookFrame, text="Tab1")
self.WorkNotebookFrame=Frame(self.WorkNotebookFrame, background="white", highlightbackground="#7a7a7a", highlightthickness=1)
self.WorkNotebookFrame.pack(fill=BOTH, expand=True, padx=5, pady=(5,4))
self.PBFrame1=Frame(self.Frame1_1, background="white", highlightbackground="#d9d9d9", highlightthickness=1)
self.PBFrame1.grid(row=1, column=0, padx=(1,3), pady=(3,1), sticky="nswe")
self.PBFrame2=Frame(self.PBFrame1, background="white", highlightbackground="#7a7a7a", highlightthickness=1)
self.PBFrame2.pack(fill=BOTH, padx=5, pady=5)
self.Progressbar=ttk.Progressbar(self.PBFrame2, mode="determinate", maximum=100, value=0)
self.Progressbar.pack(fill=BOTH, padx=10, pady=10)
self.Frame1.add(self.Frame1_1, minsize=230)
self.Frame1.add(self.Frame1_2, minsize=250)
self.Frame1_1_1.add(self.MainNotebook, minsize=56)
self.Frame1_1_1.add(self.SecondNotebookFrame, minsize=104)
# end:
self.parent.mainloop()
if __name__=="__main__":
app=MainWindow()
in addition I attached also a GIF and this image shows exactly when the issue happen:
how can I solve the resizing issue?