I already asked this question, but got answers only for pack-Manager.
I want to create a GUI with tkinter in python using grid-Method and grid_columnconfigure/grid_rowconfigure. Unfortunately, this is not working inside a Frame.
from tkinter import *
master = Tk()
master.state('zoomed')
f = Frame(master, width=800, height=400)
Label1 = Label(f, text='Label 1')
Label2 = Label(f, text='Label 2')
f.grid_columnconfigure(0, weight=1)
f.grid_columnconfigure(2, weight=1)
f.grid_columnconfigure(4, weight=1)
Label1.grid(row=0, column=1)
Label2.grid(row=0, column=3)
master.grid_rowconfigure(0, weight=1)
master.grid_rowconfigure(2, weight=1)
master.grid_columnconfigure(0, weight=1)
master.grid_columnconfigure(2, weight=1)
f.grid(row=1, column=1)
master.mainloop()
I expected to have space between the two labels, but this is not working, because Frame is not taking more space inside master. How can I do this?
This works for me - but it would be easier to use pack()
Frame will not change size to Labels size:
f.grid_propagate(False)
Column and row in which is Frame will use all space (because there are not other columns and rows)
master.grid_rowconfigure(1, weight=1)
master.grid_columnconfigure(1, weight=1)
Frame will resize to column and row size (which already use all space in window)
f.grid(..., sticky='news')
To test code I added background colors - it shows me real size of widgets.
Code:
from tkinter import *
master = Tk()
master['bg'] = 'red'
master.grid_rowconfigure(1, weight=1)
master.grid_columnconfigure(1, weight=1)
f = Frame(master, width=400, height=300)
f.grid(row=1, column=1, sticky='news')
f.grid_propagate(False)
f.grid_columnconfigure(0, weight=1)
f.grid_columnconfigure(2, weight=1)
f.grid_columnconfigure(4, weight=1)
l1 = Label(f, text='Label 1', bg='green')
l2 = Label(f, text='Label 2', bg='green')
l1.grid(row=0, column=1)
l2.grid(row=0, column=3)
master.mainloop()
If you remove width=400, height=300 then window will have no size at start.
Related
I'm trying to create an app with a frame with two frames inside, but I want one of then to be wider than the other... I found a way to do it using grid, but when I add a scrollbar on one of the frames it readjusts the grid and both frames get the same size.
Here is the code working without the scrollbar:
def __init__(self, master=None):
ctk.set_appearance_mode('system')
ctk.set_default_color_theme('blue')
self.__root = ctk.CTk() if master is None else ctk.CTkToplevel(master)
self.__root. Configure(height=1500, width=944)
self.__root.minsize(1500, 944)
self.__main_container = ctk.CTkFrame(self.__root)
self.__image_frame = ctk.CTkFrame(self.__main_container)
self.__image_frame.configure(height=800, width=1000)
self.__image_canvas = ctk.CTkCanvas(self.__image_frame)
self.__image_canvas.configure(confine="true", cursor="crosshair")
self.__image_canvas.grid(column=0, row=0, sticky="nsew")
self.__image_canvas.bind("<ButtonPress-1>", self.__start_drawing)
self.__image_canvas.bind("<ButtonRelease-1>", self.__end_drawing)
self.__image_canvas.bind("<B1-Motion>", self.__draw_rectangle)
self.__image_frame.grid(column=0, padx=10, pady=20, row=0, sticky="nsew")
self.__image_frame.grid_propagate(0)
self.__image_frame.grid_anchor("center")
self.__image_frame.rowconfigure(0, weight=1)
self.__image_frame.columnconfigure(0, weight=1)
self.__boxes_frame = ctk.CTkFrame(self.__main_container)
self.__boxes_frame.configure(height=800, width=400)
self.__boxes_frame.grid(column=1, padx=10, pady=20, row=0, sticky="ns")
self.__main_container.grid(column=0, padx=20, pady=40, row=0, sticky="ns")
self.__main_container.grid_anchor("center")
self.__main_container.rowconfigure(0, weight=1)
self.__root.grid_anchor("center")
self.__root.rowconfigure(0, weight=1)
self.mainwindow = self.__root
And this is the code when I add the scrollbar and messes the grid
def __init__(self, master=None):
ctk.set_appearance_mode('system')
ctk.set_default_color_theme('blue')
self.__root = ctk.CTk() if master is None else ctk.CTkToplevel(master)
self.__root. Configure(height=1500, width=944)
self.__root.minsize(1500, 944)
self.__main_container = ctk.CTkFrame(self.__root)
self.__image_frame = ctk.CTkFrame(self.__main_container)
self.__image_frame.configure(height=800, width=1000)
self.__image_canvas = ctk.CTkCanvas(self.__image_frame)
self.__image_canvas.configure(confine="true", cursor="crosshair")
self.__image_canvas.grid(column=0, row=0, sticky="nsew")
self.__image_canvas.bind("<ButtonPress-1>", self.__start_drawing)
self.__image_canvas.bind("<ButtonRelease-1>", self.__end_drawing)
self.__image_canvas.bind("<B1-Motion>", self.__draw_rectangle)
#------ adding the scrollbar -----
self.__image_frame_vertical_scrollbar = ctk.CTkScrollbar(self.__image_frame, orientation="vertical")
self.__image_frame_vertical_scrollbar.grid(column=1, row=0, sticky="ns")
self.__image_frame_vertical_scrollbar.configure(command=self.__image_canvas.yview)
self.__image_canvas.configure(yscrollcommand=self.__image_frame_vertical_scrollbar.set)
#---------------------------------
self.__image_frame.grid(column=0, padx=10, pady=20, row=0, sticky="nsew")
self.__image_frame.grid_propagate(0)
self.__image_frame.grid_anchor("center")
self.__image_frame.rowconfigure(0, weight=1)
self.__image_frame.columnconfigure(0, weight=1)
self.__boxes_frame = ctk.CTkFrame(self.__main_container)
self.__boxes_frame.configure(height=800, width=400)
self.__boxes_frame.grid(column=1, padx=10, pady=20, row=0, sticky="ns")
self.__main_container.grid(column=0, padx=20, pady=40, row=0, sticky="ns")
self.__main_container.grid_anchor("center")
self.__main_container.rowconfigure(0, weight=1)
self.__root.grid_anchor("center")
self.__root.rowconfigure(0, weight=1)
self.mainwindow = self.__root
What is wrong with the grid definition that is messing things up? How can I set the __image_frame grid to it fills the __main_container keeping the desired dimensions?
Set the size of the canvas explicitly
self.__image_canvas = ctk.CTkCanvas(self.__image_frame, width=900)
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'm creating a simple GUI with Python Tkinter, and using Frame as containers. When I added a Listbox inside the Frame, it only occupies a small space in the Frame, rest space remains empty. I want it to cover whole Frame. Here's the code, and the output as image:
from tkinter import *
root = Tk()
root.geometry('1280x720')
root.title("Music Player")
root.grid_rowconfigure((0,1,2,3,4,5), weight=1)
root.grid_columnconfigure((0,), weight=1)
root.grid_columnconfigure((1,), weight=5)
root.resizable(False, False)
listframel = Frame(root, highlightbackground="black", highlightthickness=5)
listframel.grid(row=0, column=0, sticky=NSEW, rowspan=5)
listframer = Frame(root, highlightbackground="black", highlightthickness=5)
listframer.grid(row=0, column=1, sticky=NSEW, rowspan=5)
listbox = Listbox(listframel)
listbox.grid(row=0, column=0, rowspan=5, sticky=NSEW)
lst = list(x for x in range(100))
for i in range(len(lst)):
listbox.insert(i+1, lst[i]+1)
root.mainloop()
You need to apply grid_rowconfigure and grid_columnconfigure to all containers (root, listframel and listframer).
I did search for a lot of examples before posting but still can't properly use the tkinter grid.
What I want:
my code:
import tkinter as tk
from tkinter import ttk
root = tk.Tk()
b1 = ttk.Button(root, text='b1')
b1.grid(row=0, column=0, sticky=tk.W)
e1 = ttk.Entry(root)
e1.grid(row=0, column=1, sticky=tk.EW)
t = ttk.Treeview(root)
t.grid(row=1, column=0, sticky=tk.NSEW)
scroll = ttk.Scrollbar(root)
scroll.grid(row=1, column=1, sticky=tk.E+tk.NS)
scroll.configure(command=t.yview)
t.configure(yscrollcommand=scroll.set)
root.columnconfigure(0, weight=1)
root.columnconfigure(1, weight=1)
root.rowconfigure(1, weight=1)
root.mainloop()
The quick and simple solution is to define the columnspan of the treeview. This will tell the treeview to spread across 2 columns and allow the entry field to sit next to your button.
On an unrelated note you can use strings for your sticky so you do not have to do things like tk.E+tk.NS. Instead simply use "nse" or whatever directions you need. Make sure thought you are doing them in order of "nsew".
import tkinter as tk
from tkinter import ttk
root = tk.Tk()
b1 = ttk.Button(root, text='b1')
b1.grid(row=0, column=0, sticky="w")
e1 = ttk.Entry(root)
e1.grid(row=0, column=1, sticky="ew")
t = ttk.Treeview(root)
t.grid(row=1, column=0, columnspan=2, sticky="nsew") # columnspan=2 goes here.
scroll = ttk.Scrollbar(root)
scroll.grid(row=1, column=2, sticky="nse") # set this to column=2 so it sits in the correct spot.
scroll.configure(command=t.yview)
t.configure(yscrollcommand=scroll.set)
# root.columnconfigure(0, weight=1) Removing this line fixes the sizing issue with the entry field.
root.columnconfigure(1, weight=1)
root.rowconfigure(1, weight=1)
root.mainloop()
Results:
To fix your issue you mention in the comments you can delete root.columnconfigure(0, weight=1) to get the entry to expand properly.
Thanks for taking time to look at this. I've been struggling with this for almost a week and its driving me crazy.
I have a horizontal Paned Window which is supposed to stretch from the bottom of my toolbar to the bottom of my window, but it's sticking only to the bottom of the root window. Eventually I want to have a Treeview widget in the left pane and thumbnails in the right pane.
Can anyone help me to get the Paned Window to stick NSEW? Do I need to put it inside another frame?
I'm using Python 2.7 on Windows 7. (This isn't my whole program, just a sample to demonstrate the problem.)
#!/usr/bin/env python
# coding=utf-8
from Tkinter import *
from ttk import *
class MainWindow:
def null(self):
pass
def __init__(self):
self.root = Tk()
self.root.geometry("700x300")
self.root.resizable(width=TRUE, height=TRUE)
self.root.rowconfigure(0, weight=1)
self.root.columnconfigure(0, weight=1)
self.menubar = Menu(self.root)
File_menu = Menu(self.menubar, tearoff=0)
self.menubar.add_cascade(label="Pandoras Box", menu=File_menu)
File_menu.add_command(label="Black Hole", command=self.null)
self.root.config(menu=self.menubar)
self.toolbar = Frame(self.root, relief=RAISED)
self.toolbar.grid(row=0, column=0, sticky='NEW')
self.toolbar.grid_columnconfigure(0, weight=1)
self.toolbar.rowconfigure(0, weight=1)
dummy = Button(self.toolbar, text="Tool Button")
dummy.grid(row=0, column=0, sticky='EW')
Find = Label(self.toolbar, text="Search")
Search = Entry(self.toolbar)
Find.grid(row=0, column=5, sticky='E', padx=6)
Search.grid(row=0, column=6, sticky='E', padx=8)
self.info_column = Frame(self.root, relief=RAISED, width=100)
self.info_column.grid(row=0, column=5, rowspan=3, sticky='NSW')
self.info_column.grid_rowconfigure(0, weight=1)
self.info_column.grid_columnconfigure(0, weight=1)
self.rootpane = PanedWindow(self.root, orient=HORIZONTAL)
self.rootpane.grid(row=1, column=0, sticky='NS')
self.rootpane.grid_rowconfigure(0, weight=1)
self.rootpane.grid_columnconfigure(0, weight=1)
self.leftpane = Frame(self.rootpane, relief=RAISED)
self.leftpane.grid(row=0, column=0, sticky='NSEW')
self.rightpane = Frame(self.rootpane, relief=RAISED)
self.rightpane.grid(row=0, column=0, sticky='NSEW')
''' THESE BUTTONS ARE SUPPOSED TO BE INSIDE PANED WINDOW STUCK TO THE TOP!'''
but_left = Button(self.leftpane, text="SHOULD BE IN LEFT PANE UNDER TOOLBAR FRAME")
but_left.grid(row=0, column=0, sticky='NEW')
but_right = Button(self.rightpane, text="SHOULD BE IN RIGHT PANE UNDER TOOLBAR FRAME")
but_right.grid(row=0, column=0, sticky='NEW')
self.rootpane.add(self.leftpane)
self.rootpane.add(self.rightpane)
self.SbarMesg = StringVar()
self.label = Label(self.root, textvariable=self.SbarMesg, font=('arial', 8, 'normal'))
self.SbarMesg.set('Status Bar:')
self.label.grid(row=3, column=0, columnspan=6, sticky='SEW')
self.label.grid_rowconfigure(0, weight=1)
self.label.grid_columnconfigure(0, weight=1)
self.root.mainloop()
a = MainWindow()
Short answer: the space you see between the buttons and the toolbar frame is because you allow the row containing the toolbar to resize, instead of the row containing the PanedWindow... To get what you want, replace:
self.root.rowconfigure(0, weight=1)
with
self.root.rowconfigure(1, weight=1)
Other comments:
Try to avoid wildcard imports. In this case, it makes it difficult to differentiate between tk and ttk widgets
To allow resizing of widgets aligned using grid(), .rowconfigure(..., weight=x) must be called on the widget's parent not the widget itself.
background colors are very useful to debug alignment issues in tkinter.
Code:
import Tkinter as tk
import ttk
class MainWindow:
def __init__(self):
self.root = tk.Tk()
self.root.geometry("700x300")
self.root.resizable(width=tk.TRUE, height=tk.TRUE)
self.root.rowconfigure(1, weight=1)
self.root.columnconfigure(0, weight=1)
self.toolbar = tk.Frame(self.root, relief=tk.RAISED, bg="yellow")
self.toolbar.grid(row=0, column=0, sticky='NEW')
self.toolbar.columnconfigure(0, weight=1)
dummy = ttk.Button(self.toolbar, text="Tool Button")
dummy.grid(row=0, column=0, sticky='EW')
Find = tk.Label(self.toolbar, text="Search")
Search = ttk.Entry(self.toolbar)
Find.grid(row=0, column=5, sticky='E', padx=6)
Search.grid(row=0, column=6, sticky='E', padx=8)
self.info_column = tk.Frame(self.root, relief=tk.RAISED, width=100, bg="orange")
self.info_column.grid(row=0, column=5, rowspan=2, sticky='NSW')
self.rootpane = tk.PanedWindow(self.root, orient=tk.HORIZONTAL, bg="blue")
self.rootpane.grid(row=1, column=0, sticky='NSEW')
self.leftpane = tk.Frame(self.rootpane, bg="pink")
self.rootpane.add(self.leftpane)
self.rightpane = tk.Frame(self.rootpane, bg="red")
self.rootpane.add(self.rightpane)
''' THESE BUTTONS ARE SUPPOSED TO BE INSIDE PANED WINDOW STUCK TO THE TOP!'''
but_left = ttk.Button(self.leftpane, text="SHOULD BE IN LEFT PANE UNDER TOOLBAR FRAME")
but_left.grid(row=0, column=0, sticky='NEW')
but_right = ttk.Button(self.rightpane, text="SHOULD BE IN RIGHT PANE UNDER TOOLBAR FRAME")
but_right.grid(row=0, column=0, sticky='NEW')
self.label = tk.Label(self.root, text="Status:", anchor="w")
self.label.grid(row=3, column=0, columnspan=6, sticky='SEW')
self.root.mainloop()
a = MainWindow()