I'm trying to set up a grid inside of a frame which is in a larger grid structure. I've tried to distill it to the simplest version of the problem.
from tkinter import Tk, Frame, Label, Entry
root = Tk()
root.geometry('800x800')
frame1 = Frame(root, width=400, height=400, background="Blue")
frame2 = Frame(root, width=400, height=400, background="Red")
frame1.grid(row=0, column=0)
frame2.grid(row=1, column=1)
label1 = Label(frame1,text='Label1')
label1.grid()
Instead of placing the label inside of frame1, the label replaces the frame in the overall grid:
I've looked at other examples, but I haven't been able to identify why they work and mine does not.
Using jasonharper's observation that the Frame was automatically resizing itself and a similar question posted here, I was able to update the code.
from tkinter import Tk, Frame, Label
root = Tk()
root.geometry('800x800')
root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)
root.grid_rowconfigure(1, weight=1)
root.grid_columnconfigure(1, weight=1)
frame1 = Frame(root, background="Blue")
frame2 = Frame(root, background="Red")
frame1.grid(row=0, column=0, sticky="nsew")
frame2.grid(row=1, column=1, sticky="nsew")
label1 = Label(frame1,text='Label1')
label1.grid()
The changes that I made to the code are:
I removed the height and width parameters from the Frame instances because they weren't doing anything anyway.
Added weighting to the rows and columns of root, the container for the frames, to equally space the frames in the available space
Add the 'sticky' parameter to the grid placements of the frames so that the frames would take up all of the space that they were allotted.
The result:
The width= and height= of a Frame normally only apply when it has no children. Once child widgets are added, it resizes itself to fit its contents. So frame1 is still there, it's just now exactly the same size as, and entirely covered by, the label.
To turn off this auto-resizing behavior, call .grid_propagate(0) on the Frame (or .pack_propagate(0), depending on the geometry manager being used for the Frame's children).
Related
I'm creating a GUI tool and while working on it, I faced an issue that I couldn't figure out why it is happening.
I have a scrollable frame inside a canvas, however that frame is not on the top side of the canvas "even though I want it on the top side" and I noticed that the canvas can still be scrolled up above the frame (frame background is green) which is I consider a wrong behavior.
It doesn't matter how many times, I checked the code and revised/edited it, I still cannot figure it out, so I decided to check here for any hints and thank you in advance.
My code is as follow
import tkinter.ttk as ttk
from tkinter import *
root = Tk()
root.title("Checklist Buddy")
root.config(padx=10, pady=5)
root.geometry("800x500")
top_frame = Frame(root, bg="black")
top_frame.grid(row=0, column=0, sticky="NSEW")
mf = Frame(root, bg="brown")
mf.grid(row=1, column=0, sticky="NEWS")
canvas = Canvas(mf, bg="yellow")
canvas.grid(row=0, column=0, sticky="NEWS")
yscrollbar = ttk.Scrollbar(mf, command=canvas.yview)
yscrollbar.grid(row=0, column=1, sticky="ns")
canvas.bind('<Configure>', lambda e: canvas.configure(scrollregion=canvas.bbox("all")))
canvas.configure(yscrollcommand=yscrollbar.set)
bpo_frame = Frame(canvas, background="green")
win = canvas.create_window((0, 0), window=bpo_frame, height=100)
def _on_mousewheel(event):
canvas.yview_scroll(int(-1 * (event.delta / 120)), "units")
def onCanvasConfigure(event):
canvas.itemconfigure(win, width=event.width)
canvas.bind('<Configure>', onCanvasConfigure, add="+")
canvas.bind_all("<MouseWheel>", _on_mousewheel)
root.columnconfigure("all", weight=1)
root.rowconfigure("all", weight=1)
mf.columnconfigure(0, weight=1)
# mf.rowconfigure("all", weight=1)
root.mainloop()
Below is a picture to show what I mean, there shall be no empty yellow space above the green window (no scroll up shall be there as the window shall be on the top side)
The main issue here is the scrollregion of the canvas, which is set to a region with negative y-coordinates. If you want the point (0,0) to be at the top of the canvas, you need to define it. And don't change it once the canvas is reconfigured.
Also, the canvas window needs an anchor in the top left corner. Otherwise, it is centered on (0,0) and reaches half into the negative x and y coordinates.
If you change the lines 15-25 as follows, the behavior is as expected:
(Personally, I would also set the width of the window equal to the width of the canvas before scrolling the first time instead of binding this change to the <Configure>. But you may have a reason for this)
canvas = Canvas(mf, bg="yellow",scrollregion=(0, 0, 1000, 1000))
canvas.grid(row=0, column=0, sticky="NEWS")
yscrollbar = ttk.Scrollbar(mf, command=canvas.yview)
yscrollbar.grid(row=0, column=1, sticky="ns")
#canvas.bind('<Configure>', lambda e: canvas.configure(scrollregion=canvas.bbox("all")))
canvas.configure(yscrollcommand=yscrollbar.set)
bpo_frame = Frame(canvas, background="green")
win = canvas.create_window((0, 0), window=bpo_frame, height=100, anchor=NW)
I am trying to create a GUI for an application I am making and for some reason that I cannot figure out, the text widget that is inside the message_space frame is increasing the size of the message_space frame and reducing the size of the friends_space frame. I want the friends_space frame to take up 1/4th of the window size and the message_space frame to take up the remaining 3/4ts of the window size.
The red is the friends_space frame, the blue is the message_space frame.
This is how I would like the sizing of the frames to be.
This is what is happening when I add the text box.
Code
from tkinter import *
class app:
def __init__(self, master):
self.master = master
master.title("PyChat")
master.geometry("800x500")
master.configure(bg="grey")
master.resizable(0, 0)
master.grid_columnconfigure(0, weight=1)
master.grid_columnconfigure(1, weight=3)
master.grid_rowconfigure(0, weight=1)
self.friends_space = Frame(master, bg="red")
self.friends_space.grid(row=0, column=0, sticky=NSEW)
self.chat_space = Frame(master, bg="blue")
self.chat_space.grid(row=0, column=1, columnspan=3, sticky=NSEW)
self.message_area = Text(self.chat_space)
self.message_area.grid(row=0, column=0)
root = Tk()
my_gui = app(root)
root.mainloop()
If you're using grid, you divide your UI into four uniform-width columns (using the uniform option), then have the text widget span three.
You should also start with a small text widget that can grow into the space. Otherwise tkinter will try to preserve the large size and start removing space from the other widgets in order to try to make everything fit.
Here's an example based on your original code. However, I'm using pack for the text widget instead of grid because it requires fewer lines of code. I've also reorganized the code a bit. I find that grouping calls to grid together makes layout easier to grok.
I've also removed the restriction on resizing. There's rarely a good idea to limit the user's ability to resize the window. Plus, it allows you to see that the resulting UI is responsive.
from tkinter import *
class app:
def __init__(self, master):
self.master = master
master.title("PyChat")
master.geometry("800x500")
master.configure(bg="grey")
master.grid_columnconfigure((0,1,2,3), uniform="uniform", weight=1)
master.grid_rowconfigure(0, weight=1)
self.friends_space = Frame(master, bg="red")
self.chat_space = Frame(master, bg="blue")
self.friends_space.grid(row=0, column=0, sticky=NSEW)
self.chat_space.grid(row=0, column=1, columnspan=3, sticky=NSEW)
self.message_area = Text(self.chat_space, width=1, height=1)
self.message_area.pack(fill="both", expand=True)
root = Tk()
my_gui = app(root)
root.mainloop()
I am using Python to parse entries from a log file, and display the entry contents using Tkinter and so far it's been excellent. The output is a grid of label widgets, but sometimes there are more rows than can be displayed on the screen. I'd like to add a scrollbar, which looks like it should be very easy, but I can't figure it out.
The documentation implies that only the List, Textbox, Canvas and Entry widgets support the scrollbar interface. None of these appear to be suitable for displaying a grid of widgets. It's possible to put arbitrary widgets in a Canvas widget, but you appear to have to use absolute co-ordinates, so I wouldn't be able to use the grid layout manager?
I've tried putting the widget grid into a Frame, but that doesn't seem to support the scrollbar interface, so this doesn't work:
mainframe = Frame(root, yscrollcommand=scrollbar.set)
Can anyone suggest a way round this limitation? I'd hate to have to rewrite in PyQt and increase my executable image size by so much, just to add a scrollbar!
Overview
You can only associate scrollbars with a few widgets, and the root widget and Frame aren't part of that group of widgets.
There are at least a couple of ways to do this. If you need a simple vertical or horizontal group of widgets, you can use a text widget and the window_create method to add widgets. This method is simple, but doesn't allow for a complex layout of the widgets.
A more common general-purpose solution is to create a canvas widget and associate the scrollbars with that widget. Then, into that canvas embed the frame that contains your label widgets. Determine the width/height of the frame and feed that into the canvas scrollregion option so that the scrollregion exactly matches the size of the frame.
Why put the widgets in a frame rather than directly in the canvas? A scrollbar attached to a canvas can only scroll items created with one of the create_ methods. You cannot scroll items added to a canvas with pack, place, or grid. By using a frame, you can use those methods inside the frame, and then call create_window once for the frame.
Drawing the text items directly on the canvas isn't very hard, so you might want to reconsider that approach if the frame-embedded-in-a-canvas solution seems too complex. Since you're creating a grid, the coordinates of each text item is going to be very easy to compute, especially if each row is the same height (which it probably is if you're using a single font).
For drawing directly on the canvas, just figure out the line height of the font you're using (and there are commands for that). Then, each y coordinate is row*(lineheight+spacing). The x coordinate will be a fixed number based on the widest item in each column. If you give everything a tag for the column it is in, you can adjust the x coordinate and width of all items in a column with a single command.
Object-oriented solution
Here's an example of the frame-embedded-in-canvas solution, using an object-oriented approach:
import tkinter as tk
class Example(tk.Frame):
def __init__(self, parent):
tk.Frame.__init__(self, parent)
self.canvas = tk.Canvas(self, borderwidth=0, background="#ffffff")
self.frame = tk.Frame(self.canvas, background="#ffffff")
self.vsb = tk.Scrollbar(self, orient="vertical", command=self.canvas.yview)
self.canvas.configure(yscrollcommand=self.vsb.set)
self.vsb.pack(side="right", fill="y")
self.canvas.pack(side="left", fill="both", expand=True)
self.canvas.create_window((4,4), window=self.frame, anchor="nw",
tags="self.frame")
self.frame.bind("<Configure>", self.onFrameConfigure)
self.populate()
def populate(self):
'''Put in some fake data'''
for row in range(100):
tk.Label(self.frame, text="%s" % row, width=3, borderwidth="1",
relief="solid").grid(row=row, column=0)
t="this is the second column for row %s" %row
tk.Label(self.frame, text=t).grid(row=row, column=1)
def onFrameConfigure(self, event):
'''Reset the scroll region to encompass the inner frame'''
self.canvas.configure(scrollregion=self.canvas.bbox("all"))
if __name__ == "__main__":
root=tk.Tk()
example = Example(root)
example.pack(side="top", fill="both", expand=True)
root.mainloop()
Procedural solution
Here is a solution that doesn't use a class:
import tkinter as tk
def populate(frame):
'''Put in some fake data'''
for row in range(100):
tk.Label(frame, text="%s" % row, width=3, borderwidth="1",
relief="solid").grid(row=row, column=0)
t="this is the second column for row %s" %row
tk.Label(frame, text=t).grid(row=row, column=1)
def onFrameConfigure(canvas):
'''Reset the scroll region to encompass the inner frame'''
canvas.configure(scrollregion=canvas.bbox("all"))
root = tk.Tk()
canvas = tk.Canvas(root, borderwidth=0, background="#ffffff")
frame = tk.Frame(canvas, background="#ffffff")
vsb = tk.Scrollbar(root, orient="vertical", command=canvas.yview)
canvas.configure(yscrollcommand=vsb.set)
vsb.pack(side="right", fill="y")
canvas.pack(side="left", fill="both", expand=True)
canvas.create_window((4,4), window=frame, anchor="nw")
frame.bind("<Configure>", lambda event, canvas=canvas: onFrameConfigure(canvas))
populate(frame)
root.mainloop()
Make it scrollable
Use this handy class to make the frame containing your widgets scrollable. Follow these steps:
create the frame
display it (pack, grid, etc)
make it scrollable
add widgets inside it
call the update() method
import tkinter as tk
from tkinter import ttk
class Scrollable(tk.Frame):
"""
Make a frame scrollable with scrollbar on the right.
After adding or removing widgets to the scrollable frame,
call the update() method to refresh the scrollable area.
"""
def __init__(self, frame, width=16):
scrollbar = tk.Scrollbar(frame, width=width)
scrollbar.pack(side=tk.RIGHT, fill=tk.Y, expand=False)
self.canvas = tk.Canvas(frame, yscrollcommand=scrollbar.set)
self.canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
scrollbar.config(command=self.canvas.yview)
self.canvas.bind('<Configure>', self.__fill_canvas)
# base class initialization
tk.Frame.__init__(self, frame)
# assign this obj (the inner frame) to the windows item of the canvas
self.windows_item = self.canvas.create_window(0,0, window=self, anchor=tk.NW)
def __fill_canvas(self, event):
"Enlarge the windows item to the canvas width"
canvas_width = event.width
self.canvas.itemconfig(self.windows_item, width = canvas_width)
def update(self):
"Update the canvas and the scrollregion"
self.update_idletasks()
self.canvas.config(scrollregion=self.canvas.bbox(self.windows_item))
Usage example
root = tk.Tk()
header = ttk.Frame(root)
body = ttk.Frame(root)
footer = ttk.Frame(root)
header.pack()
body.pack()
footer.pack()
ttk.Label(header, text="The header").pack()
ttk.Label(footer, text="The Footer").pack()
scrollable_body = Scrollable(body, width=32)
for i in range(30):
ttk.Button(scrollable_body, text="I'm a button in the scrollable frame").grid()
scrollable_body.update()
root.mainloop()
Extends class tk.Frame to support a scrollable Frame
This class is independent from the widgets to be scrolled and can be used to replace a standard tk.Frame.
import tkinter as tk
class ScrollbarFrame(tk.Frame):
"""
Extends class tk.Frame to support a scrollable Frame
This class is independent from the widgets to be scrolled and
can be used to replace a standard tk.Frame
"""
def __init__(self, parent, **kwargs):
tk.Frame.__init__(self, parent, **kwargs)
# The Scrollbar, layout to the right
vsb = tk.Scrollbar(self, orient="vertical")
vsb.pack(side="right", fill="y")
# The Canvas which supports the Scrollbar Interface, layout to the left
self.canvas = tk.Canvas(self, borderwidth=0, background="#ffffff")
self.canvas.pack(side="left", fill="both", expand=True)
# Bind the Scrollbar to the self.canvas Scrollbar Interface
self.canvas.configure(yscrollcommand=vsb.set)
vsb.configure(command=self.canvas.yview)
# The Frame to be scrolled, layout into the canvas
# All widgets to be scrolled have to use this Frame as parent
self.scrolled_frame = tk.Frame(self.canvas, background=self.canvas.cget('bg'))
self.canvas.create_window((4, 4), window=self.scrolled_frame, anchor="nw")
# Configures the scrollregion of the Canvas dynamically
self.scrolled_frame.bind("<Configure>", self.on_configure)
def on_configure(self, event):
"""Set the scroll region to encompass the scrolled frame"""
self.canvas.configure(scrollregion=self.canvas.bbox("all"))
Usage:
class App(tk.Tk):
def __init__(self):
super().__init__()
sbf = ScrollbarFrame(self)
self.grid_rowconfigure(0, weight=1)
self.grid_columnconfigure(0, weight=1)
sbf.grid(row=0, column=0, sticky='nsew')
# sbf.pack(side="top", fill="both", expand=True)
# Some data, layout into the sbf.scrolled_frame
frame = sbf.scrolled_frame
for row in range(50):
text = "%s" % row
tk.Label(frame, text=text,
width=3, borderwidth="1", relief="solid") \
.grid(row=row, column=0)
text = "this is the second column for row %s" % row
tk.Label(frame, text=text,
background=sbf.scrolled_frame.cget('bg')) \
.grid(row=row, column=1)
if __name__ == "__main__":
App().mainloop()
I started with the GUI in Python and have a problem.
I've added widgets to my frame, but they're always on the left side.
I have tried some examples from the internet, but I did not manage it .
I tried .place, but it does not work for me. Can one show me how to place the widgets in the middle?
Code:
import tkinter as tk
def site_open(frame):
frame.tkraise()
window = tk.Tk()
window.title('Test')
window.geometry('500x300')
StartPage = tk.Frame(window)
FirstPage = tk.Frame(window)
for frame in (StartPage, FirstPage):
frame.grid(row=0, column=0, sticky='news')
lab = tk.Label(StartPage, text='Welcome to the Assistant').pack()
lab1 = tk.Label(StartPage, text='\n We show you helpful information about you').pack()
lab2 = tk.Label(StartPage, text='\n \n Name:').pack()
ent = tk.Entry(StartPage).pack()
but = tk.Button(StartPage, text='Press', command=lambda:site_open(FirstPage)).pack()
lab1 = tk.Label(FirstPage, text='1Page').pack()
but1 = tk.Button(FirstPage, text='Press', command=lambda:site_open(StartPage)).pack()
site_open(StartPage)
window.mainloop()
After you have created window, add:
window.columnconfigure(0, weight=1)
More at The Grid Geometry Manager
You are mixing two different Layout Managers. I suggest you either use The Grid Geometry Manager or The Pack Geometry Manager.
Once you have decided which one you would like to use, it is easier to help you :)
For example you could use the Grid Geometry Manager with two rows and two columns and place the widgets like so:
label1 = Label(start_page, text='Welcome to the Assistant')
# we place the label in the page as the fist element on the very left
# and allow it to span over two columns
label1.grid(row=0, column=0, sticky='w', columnspan=2)
button1 = Button(start_page, text='Button1', command=self.button_clicked)
button1.grid(row=1, column=0)
button2 = Button(start_page, text='Button2', command=self.button_clicked)
button2.grid(row=1, column=1)
This will lead to having the label in the first row and below the two buttons next to each other.
I have a frame in PanedWindow which i need on every tkinter GUI (in this case it's topFrame). Below it are many frames and I want to switch between those frame on button click (just like in any software where the top portion of screen is fixed and clicking on buttons the lower portion of GUI changes).
I know i need grid layout for it. But, it is not happening and i am not getting a solution anywhere.I have researched a lot on this topic everywhere but this solution is nowhere. Here is my code... i have written in comments those code which i feel are not working fine.
#python 3.5
from tkinter import *
#function to raise the frame on button click
def raiseFrame(frame):
frame.tkraise()
m = PanedWindow(height=500, width=1000, orient=VERTICAL)
m.pack(fill=BOTH, expand=1)
#to expand the column and row to fill the extra space
m.grid_columnconfigure(index=0, weight=1) #this code is not working as it should
m.grid_rowconfigure(index=0, weight=1) #this code is not working as it should
#top frame has two buttons which switches the bottom frames
topFrame = Frame(m, bg="blue")
m.add(topFrame)
button1 = Button(topFrame, text="Raise Frame 2", command=lambda: raiseFrame(frame2)) #raises frame 2 on clicking it
button1.pack(side=LEFT)
button2 = Button(topFrame, text="Raise Frame 1", command=lambda: raiseFrame(frame1)) #raises frame 1 on clicking it
button2.pack(side=LEFT)
#bottomframe acts as container for two other frames which i need to switch
bottomframe = Frame(m, bg="orange")
m.add(bottomframe)
frame1 = Frame(bottomframe, bg="yellow")
frame1.grid(row=0, column=0, sticky="news") ## sticky is not working ##
frame2 = Frame(bottomframe, bg="green")
frame2.grid(row=0, column=0, sticky="news") ## sticky is not working ##
label1 = Label(frame1, text="i should change")
label1.pack(padx=10, pady=10)
label2 = Label(frame2, text="i am changed !!")
label2.pack(padx=10, pady=10)
mainloop()
1)Please correct my code.
2)Explain me why in the "topFrame" even though i have not written
topFrame.pack(fill=BOTH, expand=True)
my code is showing the above property and it's expanding as well as filling both X and Y.
Same goes for the bottomFrame, it's orange colour is filling the entire space which does not happen in normal frames. So, is it some special feature of PanedWindow ?
You don't want to call topFrame.pack() and m.add(topFrame). You either pack/place/grid the window, or you add it to a paned window, you don't do both.
Also, if the frame is going to be in the paned window it needs to be a child of the paned window rather than a child of the root window.