I'm trying to resize a window in my GUI but one of my frames is getting left out and I'm not sure why. The window resizes fine horizontally, but when I try to resize vertically the frame with the button disappears. This is my first GUI so I'm sure there is something I'm missing...
from Tkinter import *
from ttk import *
class GUI(Frame):
def __init__(self, root):
Frame.__init__(self, root)
self.root = root
lbFrame = Frame(self.root)
nbFrame = Frame(self.root)
self.note = Notebook(nbFrame)
self.note.pack(fill=BOTH, expand=YES)
lbFrame.pack(side=LEFT, fill=BOTH, expand=YES)
nbFrame.pack(side=RIGHT, fill=BOTH, expand=YES)
self.make_file_viewer()
# Label
lblabel = Label(lbFrame, text='Files', background='#E8E8E8')
lblabel.pack(side=TOP, expand=YES, padx=10, pady=10)
# Listbox
self.lb = Listbox(lbFrame, height=49, borderwidth=0, font=('Purisa', 11), selectmode=EXTENDED)
self.lb.pack(side=BOTTOM, expand=YES, padx=10, pady=10)
def make_file_viewer(self):
fvwr = Frame(self.note)
dataFrm = Frame(fvwr)
btnFrm = Frame(fvwr)
dataFrm.pack(side=TOP, fill=BOTH, expand=YES)
btnFrm.pack(side=BOTTOM, fill=BOTH, expand=YES)
fvwr.config(borderwidth=2)
self.note.add(fvwr, text='File View')
# Label
self.lbl_fvwr_search = Label(dataFrm, text='Search Hits\t0', justify=LEFT)
self.lbl_fvwr_search.pack(side=TOP, anchor=W, expand=YES)
# Scrollbar
scrollbar_fvwr = Scrollbar(dataFrm)
scrollbar_fvwr.pack(side=RIGHT, fill=Y, expand=YES)
# Textbox
self.outputPanel_fvwr_text = Text(dataFrm, wrap='word', height=40, width=115, yscrollcommand=scrollbar_fvwr.set)
self.outputPanel_fvwr_text.pack(side=LEFT, fill=BOTH, expand=YES)
scrollbar_fvwr.config(command=self.outputPanel_fvwr_text.yview)
# Start button
viewBtn = Button(btnFrm, text='Start', width=8)
viewBtn.pack(anchor=W, expand=YES)
if __name__ == '__main__':
root = Tk()
app = GUI(root)
root.mainloop()
The absolute best thing you can do is to start over, and do your layout step-by-step. Start by creating the main areas, and make sure they resize properly. In your case, create the left and right sides. Again, get those two sides resizing properly with respect to each other.
Once you are done, focus on one section. Since you know the main section resizes properly, you only need to focus on the elements within that particular side. Again, break it down into pieces, and get those pieces working before tackling any widgets inside the main pieces.
When you do your layout this way, it's much easier to get the whole GUI working right, because you aren't trying to juggle the behavior of a half dozen widgets at once.
In your specific case, the root of the problem is that you have expand=YES for just about everything. As a general rule of thumb, you only want to set that to YES for one widget in an given parent window. For example, in your main window you want the right to expand but not the left (I'm guessing), and in the right window you want the text widget to expand but not the other widgets.
Set expand=NO for scrollbar_fvwr, self.lbl_fvwr_search, and btnFrm to get the right side to resize properly. For the left side, add fill=BOTH for self.lb, and expand=NONE for lblabel.
Related
I am a newbie trying to use tkinter to build a GUI for an application. So far, I have a frame that I'd like to put several buttons into. However, every time I attempt to position this button, it isn't placed properly, being put outside of the frame itself. I wouldn't like to use the place function because of the several buttons I have to dynamically generate coming from an excel sheet so I was hoping to use the grid function instead.
Here is what I have so far
from tkinter import *
from customtkinter import *
window = Tk()
window.geometry("1920x1080")
window.state("zoomed")
window.title("My Company's Description Printer")
main_frame = CTkFrame(window, width=1920, height=1080, fg_color="grey21")
main_frame.place(x=0, y=0)
title = Label(main_frame,
text="My Company",
bg="grey21",
fg="white",
font=("Trajan Pro", 20)).place(x=626, y=30)
button_frame = CTkCanvas(main_frame,
width=800,
height=600,
highlightthickness=3,
highlightbackground="black",
relief="ridge",
bg="grey19").place(x=60, y=110)
test_button = CTkButton(button_frame, text="test").grid(row=0, column=0)
window.mainloop()
Example of code being ran
As you can see, the button is being placed in the top left corner of the entire window rather than the top left corner of the black bordered button frame. Any help would be appreciated. Thank you so much.
Note that button_frame is None because it is the result of .place(...), so the button (test_button is None as well due to same reason) is a child of the root window instead of the instance of CTkCanvas. .place(...) should be called in separate line.
Also .create_window() is used instead of tkinter layout manager to put widget into a canvas:
...
button_frame = CTkCanvas(main_frame,
width=800,
height=600,
highlightthickness=3,
highlightbackground="black",
relief="ridge",
bg="grey19")
# call .place(...) in separate line
button_frame.place(x=60, y=110)
test_button = CTkButton(button_frame, text="test") # don't use .grid(row=0, column=0)
# use .create_window() to put widget into canvas
button_frame.create_window(0, 0, window=test_button, anchor="nw")
This is my first time using tkinter and I already did some research on pack and grid. How do I fix this code so that the pack and grid components don't intertwine?
I want to use grid for my checkbox so that 16 checkboxes show up in a column next to the words corresponding to them. Can I do this with pack?
# tkinter will help us with the GUI
import tkinter as tk
from tkinter import filedialog, Text
import os
def data():
categoriesArray = ["16 words here"]
for i in range(16):
checkbox = tk.Checkbutton(buttonFrame, bg="white")
checkbox.grid(row=i, column=0, sticky="w")
tk.Label(canvasFrame, text=categoriesArray[i]).grid(row=i, column=1, sticky="ew")
# Define the scrolling function for the scrollbar
def scrollFunction(event):
canvas.configure(scrollregion=canvas.bbox("all"), width=200, height=500)
# The root holds the whole app structure. Always attach to root.
root = tk.Tk()
# These two lines literally make the rectangular structure of the app.
canvas = tk.Canvas(root, height = 500, width= 1300, bg="#00008B")
canvas.pack()
# These two lines make the white screen you see on the left of the buttons.
frame = tk.Frame(root, bg="white")
frame.place(relwidth=0.8, relheight=0.8, relx=0.03, rely=0.1)
# This is the frame for the buttons on the right
buttonFrame = tk.Frame(root, bg="white")
buttonFrame.place(relwidth=0.13, relheight=0.8, relx=0.85, rely=0.1)
# You need a canvas to define a scrollbar within the app.
# Resource: https://stackoverflow.com/questions/16188420/tkinter-scrollbar-for-frame
canvas=tk.Canvas(buttonFrame)
canvasFrame=tk.Frame(canvas)
scrollbar=tk.Scrollbar(buttonFrame, orient="vertical", command=canvas.yview)
canvas.configure(yscrollcommand=scrollbar.set)
scrollbar.pack(side="right", fill="y")
canvas.pack(side="left")
canvas.create_window((36,0), window=canvasFrame, anchor='nw')
canvasFrame.bind("<Configure>", scrollFunction)
# Call the data for the categories to show on the right
data()
# This runs the mainframe to work
root.mainloop()
Please let me know anything I can do to make my question better.
Places I've looked but gotten confused: fix this code 'cannot use geometry manager grid inside . which already has slaves managed by pack'
I fixed it. checkbox = tk.Checkbutton(buttonFrame, bg="white") should have canvasFrame instead of buttonFrame.
I've been creating an app where there are Clients that I can add to a table, the problem is, I need a scrollbar to scroll through all the clients since the app Height is limited and the clients aren't.
Using tkinter I found a way to create a "table" using Entry and grid, but what if I want to create 100 rows? they would be outside of the view, so that's why the need of a scrollbar.
For those of you who know Java, I wanted to create something similar to Jtable, it has a method to create row, delete row, and it generates automatically that scrollbar as soon as the JTable runs out of space.
I've tried to use TkTable from ttk and mess around with some properties, but I preferred how Entries look.
root = Tk()
root.geometry("1200x900")
for i in range(10):
e = Entry(relief=RIDGE)
e.grid(row=i, column=2, sticky=N)
root.mainloop()
I created a root = Tk() and used root to grid them.
You'll see 10 Entries on top of the other.
When a window contains many widgets, they might not all be visible. However, neither a window (Tk or Toplevel instance) nor a Entry are scrollable.
One solution to make the window content scrollable is to put all the widgets in a Frame, and then, embed this Frame in a Canvas using the create_window method.
from tkinter import *
root = Tk()
canvas = Canvas(root)
scroll_y = Scrollbar(root, orient="vertical", command=canvas.yview)
frame = Frame(canvas)
# group of widgets
for i in range(100):
e = Entry(frame, relief=RIDGE, width = 100)
e.grid(row=i, column=2, sticky=N)
# put the frame in the canvas
canvas.create_window(0, 0, anchor='nw', window=frame)
# make sure everything is displayed before configuring the scrollregion
canvas.update_idletasks()
canvas.configure(scrollregion=canvas.bbox('all'),
yscrollcommand=scroll_y.set)
canvas.pack(fill='both', expand=True, side='left')
scroll_y.pack(fill='y', side='right')
root.mainloop()
output:
I have a code, which creates an UI like this.
I want those page up/down buttons to be next to Page 1 label but I couldn't managed to do that. Only way I know with pack is the side option and it is not working well.
Second thing is, that scrollbar should be in that listbox. I know, I need to create a canvas then a frame in it. Then embed both listbox and scrollbar to them but I couldn't do that either.
This is my code.
class interface(tk.Frame):
def __init__(self,den):
self.pa_nu = 0 ##page number. Both used in labeling and result slicing
self.lbl1 = tk.Label(den, text="keyword")
self.lbl2 = tk.Label(den, text="Page %d" %(self.pa_nu+1))
self.ent1 = tk.Entry(den, takefocus=True)
self.btn1 = tk.Button(den, text="Search", command=self.button1)
self.btn2 = tk.Button(den, text="Page Up", command=self.page_up)
self.btn3 = tk.Button(den, text="Page Down", command=self.page_down)
scrollbar = tk.Scrollbar(den)
scrollbar.pack(side=RIGHT, fill=Y)
self.lst1 = tk.Listbox(den, selectmode="SINGLE", width="40", yscrollcommand=scrollbar.set)
self.lst1.bind("<Double-Button-1>", self.open_folder)
scrollbar.config(command=self.lst1.yview)
self.lbl1.pack(side="top")
self.ent1.pack()
self.btn1.pack(side="top")
self.btn2.pack(side="right")
self.btn3.pack(side="left")
self.lbl2.pack(side="bottom",padx=65)
self.lst1.pack(fill=BOTH)
def button1(self):
pass #some stuff here
def page_up(self):
pass #some stuff here
def page_down(self):
pass #some stuff here
def list_fill(self,i):
pass #some stuff here
def open_folder(self,event):
pass #some stuff here
There are three geometry managers in tkinter: place (absolute position), pack (good for line of widgets, or simple layout) and grid (complex layout).
Grid is worth looking for the layout you are working on. If you keep going with pack, the usual way to achieve complex layout is to use intermediate frames. For instance, in the following picture, all widgets in frame1 are packed vertically, and horizontally in frame2.
diagram with draw.io
Regarding the scrollbar, the usual way is again to use an intermediate frame (no need for a canvas). Here a snippet (copied from http://effbot.org/zone/tkinter-scrollbar-patterns.htm#listbox)
frame = Frame(root, bd=2, relief=SUNKEN)
scrollbar = Scrollbar(frame)
scrollbar.pack(side=RIGHT, fill=Y)
listbox = Listbox(frame, bd=0, yscrollcommand=scrollbar.set)
listbox.pack()
scrollbar.config(command=listbox.yview)
frame.pack() #or others...
I'm trying to set up a scrollable series of Frames, so I've nested them into a Canvas. Below, I've included some sample code that demonstrates the problem.
However, I have three issues:
Frame c doesn't seem to expand horizontally to fill the canvas.
If I use multiple frames c, the canvas scrolls, but if I try to nest my FrameRows into a single frame c, the canvas no longer scrolls.
With multiple frames c, the last of the FrameRows is cut off.
Buttons "Left" and "Right" demonstrate the behavior I get when the buttons are not nested in a Canvas.
I'd prefer using the single Frame c and nesting all FrameRows in that, but I would need the scrolling to work properly for that.
import * from Tkinter
import FrameRow
root = Tk()
root.title("Testing")
containerFrame = Frame(root)
containerFrame.config(bg="red")
containerFrame.pack(side=TOP, fill=BOTH, expand=1)
# Frame showing proper behavior
a = Frame(containerFrame, bg="black")
a.pack(side=TOP, fill=X, expand=0)
btnLeft = Button(a)
btnLeft.config(text="LEFT")
btnLeft.pack(side=LEFT, fill=X, expand=1)
btnRight = Button(a)
btnRight.config(text="RIGHT")
btnRight.pack(side=RIGHT, fill=X, expand=0)
# Canvas
canvas = Canvas(containerFrame)
scrollbar = Scrollbar(containerFrame, orient=VERTICAL)
scrollbar.config(command=canvas.yview)
canvas.config(bg="blue", yscrollcommand=scrollbar.set)
scrollbar.pack(side=RIGHT, fill=Y)
canvas.pack(side=LEFT, fill=BOTH, expand=1)
# Multiple Frames within Canvas
frameRow = range(30)
c = range(30)
for r in xrange(0,30):
c[r] = Frame(canvas)
c[r].config(bg="green")
frameRow[r] = FrameRow.FrameRow()
frameRow[r].setFrame(c[r])
frameRow[r].setRow(r)
frameRow[r].createRow()
c[r].pack(side=TOP, fill=X, expand=1)
canvas.create_window(0, (r+1)*30, window=c[r], anchor="nw")
canvas.config(scrollregion = canvas.bbox(ALL))
# OR
# Single Frame within Canvas
##c = Frame(canvas)
##c.config(bg="green")
##
##frameRow = range(30)
##for r in xrange(0,30):
## frameRow[r] = FrameRow.FrameRow()
## frameRow[r].setFrame(c)
## frameRow[r].setRow(r)
## frameRow[r].createRow()
##
##c.pack(side=TOP, fill=X, expand=1)
##canvas.create_window(0, 0, window=c, anchor="nw")
root.mainloop()
The FrameRow class is defined as:
from Tkinter import *
class FrameRow():
_frame = "Default"
_row = 0
def setFrame(self, frame):
self._frame = frame
def setRow(self, row):
self._row = row
def createRow(self):
self.frameRow = Frame(self._frame)
self.frameRow.config(bg="yellow")
self.frameRow.pack(side=TOP, fill=X, expand=1)
self.btn1 = Button(self.frameRow)
self.btn1.config(text="Button "+str(self._row)+"A")
self.btn1.pack(side=LEFT, fill=X, expand=1)
self.btn2 = Button(self.frameRow)
self.btn2.config(text="Button "+str(self._row)+"B")
self.btn2.pack(side=RIGHT, anchor=E, fill=X, expand=0)
Is there something I'm missing in getting Frame(s) c to expand to the width of the canvas?
Am I doing something wrong with the scrolling and the single Frame c?
Are there any decent tutorials or examples that show how I should be doing this?
Thanks!
It looks like you are both packing the window in a canvas and creating a window object. I honestly have never done that but I don't think the packing does any good.
When you create a widget that is an object in a canvas, it will not expand to fill the canvas. What you'll need to do is create a binding to the <Configure> event of the canvas. This event will fire whenever the canvas changes size (and a few other times). You can then resize each frame to fit the width of the canvas.
Since you say you prefer using a single frame where you nest the other rows inside it, that is probably the easiest solution. But again, this single frame won't grow or shrink to fit the canvas, you'll have to do that with a <Configure> binding.
Make sure that you configure the scrollregion of the canvas after adding the frame to the canvas using create_window. It looks like you're forgetting to do that in the commented-out code, and that would definitely prevent the canvas from scrolling.