\n","author":{"@type":"Person","name":"acw1668"},"upvoteCount":1}}}
Reputation: 156
First up, I'm really pretty bad at OOP and tkinter/customtkinter and this is only my third project I've built with classes over straight functions, so please excuse my mess. I'm getting there, and everything works except my UI.
I've included an overview diagram image (thanks Paint) to demonstrate what I have and what I'm going for. Basically, I have my main window which is a useless (and getting removed) background image inside of a label and three frames to hold my widgets. I have evenly spaced the frames (frame1, frame2, frame3) and given the upper-left (frame1) a heavier weight than it's neighbors so it uses * 2
the space. I create my entry widgets inside board_frame
which in turn is a child of frame1, within a reusable skeleton class named WidgetFrame. I want my 4x4 grid of Entry widgets and their frame to expand to fill out frame1 while remaining uniform in shape and x, y position. What keeps happening is when I mess with weights and sticky properties, the Entry widgets can be moved and resized, but I cannot get them to grow to fill the whole frame nor the frame to grow and fill the parent.
I've been fortunate to get it this far, but now I am missing something here that is probably very obvious. I've tried playing with the weights of the root frame grid_row and grid_column, trying sticky=nsew from the parents down, and the most obvious things. I will include the relevant code below, but if you need to see another piece, tell me:
First, a visual of what I mean: https://ibb.co/qst7SJG
class WidgetFrame(ctk.CTkFrame):
def __init__(self, parent_frame):
super().__init__(parent_frame)```
self.solve_label = ctk.CTkImage(dark_image=Image.open(os.path.join(assets, "solve.png")), light_image=None, size=(15, 15))
for i in range(4):
ctk.CTkButton(self.button_frame, text=f"{i}", width=130).grid(row=i, column=0, padx=10, pady=10)
if i == 3:
ctk.CTkButton(self.button_frame, text="Quit", width=130, command=self.destroy).grid(row=i, column=0, padx=10, pady=10)
elif i == 2:
ctk.CTkButton(self.button_frame, text="Help", width=130, command=self.help).grid(row=i, column=0, padx=10, pady=10)
elif i == 1:
ctk.CTkButton(self.button_frame, text="Clear", command=self.clear_entries, text_color="black", width=130, fg_color="#e79a00", hover_color="#ffaa00").grid(row=i, column=0, padx=10, pady=10)
elif i == 0:
ctk.CTkButton(self.button_frame, text="Solve", command=self.solve_board, text_color="black", image=self.solve_label, fg_color="#009f00", hover_color="#005900").grid(row=i, column=0, padx=10, pady=10)
self.entry_vars = [[ctk.StringVar() for _ in range(4)] for _ in range(4)]
self.board_entries = []
for i in range(4):
row_entries = []
for j in range(4):
entry = ctk.CTkEntry(
self.board_frame,
bg_color="transparent",
fg_color="transparent",
justify="center",
width=55,
height=55,
textvariable=self.entry_vars[i][j],
corner_radius=2
)
entry.grid(row=i, column=j, padx=4, pady=4, sticky="nsew")
row_entries.append(entry)
self.entry_vars[i][j].trace_add(
"write", lambda *args, r=i, c=j: self.validate_entry(r, c)
)
self.board_entries.append(row_entries)
print(self.grid_slaves(0, 0)) # DEBUG
class MainWindow(ctk.CTk):
def __init__(self):
super().__init__()
self.title("Wordament Solver")
self.entryfont = ctk.CTkFont(family=fontfile, size=26)
self.image = ctk.CTkImage(Image.open(os.path.join(assets, "colorkit.png")), size=(2280, 1700))
self.geometry(CenterWindowToDisplay(self, 620, 610, self._get_window_scaling()))
self.resizable(False, False)
self.minsize(620, 570)
self.grid_columnconfigure(0, weight=1)
self.grid_columnconfigure(1, weight=1)
self.grid_rowconfigure(0, weight=1)
self.grid_rowconfigure(1, weight=1)
self.background_label = ctk.CTkLabel(self, image=self.image, text="", anchor="center")
self.background_label.grid(row=0, column=0, sticky="nsew"
self.main_frame = ctk.CTkFrame(self, bg_color="transparent", fg_color="transparent", corner_radius=0)
self.main_frame.grid(row=0, column=0, padx=5, pady=5, sticky="nsew")
self.main_frame.grid_rowconfigure(0, weight=1)
self.main_frame.grid_rowconfigure(1, weight=1)
self.main_frame.grid_columnconfigure(0, weight=2)
self.main_frame.grid_columnconfigure(1, weight=1)
self.frame1 = ctk.CTkFrame(self.main_frame, border_width=0, bg_color="transparent", fg_color="transparent", corner_radius=0)
self.frame1.grid(row=0, column=0, padx=5, pady=5, ipady=5)
self.frame1.grid_rowconfigure(0, weight=1)
self.frame1.grid_columnconfigure(0, weight=1)
self.frame2 = ctk.CTkFrame(self.main_frame, bg_color="transparent", corner_radius=0)
self.frame2.grid(row=0, column=1, padx=5, pady=5, sticky="nswe")
self.frame2.grid_rowconfigure(0, weight=1)
self.frame2.grid_columnconfigure(0, weight=1)
self.frame3 = ctk.CTkFrame(self.main_frame, bg_color="transparent", corner_radius=0)
self.frame3.grid(row=1, column=0, padx=10, pady=5, sticky="nsew", columnspan=2)
self.frame3.grid_rowconfigure(1, weight=1)
self.frame3.grid_columnconfigure(0, weight=1)
self.button_frame = WidgetFrame(self.frame2)
self.button_frame.grid(row=0, column=0, padx=5, pady=10, ipady=10, sticky="nsew")
self.button_frame.grid_rowconfigure(0, weight=1)
self.button_frame.grid_columnconfigure(0, weight=1)
self.board_frame = WidgetFrame(self.frame1)
self.board_frame.grid(row=0, column=0, padx=5, pady=5, ipady=5, sticky="nsew")
self.board_frame.grid_rowconfigure(0, weight=0)
self.board_frame.grid_columnconfigure(0, weight=1)
create_widgets(self)
I've explained in the submission, but here is the recap:
I've tried playing with the weights of the root frame grid_row and grid_column, trying sticky=nsew from the parents down, and the most obvious things. Also, some of this code got proper formatting and some did not between C&P from IDE to this MD box.
Upvotes: 0
Views: 46
Reputation: 46811
add sticky="nsew"
to self.frame1.grid(...)
to make self.frame1
occupy available space;
change the two lines:
self.board_frame.grid_rowconfigure(0, weight=0)
self.board_frame.grid_columnconfigure(0, weight=1)
to
self.board_frame.grid_rowconfigure((0,1,2,3), weight=1)
self.board_frame.grid_columnconfigure((0,1,2,3), weight=1)
So that the 4x4 widgets occupy all the available space.
Result:
Upvotes: 1