I'm making an app in python, with the customtkinter library. I'm using the grid() widget manager. So far, I only have a few frames as the basic layout, but can't allign them properly. The issue is, that I want the blue frame (stats_frame), to be twice the size of the white and black frames underneath it (control_frame and current_result_frame).
How it looks like: (https://i.sstatic.net/9VUQRAKN.png)
This is the code:
import customtkinter as ctk
class Neural_Net_GUI():
def __init__(self):
# Defining the window:
self.window = ctk.CTk()
self.window.geometry('1200x800')
self.window.columnconfigure(0, weight=3)
self.window.columnconfigure(1, weight=1)
self.window.rowconfigure(0, weight=1)
self.window.rowconfigure(1, weight=10)
# self.window.rowconfigure((2, 3, 4), weight=1)
# self.window.rowconfigure(1, weight=1)
# self.window.rowconfigure((2, 3), weight=1)
# Sample frames:
self.input_frame = ctk.CTkFrame(master=self.window, fg_color='green')
self.input_frame.grid(row=0, column=0, columnspan=2, sticky='swne')
self.graph_frame = ctk.CTkFrame(master=self.window, fg_color='red')
self.graph_frame.grid(row=1, column=0, sticky='swne')
self.left_frame = ctk.CTkFrame(master=self.window)
self.left_frame.columnconfigure(0, weight=1)
# self.left_frame.rowconfigure(0, weight=1)
self.left_frame.rowconfigure(0, weight=10)
self.left_frame.rowconfigure(1, weight=1)
self.left_frame.rowconfigure(2, weight=1)
self.stats_frame = ctk.CTkFrame(master=self.left_frame, fg_color='blue')
self.stats_frame.grid(row=0, column=0, sticky='nesw')
self.control_frame = ctk.CTkFrame(master=self.left_frame, fg_color='black')
self.control_frame.grid(row=1, column=0, sticky='nesw')
self.current_result_frame = ctk.CTkFrame(master=self.left_frame, fg_color='white')
self.current_result_frame.grid(row=2, column=0, sticky='nesw')
self.left_frame.grid(row=1, column=1, sticky='swne')
N = Neural_Net_GUI()
N.window.mainloop()
I tried to adjust the weight of the row, have more rows and increase the rowspan of the frame, but nothing worked.
Does anyone please know how to fix this?
Your row and column configurations work properly for tkinter. customtkinter sets the width and height options of CTkFrame.
This affects the layout of your window.
If we set these options for all frames to the same values, for example width=0, height=0, then the window will look as it is intended.
import customtkinter as ctk
class Neural_Net_GUI():
def __init__(self):
# Defining the window:
self.window = ctk.CTk()
self.window.geometry('1200x800')
self.window.columnconfigure(0, weight=3)
self.window.columnconfigure(1, weight=1)
self.window.rowconfigure(0, weight=1)
self.window.rowconfigure(1, weight=10)
# Sample frames:
self.input_frame = ctk.CTkFrame(master=self.window, fg_color='green', width=0, height=0)
self.input_frame.grid(row=0, column=0, columnspan=2, sticky='swne')
self.graph_frame = ctk.CTkFrame(master=self.window, fg_color='red', width=0, height=0)
self.graph_frame.grid(row=1, column=0, sticky='swne')
self.left_frame = ctk.CTkFrame(master=self.window, width=0, height=0)
self.left_frame.columnconfigure(0, weight=1)
self.left_frame.rowconfigure(0, weight=2)
self.left_frame.rowconfigure(1, weight=1)
self.left_frame.rowconfigure(2, weight=1)
self.stats_frame = ctk.CTkFrame(master=self.left_frame, fg_color='blue', width=0, height=0)
self.stats_frame.grid(row=0, column=0, sticky='nesw')
self.control_frame = ctk.CTkFrame(master=self.left_frame, fg_color='black', width=0, height=0)
self.control_frame.grid(row=1, column=0, sticky='nesw')
self.current_result_frame = ctk.CTkFrame(master=self.left_frame, fg_color='white', width=0, height=0)
self.current_result_frame.grid(row=2, column=0, sticky='nesw')
self.left_frame.grid(row=1, column=1, sticky='swne')
N = Neural_Net_GUI()
N.window.mainloop()