Resize background image to window size with Tkinter grid manager - python-3.x

I don't know how to resize the background image to the window size with the tkinter grid manager. My image is resizing alone, without resizing the window. It functions with the pack manager but I want to use it with the grid manager.
from tkinter import *
from PIL import Image, ImageTk
root = Tk()
root.title("Title")
root.geometry("800x600")
class Example(Frame):
def __init__(self, master=None):
Frame.__init__(self, master)
self.grid(sticky=N+S+E+W)
self.image = Image.open("courbe.gif")
self.img_copy= self.image.copy()
self.background_image = ImageTk.PhotoImage(self.image)
self.background = Label(self, image=self.background_image)
self.background.grid(row =0, column =0,sticky="nsew")
self.background.grid_rowconfigure(0, weight=1)
self.background.grid_columnconfigure(0, weight=1)
self.background.bind('<Configure>', self._resize_image)
def _resize_image(self,event):
new_width = event.width
new_height = event.height
self.image = self.img_copy.resize((new_width, new_height))
self.background_image = ImageTk.PhotoImage(self.image)
self.background.configure(image = self.background_image)
e = Example(root)
e.grid(row =0, column =0,sticky="nsew")
e.grid_rowconfigure(0, weight=1)
e.grid_columnconfigure(0, weight=1)
root.mainloop()

You shouldn't bind to the background changing, but the window (master) changing. Then you can get the new height and width of the window using master.winfo_width() and master.winfo_height().
So in your __init__ use
self.master = master
self.master.bind('<Configure>', self._resize_image)
and in your self._resize_image use
new_width = self.master.winfo_width()
new_height = self.master.winfo_height()

Related

tkinter: how do i make the Scrollbar react to the new size of the frame

from tkinter import *
from tkinter import ttk
class Scrollbar:
def __init__(self, master):
frame = ttk.Frame(master)
frame.pack()
self.canvas = Canvas(frame, width=700, height=930)
self.scrollbar = ttk.Scrollbar(frame, orient=VERTICAL, command=self.canvas.yview)
self.main_frame = ttk.Frame(self.canvas)
self.placing_widgets()
def placing_widgets(self):
self.canvas.pack(side=LEFT, fill=Y)
self.scrollbar.pack(side=RIGHT, fill=Y)
self.canvas.configure(yscrollcommand=self.scrollbar.set)
self.canvas.bind('<Configure>', lambda e: self.canvas.configure(scrollregion=self.canvas.bbox('all')))
self.canvas.create_window((0,0), window=self.main_frame, anchor='n')
Frame1(self.main_frame)
class Frame1:
def __init__(self, main_frame):
self.main_frame = main_frame
for i in range(100):
self.button = ttk.Button(self.main_frame, text=f"Button {i}", command=lambda i=i: self.destroying(i))
self.button.grid(row=i, column=0, pady=5)
def destroying(self, i):
for frame in self.main_frame.winfo_children():
frame.destroy()
Frame2(self.main_frame)
class Frame2:
def __init__(self, main_frame):
self.main_frame = main_frame
self.button = ttk.Button(self.main_frame, text='back', command=self.destroying)
self.button.pack()
def destroying(self):
for frame in self.main_frame.winfo_children():
frame.destroy()
Frame1(self.main_frame)
def main():
root = Tk()
root.config(background='black')
Scrollbar(root)
root.mainloop()
if __name__ == '__main__':
main()
I couldn't find a solution to this problem anywhere on the internet.
I have given a scrollbar to a lengthy frame but when I make the frame shorter, I don't know why the scrollbar doesn't resize to the frame's length.
Above is a short program that represents the problem I am talking about. The program has 2 different pages, one with 100 buttons and the other with one button. You can switch between pages with any buttons and see that the page with one button is scrollable which shouldn't be.
Could you please provide a solution to how I could make the scrollbar resize to the frame's length? Thank you for your time.

How to resize Canvas scrollable widget?

The idea is that the scrollable canvas and its text widgets grow or fill the entire root/toplevel when I resize it.
I can do this if I work on Frames but for a scrollable frame you need to create a canvas widget and make it scrollable. Now I don't know if the problem is the canvas or the inserted widgets on the canvas?
import tkinter as tk
from tkinter import ttk
class ScrollableFrame():
def __init__(self, container, *args, **kwargs):
self.container = container
self.canvas = tk.Canvas(self.container, bg="green")
self.scrollbar = ttk.Scrollbar(self.container, orient="horizontal", command=self.canvas.xview)
self.scrollable_frame = tk.Frame(self.canvas)
self.scrollable_frame.grid(sticky="wesn")
self.scrollable_frame.bind("<Configure>", lambda e: self.canvas.configure(scrollregion=self.canvas.bbox("all")))
self.canvas.create_window((0, 0), window=self.scrollable_frame, anchor="nw")
self.canvas.configure(xscrollcommand=self.scrollbar.set)
self.canvas.grid(row=0, column=0, sticky="wesn")
self.scrollbar.grid(row=1, column=0, sticky="wesn")
if __name__ == "__main__":
root = tk.Tk()
root.configure(bg="grey20")
s = ScrollableFrame(root)
t = tk.Text(s.scrollable_frame)
t.grid(row=0, column=0, sticky="wesn")
t2 = tk.Text(s.scrollable_frame)
t2.grid(row=0, column=1, sticky="wesn")
root.mainloop()
I'm glad for help
Base on the requirement in the comment, you want to grow/shrink the two text boxes when the root window is resized. Below is the modified code with the necessary changes to achieve it:
import tkinter as tk
from tkinter import ttk
class ScrollableFrame():
def __init__(self, container, *args, **kwargs):
self.container = container
self.canvas = tk.Canvas(self.container, bg="green")
self.scrollbar = ttk.Scrollbar(self.container, orient="horizontal", command=self.canvas.xview)
self.scrollable_frame = tk.Frame(self.canvas)
self.scrollable_frame.grid(sticky="wesn")
self.scrollable_frame.bind("<Configure>", lambda e: self.canvas.configure(scrollregion=self.canvas.bbox("all")))
self.canvas.create_window((0, 0), window=self.scrollable_frame, anchor="nw", tags="scrollable")
self.canvas.configure(xscrollcommand=self.scrollbar.set)
self.canvas.grid(row=0, column=0, sticky="wesn")
self.scrollbar.grid(row=1, column=0, sticky="we") # fill horizontally only
# make self.canvas to fill all the available space of container
container.rowconfigure(0, weight=1)
container.columnconfigure(0, weight=1)
# resize self.scrollable_frame when self.canvas is resized
self.canvas.bind("<Configure>", lambda e: self.canvas.itemconfig("scrollable", width=e.width, height=e.height))
if __name__ == "__main__":
root = tk.Tk()
root.configure(bg="grey20")
s = ScrollableFrame(root)
# make the two text boxes to fill all the space of s.scrollable_frame
s.scrollable_frame.rowconfigure(0, weight=1)
s.scrollable_frame.columnconfigure((0,1), weight=1)
t = tk.Text(s.scrollable_frame)
t.grid(row=0, column=0, sticky="wesn")
t2 = tk.Text(s.scrollable_frame)
t2.grid(row=0, column=1, sticky="wesn")
root.mainloop()
So basically the logic is when the root window is resized, the canvas is resized to fill the root window. Then the frame (scrollable_frame) inside the canvas is resized to fill the canvas and finally the two text widgets are resized to fill the scrollable_frame.

Tkinter Python Frame with Scroll bar

I have below code which will create Label and Entry widgets. Also I created Scroll bar for this window but both scroll bars are not working.
Please let me know why the scroll bar is disabled. Did the code is doing wrong ?
Below is my code which will create 50 labels and entry widgets but still scroll bars are not enabled.
import tkinter as tk
from tkinter import ttk
class DoubleScrollbarFrame(ttk.Frame):
def __init__(self, master, **kwargs):
'''
Initialisation. The DoubleScrollbarFrame consist of :
- an horizontal scrollbar
- a vertical scrollbar
- a canvas in which the user can place sub-elements
'''
ttk.Frame.__init__(self, master, **kwargs)
# Canvas creation with double scrollbar
self.hscrollbar = ttk.Scrollbar(self, orient=tk.HORIZONTAL)
self.vscrollbar = ttk.Scrollbar(self, orient=tk.VERTICAL)
self.sizegrip = ttk.Sizegrip(self)
self.canvas = tk.Canvas(self, bd=0, highlightthickness=0,
yscrollcommand=self.vscrollbar.set,
xscrollcommand=self.hscrollbar.set)
self.vscrollbar.config(command=self.canvas.yview)
self.hscrollbar.config(command=self.canvas.xview)
def pack(self, **kwargs):
'''
Pack the scrollbar and canvas correctly in order to recreate the
same look as MFC's windows.
'''
self.hscrollbar.pack(side=tk.BOTTOM, fill=tk.X, expand=tk.FALSE)
self.vscrollbar.pack(side=tk.RIGHT, fill=tk.Y, expand=tk.FALSE)
self.sizegrip.pack(in_=self.hscrollbar, side=tk.BOTTOM, anchor="se")
self.canvas.pack(side=tk.LEFT, padx=5, pady=5,
fill=tk.BOTH, expand=tk.TRUE)
ttk.Frame.pack(self, **kwargs)
def get_frame(self):
'''
Return the "frame" useful to place inner controls.
'''
return self.canvas
if __name__ == '__main__':
# Top-level frame
root = tk.Tk()
root.title("Double scrollbar with tkinter")
root.minsize(width=600, height=600)
frame = DoubleScrollbarFrame(root, relief="sunken")
# Add controls here
subframe = ttk.Frame(frame.get_frame())
txt = ttk.Label(subframe, text="Add things here !")
for i in range(50):
ttk.Label(subframe, text="Field %d: " % i).grid(row=i, column=0,
sticky="w")
ttk.Entry(subframe, width=25).grid(row=i, column=1, sticky="ew")
subframe.pack(padx=15, pady=15, fill=tk.BOTH, expand=tk.TRUE)
frame.pack(padx=5, pady=5, expand=True, fill=tk.BOTH)
# launch the GUI
root.mainloop()

how can I fit the widgets to the entire frame to enable resizing in tkinter?

I have been able to resize the GUI, it stretches left right, and the content resizes the widgets, but there seems to be a cut off point which results in just the GUI widgets resizing, how can I make the widgets of the frame resize over the whole frame...
from tkinter import *
from tkinter import ttk
class MainWindow:
def __init__(self,master):
self.master = master
self.master.geometry('300x300')
self.container = Frame(self.master)
self.container.grid(row=0,column=0,sticky='NSEW')
self.container['bg']='skyblue'
self.chip_frame = Frame(self.container)#,height=100,width=100)
self.random = Frame(self.container)#,height=100,width=100)
self.fish_frame = Frame(self.container)#,height=100,width=100)
self.cat_frame = Frame(self.container)#,height=100,width=100)
self.cow_frame = Frame(self.container)#,height=100,width=100)
self.brad_frame = Frame(self.container)#,height=100,width=100)
self.chip_frame.grid(row=0,column=0,sticky='NSEW')
self.random.grid(row=0,column=1,sticky='NSEW')
self.fish_frame.grid(row=0,column=2,sticky='NSEW')
self.cat_frame.grid(row=1,column=0,sticky='NSEW')
self.cow_frame.grid(row=1,column=2,sticky='NSEW')
self.brad_frame.grid(row=0,column=3,sticky='NSEW',rowspan=2)
self.fish_frame['bg']='orange'
self.chip_frame['bg']='pink'
self.random['bg']='black'
self.cat_frame['bg']='Blue'
self.cow_frame['bg']='Green'
self.brad_frame['bg']='Red'
for i in range(4):
self.container.columnconfigure(i,weight=1)
for i in range(4):
self.container.rowconfigure(i,weight=1)
root = Tk()
root.title('Nathans APP')
root.columnconfigure(0,weight=1)
root.rowconfigure(0,weight=1)
app = MainWindow(root)
root.mainloop()

tkinter Canvas window size

I need to know when the Canvas is resized (eg when the master frame gets maximized) the new Canvas window size.
Unfortunately, if I try self.canvas['width'] it always seems to me I get back the width it had whenever I initialized it and not the current width.
How do I get the current Canvas window dimensions?
When you retrieve self.canvas['width'], you are asking tkinter to give you the configured width of the widget, not the actual width. For the actual width you can use .winfo_width().
If you want to know when the canvas is resized, you can add a binding to the <Configure> event on the widget. The event object that is passed to the binding has a width attribute which also has the actual width of the widget.
Here's an example:
import tkinter as tk
root = tk.Tk()
canvas = tk.Canvas(root, width=200, height=200, background="bisque")
canvas.pack(side="bottom", fill="both", expand=True)
canvas.create_text(10, 30, anchor="sw", tags=["event"])
canvas.create_text(10, 30, anchor="nw", tags=["cget"])
def show_width(event):
canvas.itemconfigure("event", text="event.width: %s" % event.width)
canvas.itemconfigure("cget", text="winfo_width: %s" % event.widget.winfo_width())
canvas.bind("<Configure>", show_width)
root.mainloop()
one possible solution:
try:
import Tkinter as tk
except:
import tkinter as tk
class myCanvas(tk.Frame):
def __init__(self, root):
#self.root = root
self.w = 600
self.h = 400
self.canvas = tk.Canvas(root, width=self.w, height=self.h)
self.canvas.pack( fill=tk.BOTH, expand=tk.YES)
root.bind('<Configure>', self.resize)
def resize(self, event):
self.w = event.width
self.h = event.height
print ('width = {}, height = {}'.format(self.w, self.h))
root = tk.Tk()
root.title('myCanvas')
myCanvas(root)
root.mainloop()
Notice that the size informed by the event is 2 pixels wider in either direction. That's the border, I suppose.

Resources