We Keep Coding

Why isn't my frame showing up on my window?

import tkinter
from tkinter import ttk
class GUI(tkinter.Tk):
def __init__(self):
tkinter.Tk.__init__(self)
self.geometry("500x500")
self.title("Red Frame Example")
self.grid_rowconfigure(0, weight=1)
self.grid_columnconfigure(0, weight=1)
red_frame_style = ttk.Style()
red_frame_style.configure("RedFrame.TFrame", background = "red")
red_frame = ttk.Frame(self, style="RedFrame.TFrame", width="250", height="250")
red_frame.grid_rowconfigure(0, weight=1)
red_frame.grid_columnconfigure(0, weight=1)
red_frame.grid(row=0, column=0, sticky="n")
button = tkinter.Button(red_frame, text='Stop', width=25, command=self.destroy)
button.grid(row = 1, column = 0)
gui = GUI()
gui.mainloop()
I am trying to get a 250 by 250 red frame to show up on my window in tkinter. Answers to this question suggested splitting a line like red_frame = tkinter.Frame(self, style="RedFrame.TFrame", width="250", height="250").grid(row=0, column=0, sticky="n") into 2 different lines, which is what I tried to do in my code below, but the red frame still did not appear. What am I doing wrong here, and how can I fix it?

Button changes frame size in Tkinter

I'm new to Tkinter, and have a problem with my frames when adding widgets. In this example, I add a button which makes my frame wider when I place the button inside it with .grid().
How can I make the frame "fixed"? I want the blue frame in the code below to keep the same width when I add the button.
Thanks in advance.
Regards,
Laphroaig
class Window(Frame):
def __init__(self, master=None):
Frame.__init__(self, master)
self.master = master
master.title("Yatzy - The Game")
master.geometry("800x600+0+0")
master.iconbitmap(r'dice.ico')
master.state('zoomed')
# Create grid index for the window
for r in range(20):
self.master.rowconfigure(r, weight=1)
for c in range(20):
self.master.columnconfigure(c, weight=1)
# Place Frame 1
Frame1 = Frame(master, bg="blue")
Frame1.grid(row = 0, column = 0, rowspan = 20, columnspan = 3, sticky=W+E+N+S)
# Place Frame 2
Frame2 = Frame(master, bg="green")
Frame2.grid(row=0, column=3, rowspan=20, columnspan=17, sticky = W+E+N+S)
# Place Frame 3
Frame3 = Frame(master, bg="red")
Frame3.grid(row=5, column=8, rowspan=10, columnspan=7, sticky = W+E+N+S)
# Place button 1
btn_1 = Button(master, text="hello123")
btn_1.grid(row=0, column=0)
root = Tk()
app = Window(master=root)
app.mainloop()

You can stop content from affecting the size of a Frame with grid_propagate(False). See example below.
Other things; You inherit from Frame but never put anything inside self, instead you put everything inside self.master ie. root. I changed to put everything in self and then pack self within root.
I also removed the icon as I don't have your icon file.
from tkinter import *
class Window(Frame):
def __init__(self, master=None):
Frame.__init__(self, master)
self.master = master
master.title("Yatzy - The Game")
master.geometry("800x600+0+0")
master.state('zoomed')
self.pack(expand=True, fill='both')
# Create grid index for the window
for r in range(20):
self.rowconfigure(r, weight=1)
for c in range(20):
self.columnconfigure(c, weight=1)
# Place Frame 1
Frame1 = Frame(self, bg="blue")
Frame1.grid(row = 0, column = 0, rowspan = 20, columnspan = 3, sticky=W+E+N+S)
Frame1.grid_propagate(False) # Stop grid() from resizing container
# Place Frame 2
Frame2 = Frame(self, bg="green")
Frame2.grid(row=0, column=3, rowspan=20, columnspan=17, sticky = W+E+N+S)
# Place Frame 3
Frame3 = Frame(self, bg="red")
Frame3.grid(row=5, column=8, rowspan=10, columnspan=7, sticky = W+E+N+S)
# Place button 1
btn_1 = Button(Frame1, text="hello123")
btn_1.grid(row=0, column=0)
root = Tk()
app = Window(master=root)
app.mainloop()

tkinter scrollable canvas after adding widgets with grid manager

I'm trying to create a canvas widget with a number of widgets embedded within it. Since there will frequently be too many widgets to fit in the vertical space I have for the canvas, it'll need to be scrollable.
import tkinter as tk # for general gui
import tkinter.ttk as ttk # for notebook (tabs)
class instructionGeneratorApp():
def __init__(self, master):
# create a frame for the canvas and scrollbar
domainFrame = tk.LabelFrame(master)
domainFrame.pack(fill=tk.BOTH, expand=1)
# make the canvas expand before the scrollbar
domainFrame.rowconfigure(0,weight=1)
domainFrame.columnconfigure(0,weight=1)
vertBar = ttk.Scrollbar(domainFrame)
vertBar.grid(row=0, column=1, sticky=tk.N + tk.S)
configGridCanvas = tk.Canvas(domainFrame,
bd=0,
yscrollcommand=vertBar.set)
configGridCanvas.grid(row=0, column=0, sticky=tk.N + tk.S + tk.E + tk.W)
vertBar.config(command=configGridCanvas.yview)
# add widgets to canvas
l = tk.Label(configGridCanvas, text='Products')
l.grid(row=1, column=0)
r = 2
for product in ['Product1','Product2','Product3','Product4','Product5','Product6','Product7','Product8','Product9','Product10','Product11','Product12','Product13','Product14','Product15','Product16','Product17','Product18','Product19','Product20']:
l = tk.Label(configGridCanvas, text=product)
l.grid(row=r, column=0)
c = tk.Checkbutton(configGridCanvas)
c.grid(row=r, column=1)
r += 1
ButtonFrame = tk.Frame(domainFrame)
ButtonFrame.grid(row=r, column=0)
removeServerButton = tk.Button(ButtonFrame, text='Remove server')
removeServerButton.grid(row=0, column=0)
# set scroll region to bounding box?
configGridCanvas.config(scrollregion=configGridCanvas.bbox(tk.ALL))
root = tk.Tk()
mainApp = instructionGeneratorApp(root)
root.mainloop()
As best as I can tell, I'm following the effbot pattern for canvas scrollbars, but I end up with either a scrollbar that isn't bound to the canvas, or a canvas that is extending beyond the edges of its master frame:
I've attempted the solutions on these questions, but there's still something I'm missing:
resizeable scrollable canvas with tkinter
Tkinter, canvas unable to scroll
Any idea what I'm doing wrong?

I have added some comments to #The Pinapple 's solution for future reference.
from tkinter import *
class ProductItem(Frame):
def __init__(self, master, message, **kwds):
Frame.__init__(self, master, **kwds)
self.grid_rowconfigure(1, weight=1)
self.grid_columnconfigure(0, weight=1)
self.text = Label(self, text=message, anchor='w')
self.text.grid(row=0, column=0, sticky='nsew')
self.check = Checkbutton(self, anchor='w')
self.check.grid(row=0, column=1)
class ScrollableContainer(Frame):
def __init__(self, master, **kwargs):
#our scrollable container is a frame, this frame holds the canvas we draw our widgets on
Frame.__init__(self, master, **kwargs)
#grid and rowconfigure with weight 1 are used for the scrollablecontainer to utilize the full size it can get from its parent
self.grid_rowconfigure(0, weight=1)
self.grid_columnconfigure(0, weight=1)
#canvas and scrollbars are positioned inside the scrollablecontainer frame
#the scrollbars take a command parameter which is used to position our view on the canvas
self.canvas = Canvas(self, bd=0, highlightthickness=0)
self.hScroll = Scrollbar(self, orient='horizontal',
command=self.canvas.xview)
self.hScroll.grid(row=1, column=0, sticky='we')
self.vScroll = Scrollbar(self, orient='vertical',
command=self.canvas.yview)
self.vScroll.grid(row=0, column=1, sticky='ns')
self.canvas.grid(row=0, column=0, sticky='nsew')
#We do not only need a command to position but also one to scroll
self.canvas.configure(xscrollcommand=self.hScroll.set,
yscrollcommand=self.vScroll.set)
#This is the frame where the magic happens, all of our widgets that are needed to be scrollable will be positioned here
self.frame = Frame(self.canvas, bd=2)
self.frame.grid_columnconfigure(0, weight=1)
#A canvas itself is blank, we must tell the canvas to create a window with self.frame as content, anchor=nw means it will be positioned on the upper left corner
self.canvas.create_window(0, 0, window=self.frame, anchor='nw', tags='inner')
self.product_label = Label(self.frame, text='Products')
self.product_label.grid(row=0, column=0, sticky='nsew', padx=2, pady=2)
self.products = []
for i in range(1, 21):
item = ProductItem(self.frame, ('Product' + str(i)), bd=2)
item.grid(row=i, column=0, sticky='nsew', padx=2, pady=2)
self.products.append(item)
self.button_frame = Frame(self.frame)
self.button_frame.grid(row=21, column=0)
self.remove_server_button = Button(self.button_frame, text='Remove server')
self.remove_server_button.grid(row=0, column=0)
self.update_layout()
#If the widgets inside the canvas / the canvas itself change size,
#the <Configure> event is fired which passes its new width and height to the corresponding callback
self.canvas.bind('<Configure>', self.on_configure)
def update_layout(self):
#All pending events, callbacks, etc. are processed in a non-blocking manner
self.frame.update_idletasks()
#We reconfigure the canvas' scrollregion to fit all of its widgets
self.canvas.configure(scrollregion=self.canvas.bbox('all'))
#reset the scroll
self.canvas.yview('moveto', '1.0')
#fit the frame to the size of its inner widgets (grid_size)
self.size = self.frame.grid_size()
def on_configure(self, event):
w, h = event.width, event.height
natural = self.frame.winfo_reqwidth() #natural width of the inner frame
#If the canvas changes size, we fit the inner frame to its size
self.canvas.itemconfigure('inner', width=w if w > natural else natural)
#dont forget to fit the scrollregion, otherwise the scrollbar might behave strange
self.canvas.configure(scrollregion=self.canvas.bbox('all'))
if __name__ == "__main__":
root = Tk()
root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)
sc = ScrollableContainer(root, bd=2)
sc.grid(row=0, column=0, sticky='nsew')
root.mainloop()

From what I can tell you are looking for something like this..
from tkinter import *
class ProductItem(Frame):
def __init__(self, master, message, **kwds):
Frame.__init__(self, master, **kwds)
self.grid_rowconfigure(1, weight=1)
self.grid_columnconfigure(0, weight=1)
self.text = Label(self, text=message, anchor='w')
self.text.grid(row=0, column=0, sticky='nsew')
self.check = Checkbutton(self, anchor='w')
self.check.grid(row=0, column=1)
class ScrollableContainer(Frame):
def __init__(self, master, **kwargs):
Frame.__init__(self, master, **kwargs) # holds canvas & scrollbars
self.grid_rowconfigure(0, weight=1)
self.grid_columnconfigure(0, weight=1)
self.canvas = Canvas(self, bd=0, highlightthickness=0)
self.hScroll = Scrollbar(self, orient='horizontal',
command=self.canvas.xview)
self.hScroll.grid(row=1, column=0, sticky='we')
self.vScroll = Scrollbar(self, orient='vertical',
command=self.canvas.yview)
self.vScroll.grid(row=0, column=1, sticky='ns')
self.canvas.grid(row=0, column=0, sticky='nsew')
self.canvas.configure(xscrollcommand=self.hScroll.set,
yscrollcommand=self.vScroll.set)
self.frame = Frame(self.canvas, bd=2)
self.frame.grid_columnconfigure(0, weight=1)
self.canvas.create_window(0, 0, window=self.frame, anchor='nw', tags='inner')
self.product_label = Label(self.frame, text='Products')
self.product_label.grid(row=0, column=0, sticky='nsew', padx=2, pady=2)
self.products = []
for i in range(1, 21):
item = ProductItem(self.frame, ('Product' + str(i)), bd=2)
item.grid(row=i, column=0, sticky='nsew', padx=2, pady=2)
self.products.append(item)
self.button_frame = Frame(self.frame)
self.button_frame.grid(row=21, column=0)
self.remove_server_button = Button(self.button_frame, text='Remove server')
self.remove_server_button.grid(row=0, column=0)
self.update_layout()
self.canvas.bind('<Configure>', self.on_configure)
def update_layout(self):
self.frame.update_idletasks()
self.canvas.configure(scrollregion=self.canvas.bbox('all'))
self.canvas.yview('moveto', '1.0')
self.size = self.frame.grid_size()
def on_configure(self, event):
w, h = event.width, event.height
natural = self.frame.winfo_reqwidth()
self.canvas.itemconfigure('inner', width=w if w > natural else natural)
self.canvas.configure(scrollregion=self.canvas.bbox('all'))
if __name__ == "__main__":
root = Tk()
root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)
sc = ScrollableContainer(root, bd=2)
sc.grid(row=0, column=0, sticky='nsew')
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.

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()