TKinter GUI resizing window dynamically with background and buttons

Question

Need your help guys once again, building a GUI project and need to make it dynamically so the button, labels, entry box, background, and everything will resize when I'm changing the window size and fitting to the new window size.

So far this is the code with working background resizing only, but there is main screen with labels, buttons etc.. and add to that, I need to add more 8 buttons that each one opening new window, on the new windows I will have to make them dynamically too... here an example of code:

                from tkinter import *
            from PIL import Image, ImageTk
            
            class MainScreen(Frame):
            def __init__(self, master=None):
            Frame.__init__(self, master)
            self.configure(background="black")
            self.image = Image.open("bg.jpg")
            
            # label for the background image
            self.background = Label(self)
            self.background.place(x=0, y=0)
            
            self.bind('<Configure>', self._resize_image)
            
            # Label 1 welcome message
            Label(root, text="Welcome", bg="#12355F", fg="white",
            font="tahoma 12 bold") .place(x=10, y=10)
            
            # Label 2
            Label(root, text="Add:", bg="#164883", fg="white",
            font="tahoma 10 bold").place(x=10, y=80)
            
            # Add Button + New Window Open
            
            def openNewWindow():
            def close_window():
            newWindow.destroy()
            
            newWindow = Toplevel(master)
            newWindow.title("New Window")
            window_height = 565
            window_width = 970
            screen_width = newWindow.winfo_screenwidth()
            screen_height = newWindow.winfo_screenheight()
            x_cordinate = int((screen_width / 2) - (window_width / 2))
            y_cordinate = int((screen_height / 2) - (window_height / 2))
            newWindow.geometry("{}x{}+{}+{}".format(window_width, window_height, x_cordinate, y_cordinate))
            newWindow.configure(background="#071530")
            
            # create a text box
            output = Text(newWindow, width=75, height=6, wrap=WORD, background="white")
            output.grid(row=2, column=0, columnspan=10, sticky=W, padx=170, pady=30)
            
            # create lable
            Label(newWindow, text="BLABLA", bg="#071530", fg="white", font="calibre 20 bold").grid(row=0,
            column=0,
            sticky=W,
            padx=340,
            pady=30)
            Label(newWindow, text="Subtext.",
            bg="black", fg="white", font="calibre 12 bold").grid(row=1, column=0, sticky=W, padx=230, pady=10)
            
            # create lable
            Label(newWindow, text="CLICK", bg="black", fg="white", font="calibre 12 bold").grid(row=3,
            column=0,
            sticky=W,
            padx=320,
            pady=10)
            Label(newWindow, text="EXIT", bg="black", fg="white", font="calibre 12 bold").grid(row=3,
            column=0,
            sticky=W,
            padx=550,
            pady=10)
            
            # create a button
            Button(newWindow, text="Exit", width=6, command=close_window, bg="orange").grid(row=4, column=0, sticky=W,
            padx=570, pady=1)
            Button(newWindow, text="View", width=6, bg="orange").grid(row=4, column=0, sticky=W, padx=350, pady=1)
            newWindow.mainloop()
            
            
            # button 1 main menu = ADD
            self.button = Button(self, text="Add", width=4, bg="orange", command=openNewWindow)
            self.button.place(x=220, y=79.4)
            
            
            def _resize_image(self,event):
            if event.widget is self:
            # resize background image to fit the frame size
            image = self.image.resize((event.width, event.height))
            self.background_image = ImageTk.PhotoImage(image)
            self.background.configure(image=self.background_image)
            
            
            root = Tk()
            root.title("GUI")
            
            window_height = 565
            window_width = 970
            
            screen_width = root.winfo_screenwidth()
            screen_height = root.winfo_screenheight()
            
            x_cordinate = int((screen_width/2) - (window_width/2))
            y_cordinate = int((screen_height/2) - (window_height/2))
            
            root.geometry("{}x{}+{}+{}".format(window_width, window_height, x_cordinate, y_cordinate))
            
            e = MainScreen(root)
            e.pack(fill=BOTH, expand=1)
            
            root.mainloop()

The code you posted has many indentation errors. Please post valid code. — Bryan Oakley, Aug 30 '20 at 21:57

score 1 · Answer 1 · answered Aug 30 '20 at 18:11

You can do this by calling grid_remove() of the current frame and then grid() on the new frame. Or, being lazy you can call grid_remove() on everything so that you don't have to remember which page is current.

   def _resize_image(self,event)::
'''Show a frame for the given page name'''

for frame in self.frames.values():


 frame.grid_remove()
frame = self.frames[page_name]
frame.grid()

Note: the automatic resizing will stop working if you give the main window a fixed size with the geometry method on the root window, or if the user manually resizes the window. This is because tkinter assumes that if something explicitly requests a window size, that size should be honored.

If you always want the window to resize, you should reset the geometry to an empty string. You can add this as the last statement in the show_frame method:

frame.winfo_toplevel().geometry("")

TKinter GUI resizing window dynamically with background and buttons

1 Answers1