We Keep Coding

Why doesn't the column width fill the frame using `weight` in tkinter?

I have run in to a diffuctly where despite using the sticky and weight options from the grid and columnconfigure methods respectively, I am unable to make the column expand the entire width of my frame.
I have read through this post which explains things well, however I haven't had any luck. Below is a simplified example of my code, where the desired result can be achieved by uncommenting the lines using the pack method, which I'd like to replicate using the grid method as well.
import tkinter as tk
class myGUI(tk.Frame):
class ScrollableFrame(tk.Frame):
def __init__(self, parent):
# Create scrollbar
self.frame = tk.Frame(parent)
self.canvas = tk.Canvas(self.frame)
self.yscrollbar = tk.Scrollbar(self.canvas, orient='vertical', command=self.canvas.yview)
tk.Frame.__init__(self, self.canvas)
self.canvas.create_window((0, 0), window=self, anchor='nw')
# Configure scrollbar
self.canvas.configure(yscrollcommand=self.yscrollbar.set)
self.canvas.bind('<Configure>', lambda e: self.canvas.configure(scrollregion=self.canvas.bbox('all')))
# Pack scrollbar
self.canvas.pack(side='left', fill='both', expand=True)
self.yscrollbar.pack(side='right', fill='y')
# Configure placement
self.pack = self.frame.pack
self.place = self.frame.place
self.grid = self.frame.grid
def __init__(self, parent):
tk.Frame.__init__(self, parent)
self.wrap = tk.LabelFrame(parent)
self.myFrame = self.ScrollableFrame(parent)
for i in range(50):
tk.Button(self.myFrame, text='My Button - '+str(i)).pack()
# self.myFrame.pack(fill='both', expand='yes')
# self.wrap.pack(fill='both', expand='yes')
self.myFrame.grid(row=0, column=0, sticky = 'news')
self.wrap.grid(row=1, column=0, sticky = 'news')
parent.columnconfigure(0, weight=1)
parent.columnconfigure(1, weight=1)
parent.rowconfigure(0, weight=1)
parent.rowconfigure(1, weight=1)
if __name__ == "__main__":
root = tk.Tk()
root.geometry('500x500')
root.title('Scrollbar Test')
myGUI(root)
root.mainloop()

Resize button in Tkinter GUI Python

I've created a simple GUI application with Tkinter.
I have two questions about this code:
import tkinter as tk
from tkinter import ttk, Grid, Frame, N, S, W, E, StringVar, Label, Entry, RAISED, Button, Checkbutton, Scrollbar
class mainApp(Frame):
def __init__(self, parent):
Frame.__init__(self, parent)
self.parent = parent
self.scan_button = Button(self.parent, text="Scan", command=self.scan_wifi)
self.forget_button = Button(self.parent, text="Forget", command=self.forget_wifi)
self.reboot_button = Button(self.parent, text="Reboot", command=self.reboot)
frame=Frame(self.parent)
Grid.rowconfigure(self.parent, 0, weight=1)
Grid.columnconfigure(self.parent, 0, weight=1)
frame.grid(row=0, column=0, sticky=N+S+E+W)
grid=Frame(self.parent)
grid.grid(sticky=N+S+E+W, column=0, row=7, columnspan=2)
Grid.rowconfigure(self.parent, 7, weight=1)
Grid.columnconfigure(self.parent, 0, weight=1)
headings=('Name', 'Address', 'Quality', 'Channel', 'Signal Level', 'Encryption')
row=[]
rows=[]
self.table = ttk.Treeview(show="headings", selectmode="browse")
self.table["columns"]=headings
self.table["displaycolumns"]=headings
for head in headings:
self.table.heading(head, text=head, anchor=tk.CENTER)
self.table.column(head, width=30, anchor=tk.CENTER)
self.scrolltable = tk.Scrollbar(command=self.table.yview)
self.table.configure(yscrollcommand=self.scrolltable.set)
self.scrolltable.grid(row=1, column=100, sticky=N+S)
for row in rows:
self.table.insert('', tk.END, values=tuple(row))
self.table.bind('<ButtonRelease-1>', self.OnRelease)
self.table.grid(row=0, rowspan=14, columnspan = 21, sticky=N+S+E+W)
self.scan_button.grid(row=15, column = 1, columnspan = 1, sticky=N+S+E+W)
self.forget_button.grid(row=15, column = 0, columnspan = 1 , sticky=N+S+E+W)
self.reboot_button.grid(row=15, column = 3, columnspan = 1 , sticky=N+S+E+W)
def OnRelease(self, event):
pass
def scan_wifi(self):
pass
def forget_wifi(self):
pass
def reboot(self):
pass
root=tk.Tk()
app = mainApp(root)
root.mainloop()
1) How I can move the button on the top of the window?
2) Why, if I resize the window, the button "Forget" becomes bigger than other buttons? How I can make all buttons identical size?

Because you have called columnconfigure(0, weight=1) only, therefore only the Forget button will be resized when the window is resized.
To move the buttons to the top of the window, you need to rearrange the buttons to row=0 and the Treeview to row=1. Below is modified code based on yours:
import tkinter as tk
from tkinter import ttk
class mainApp(tk.Frame):
def __init__(self, parent):
tk.Frame.__init__(self, parent)
self.parent = parent
# buttons
self.forget_button = tk.Button(self.parent, text='Forget', command=self.forget_wifi)
self.scan_button = tk.Button(self.parent, text='Scan', command=self.scan_wifi)
self.reboot_button = tk.Button(self.parent, text='Reboot', command=self.reboot)
self.forget_button.grid(row=0, column=0, sticky='nsew')
self.scan_button.grid(row=0, column=1, sticky='nsew')
self.reboot_button.grid(row=0, column=2, sticky='nsew')
# make the 3 buttons same width
for i in range(3):
self.parent.columnconfigure(i, weight=1)
# make the treeview and the scrollbar to fill the remaining space
self.parent.rowconfigure(1, weight=1)
# treeview and scrollbar
frame = tk.Frame(self.parent)
frame.grid(row=1, column=0, columnspan=3, sticky='nsew')
headings=('Name', 'Address', 'Quality', 'Channel', 'Signal Level', 'Encryption')
self.table = ttk.Treeview(frame, show='headings', selectmode='browse')
self.table['columns'] = headings
self.table['displaycolumns'] = headings
for head in headings:
self.table.heading(head, text=head, anchor=tk.CENTER)
self.table.column(head, width=30, anchor=tk.CENTER)
self.scrolltable = tk.Scrollbar(frame, command=self.table.yview)
self.table.configure(yscrollcommand=self.scrolltable.set)
self.table.pack(side=tk.LEFT, fill=tk.BOTH, expand=1)
self.scrolltable.pack(side=tk.RIGHT, fill=tk.Y)
self.table.bind('<ButtonRelease-1>', self.OnRelease)
def OnRelease(self, event):
pass
def scan_wifi(self):
pass
def forget_wifi(self):
pass
def reboot(self):
pass
root=tk.Tk()
app = mainApp(root)
root.mainloop()

python tkinter button binding in canvas grid and adding scrollbar to canvas

How can I get the scrollbar to show up on canvas.
# python dashboard
import tkinter as tk
from tkinter import *
#======================{{{
class AutoScrollbar(Scrollbar):
def set(self, lo, hi):
if float(lo) <= 0.0 and float(hi) >= 1.0:
self.tk.call("grid", "remove", self)
else:
self.grid()
Scrollbar.set(self, lo, hi)
def pack(self, **kw):
raise TclError("cannot use pack with this widget")
def place(self, **kw):
raise TclError("cannot use place with this widget")
#====}}}
#===================={{{
class Dashboard():
def __init__(self, root):
self.root=root
root.title("Dashboard View")
canvasContainer = tk.Frame(root)
self.canvas=tk.Canvas(canvasContainer, width=1000, height=700,background='#002B36')
canvasContainer.grid(row=0,column=3)
frame = Frame(self.root, bd=2, relief=SUNKEN)
frame.grid(row=0,column=0, sticky="nw")
b1=Button(frame,text="Status", command=lambda color="#DC322F", filename="dashboard_content.txt" : self.contents(color,filename)).grid(row = 0,column = 0, sticky = "we")
b2=Button(frame,text="Processes", command=lambda color="#859900", filename="process.log" : self.contents(color,filename)).grid(row = 0,column = 1, sticky = "we")
b3=Button(frame,text="Links", command=lambda color="#B58900", filename="links.log" : self.contents(color,filename)).grid(row = 1,column = 0, sticky = "we")
b4=Button(frame,text="Traffic", command=lambda color="#268BD2", filename="version.log" : self.contents(color,filename)).grid(row = 1,column = 1, sticky = "we")
b5=Button(frame,text="App Version", command=lambda color="#D33682", filename="version.log" : self.contents(color,filename)).grid(row = 2,column = 0, sticky = "we")
b6=Button(frame,text="Archive/Purge", command=lambda color="#93A1A1", filename="cleanup.log" : self.contents(color,filename)).grid(row = 2,column = 1, sticky = "we")
# self.contents("blue","dashboard_content.txt")
# b1.bind("<ButtonPress-1>", lambda events, color="blue", filename="dashboard_content.txt" : self.contents(color,filename))
vsb = AutoScrollbar(canvasContainer,orient=VERTICAL)
hsb = AutoScrollbar(canvasContainer, orient=HORIZONTAL)
vsb.grid(row=0, column=2, sticky="ns")
hsb.grid(row=1, column=1, sticky="ew")
self.canvas.grid(row=0,column=1,sticky="news")
self.canvas.config(yscrollcommand=vsb.set, xscrollcommand=hsb.set, scrollregion=self.canvas.bbox("all"))
vsb.config(command=self.canvas.yview)
hsb.config(command=self.canvas.xview)
canvasContainer.grid_rowconfigure(0, weight=1)
canvasContainer.grid_columnconfigure(0, weight=1)
self.canvas.update_idletasks()
# Grid.columnconfigure(self.root,1,weight=1, minsize=100)
def contents(self, color="blue", filename="dashboard_content.txt"):
fhandle = open(filename)
lines = fhandle.read()
fhandle.close()
self.canvas.delete("all")
text1=self.canvas.create_text(0, 0, fill=color, anchor=NW)
self.canvas.itemconfig(text1, text=lines)
#===========}}}
if __name__== '__main__':
root=tk.Tk()
board=Dashboard(root)
root.mainloop()
If I don't have the contents function, the scrollbar appears. How Can I have a scrollbar around canvas in this case.

You have several problems in your code. The biggest problem is that you are trying to solve too many problems at once.
If you are just starting out, you need to solve layout problems one at a time. It appears you want two major areas in your GUI -- a panel of buttons, and a canvas with scrollbars. So, start by creating two frames, one for each. Give them distinctive colors so you can see what is what. Make sure this two areas are fully functional before trying anything else By that I mean, make sure they resize appropriately when you resize the window.
So, start with the following simple program. Notice that there are no buttons and no canvas. We're just creating the basic scaffolding of the GUI.
import Tkinter as tk
class Dashboard():
def __init__(self, root):
self.root=root
root.title("Dashboard View")
# the width, height and colors are temporary,
# until we have more of the GUI working.
buttonPanel = tk.Frame(root, background="green", width=200, height=200)
canvasPanel = tk.Frame(root, background="pink", width=500, height=500)
# because these two panels are side-by-side, pack is the
# best choice:
buttonPanel.pack(side="left", fill="y")
canvasPanel.pack(side="right", fill="both", expand=True)
# fill in these two areas:
self._create_buttons(buttonPanel)
self._create_canvas(canvasPanel)
def _create_buttons(self, parent):
pass
def _create_canvas(self, parent):
pass
if __name__== '__main__':
root=tk.Tk()
board=Dashboard(root)
root.mainloop()
Does that behave the way you expect? I'll assume so. Now, as long as the buttons go in the left, and the canvas and scrollbars go on the right, we no longer have to worry about the two areas interacting with each other.
Now, create the canvas:
def _create_canvas(self, parent):
self.canvas=tk.Canvas(parent, width=1000, height=700,background='#002B36')
vsb = tk.Scrollbar(parent, command=self.canvas.yview, orient="vertical")
hsb = tk.Scrollbar(parent, command=self.canvas.xview, orient="horizontal")
self.canvas.configure(yscrollcommand=vsb.set, xscrollcommand=hsb.set)
vsb.grid(row=0, column=0, sticky="ns")
hsb.grid(row=1, column=0, sticky="ew")
self.canvas.grid(row=0, column=1, sticky="nsew")
parent.grid_rowconfigure(0, weight=1)
parent.grid_columnconfigure(1, weight=1)
Run the program again. Do you see the scrollbars? Is everything still working properly when you resize the window?
The next step would be to add the buttons:
def _create_buttons(self, parent):
b1=tk.Button(parent,text="Status", command=lambda: self._contents("#DC322F", "dashboard_content.txt"))
b2=tk.Button(parent,text="Processes", command=lambda: self._contents("#859900", "process.log"))
b3=tk.Button(parent,text="Links", command=lambda: self._contents("#B58900", "links.log"))
b4=tk.Button(parent,text="Traffic", command=lambda: self._contents("#268BD2", "version.log"))
b5=tk.Button(parent,text="App Version", command=lambda: self._contents("#D33682", "version.log"))
b6=tk.Button(parent,text="Archive/Purge", command=lambda: self._contents("#93A1A1", "cleanup.log"))
b1.grid(row = 0,column = 0, sticky = "we")
b2.grid(row = 0,column = 1, sticky = "we")
b3.grid(row = 1,column = 0, sticky = "we")
b4.grid(row = 1,column = 1, sticky = "we")
b5.grid(row = 2,column = 0, sticky = "we")
b6.grid(row = 2,column = 1, sticky = "we")
Run the program again, and make sure there are still no layout problems.
See where this is going? Solve just one problem at a time. Organize your code in sections. Collect all of your layout commands in one place so you can better visualize what widgets go together.

Python GUI frame and button layout, how to add frame and buttons to correct location?

def create_layout(frame):
frame = Frame(frame, bg = 'red')
frame.pack(side = LEFT, fill=BOTH)
b = Button(frame, text='Button1', command=pressed, padx = 20)
b.pack(pady = 20, padx = 20)
c = Button(frame, text='Button2', command=pressed, padx=20)
c.pack(pady = 20, padx = 20)
I got this code so far, assume that from Tkinter import * has already been called and the frame has already had its size and colour set. It should look like the picture below. However i can't ever get button 3 and 4 to the frame on the right, whenever i add a button it goes in the red frame.

OK, the first set of buttons, button 1 & 2 are in the "frame", buttons 3 & 4 should be left out.
So with buttons 1 & 2, open the frame with the bg of red, pack it with side=tk.LEFT, fill with both & expand it.
With buttons 3 & 4, just side them LEFT and expand. That will work like a treat ;-)

You need to add another frame that sits to the right, and then pack button3 and button4 into that. Maybe change the previous frame you have there to frame1 and then have:
frame2 = Frame(frame, bg = "yellow")
frame2.pack(side = RIGHT, fill = BOTH)
Then, create the buttons and pack them in. Hope this helps!

You have 2 frames, and 4 buttons.
Let us create a function called create_widgets() which will only consist in calling 2 other functions create_frames() and create_buttons()
For the frames, we use the grid() layout manager:
def create_frames(self):
self.left_frame = tk.Frame(width=140, height=140, background='red')
self.left_frame.grid(row=0, column=0)
self.right_frame = tk.Frame(width=300, height=140, background='gold2')
self.right_frame.grid(row=0, column=1)
This will create this interface:
Let us design create_buttons() in a way it only consists in calling to 2 different functions, each having a specific task:
create_left_frame_buttons() to create buttons for the left frame
create_right_frame_buttons() to create buttons for the right frame
Here is their simple implementation:
def create_buttons(self):
self.create_left_frame_buttons()
self.create_right_frame_buttons()
def create_left_frame_buttons(self):
self.button1 = tk.Button(self.left_frame, text='Button1')
self.button1.grid(row=0, column=0, padx=30, pady=20)
self.button2 = tk.Button(self.left_frame, text='Button2')
self.button2.grid(row=1, column=0, padx=30, pady=20)
def create_right_frame_buttons(self):
self.button1 = tk.Button(self.right_frame, text='Button3')
self.button1.grid(row=0, column=0, padx=20, pady=50)
self.button2 = tk.Button(self.right_frame, text='Button4')
self.button2.grid(row=0, column=1, padx=70)
Note that I used the options padx and pady to create a suitable spacing between the buttons.
Up to this moment, this is the resulting interface:
You can see both the left and right frames are shrinking, and the result is ugly. To fix this issue, we can set rid_propagate(0) for each frame.
So based on these observations and following Tkinter best practices, here is the full code:
import tkinter as tk
class MainApplication(tk.Frame):
def __init__(self, master):
self.master = master
tk.Frame.__init__(self, self.master)
self.configure_gui()
self.create_widgets()
def configure_gui(self):
self.master.title('Simple layout')
self.master.geometry('440x140')
self.master.resizable(0, 0)
def create_widgets(self):
self.create_frames()
self.create_buttons()
def create_frames(self):
self.left_frame = tk.Frame(width=140, height=140, background='red')
self.left_frame.grid_propagate(0)
self.left_frame.grid(row=0, column=0)
self.right_frame = tk.Frame(width=300, height=140, background='gold2')
self.right_frame.grid_propagate(0)
self.right_frame.grid(row=0, column=1)
def create_buttons(self):
self.create_left_frame_buttons()
self.create_right_frame_buttons()
def create_left_frame_buttons(self):
self.button1 = tk.Button(self.left_frame, text='Button1')
self.button1.grid(row=0, column=0, padx=30, pady=20)
self.button2 = tk.Button(self.left_frame, text='Button2')
self.button2.grid(row=1, column=0, padx=30, pady=20)
def create_right_frame_buttons(self):
self.button1 = tk.Button(self.right_frame, text='Button3')
self.button1.grid(row=0, column=0, padx=20, pady=50)
self.button2 = tk.Button(self.right_frame, text='Button4')
self.button2.grid(row=0, column=1, padx=70)
if __name__ == '__main__':
root = tk.Tk()
main_app = MainApplication(root)
root.mainloop()
Demo:

Tk grid won't resize properly

I'm trying to write a simple ui with Tkinter in python and I cannot get the widgets within a grid to resize. Whenever I resize the main window the entry and button widgets do not adjust at all.
Here is my code:
class Application(Frame):
def __init__(self, master=None):
Frame.__init__(self, master, padding=(3,3,12,12))
self.grid(sticky=N+W+E+S)
self.createWidgets()
def createWidgets(self):
self.dataFileName = StringVar()
self.fileEntry = Entry(self, textvariable=self.dataFileName)
self.fileEntry.grid(row=0, column=0, columnspan=3, sticky=N+S+E+W)
self.loadFileButton = Button(self, text="Load Data", command=self.loadDataClicked)
self.loadFileButton.grid(row=0, column=3, sticky=N+S+E+W)
self.columnconfigure(0, weight=1)
self.columnconfigure(1, weight=1)
self.columnconfigure(2, weight=1)
app = Application()
app.master.title("Sample Application")
app.mainloop()

Add a root window and columnconfigure it so that your Frame widget expands too. That's the problem, you've got an implicit root window if you don't specify one and the frame itself is what's not expanding properly.
root = Tk()
root.columnconfigure(0, weight=1)
app = Application(root)

I use pack for this. In most cases it is sufficient.
But do not mix both!
class Application(Frame):
def __init__(self, master=None):
Frame.__init__(self, master)
self.pack(fill = X, expand =True)
self.createWidgets()
def createWidgets(self):
self.dataFileName = StringVar()
self.fileEntry = Entry(self, textvariable=self.dataFileName)
self.fileEntry.pack(fill = X, expand = True)
self.loadFileButton = Button(self, text="Load Data", )
self.loadFileButton.pack(fill=X, expand = True)

A working example. Note that you have to explicitly set the configure for each column and row used, but columnspan for the button below is a number greater than the number of displayed columns.
## row and column expand
top=tk.Tk()
top.rowconfigure(0, weight=1)
for col in range(5):
top.columnconfigure(col, weight=1)
tk.Label(top, text=str(col)).grid(row=0, column=col, sticky="nsew")
## only expands the columns from columnconfigure from above
top.rowconfigure(1, weight=1)
tk.Button(top, text="button").grid(row=1, column=0, columnspan=10, sticky="nsew")
top.mainloop()