Tkinter python layout grid pack place

Question

Can somebody with more tkinter experience than me please have a look at this code and tell me how I could refactor it.

The code builts on: tkinter gui layout using frames and grid

I have particular doubt about:

-grid and place i.e. is it possible to center a widget in a frame using only grid?

-global and the way I keep track of the active frame - is there a better way?

from tkinter import *

def set_ret_btn_vis(new_visibility):
    if(new_visibility):
        ret_btn.grid(row=1, column=2, padx=50)
    else:
        ret_btn.grid_forget()

def show_main_menu():
    #populate the main frame with two action buttons
    print("I am the Main Menu")
    global active_frame
    if(active_frame!=main_menu):
        active_frame.grid_forget()
    
    main_menu.grid(row=1,sticky="ew")
    task1_btn.place(relx =0.2, rely=0.45)
    task2_btn.place(relx =0.5, rely=0.45)

def show_task1_frame():
    print("I am Task1")
    global active_frame
    active_frame = task1
    main_menu.grid_forget()
    task1.grid(row=1,sticky="ew")

def show_task2_frame():
    print("I am Task2")
    global active_frame
    active_frame = task2
    main_menu.grid_forget()
    task2.grid(row=1,sticky="ew")

root = Tk()
root.title("IM-Tools")
root.geometry("{}x{}".format(400,350))

# creates all the frames
top_frame = Frame(root, bg="red", width=400,height=50)
main_menu = Frame(root,bg="#FFAAFF",width=400,height=250 )
task1 = Frame(root,bg="#00CCDD", width=400,height=250)
task2 = Frame(root,bg="#AA00C0", width=400,height=250)
bottom_frame = Frame(root, bg="yellow", width=400,height=50)

# stops frame from shrinking when widget is placed inside
top_frame.grid_propagate(0)
bottom_frame.grid_propagate(0)

# layout main containers
root.grid_rowconfigure(1, weight=1)
root.grid_columnconfigure(0, weight=1)

top_frame.grid(row=0)
main_menu.grid(row=1)
bottom_frame.grid(row=2)


# create all widgets used by the different frames
# top frame
ret_btn = Button(top_frame,text="Main Menu", width=10,  command= lambda: [set_ret_btn_vis(False), show_main_menu()] )
# main frame
task1_btn = Button(main_menu, text="Action1", command= lambda: [ set_ret_btn_vis(True),show_task1_frame()] )
task2_btn = Button(main_menu, text="Action2", command= lambda: [ set_ret_btn_vis(True),show_task2_frame()] )
name_lbl = Label(bottom_frame, text="my name", bg='yellow')
name_lbl.place(relx=0.4, rely=0.45)

# keeps track of currently active frame
active_frame = main_menu

# first 
show_main_menu()

root.mainloop()

Yes it is possible to center a widget with the grid method look: https://stackoverflow.com/questions/63014842/how-to-stretch-cell-horizontally-using-grid-in-tkinter/63015055#63015055 — Thingamabobs, Aug 01 '20 at 10:00
Why do you think you need to keep track of your frames like this? — Thingamabobs, Aug 01 '20 at 10:01
Also you may will start this in the right way, in use of OOP(object orientated programming) look https://stackoverflow.com/a/17470842/13629335 — Thingamabobs, Aug 01 '20 at 10:05
If you click on my profil you will find some of my answers that are worth looking for, if you just started. — Thingamabobs, Aug 01 '20 at 10:07
the OOP suggstion is a good one and I shall do that. I think I need to keep track of the active Frame in order to call grid_forget() on the currently active frame? or maybe there is another way. — frankBang, Aug 01 '20 at 10:21
Yes it has some extra benefits look https://stackoverflow.com/questions/62619867/layering-graphical-interfaces-on-top-of-each-other/62620295#62620295 — Thingamabobs, Aug 01 '20 at 10:23

frankBang · Answer 1 · 2020-08-02T04:31:18.327

Thank you very much @Atlas435 I changed the code accordingly - I hope this will help someone after me.

from tkinter import *

class IM_UI(Frame):
    def __init__(self, parent):
        Frame.__init__(self, parent)
        self.parent = parent
        # creates all the frames
        self.top_frame = Frame(self.parent, bg="red", width=400,height=50)
        self.main_menu = Frame(self.parent,bg="#FFAAFF",width=400,height=250 )
        self.task1 = Frame(self.parent,bg="#00CCDD", width=400,height=250)
        self.task2 = Frame(self.parent,bg="#AA00C0", width=400,height=250)
        self.bottom_frame = Frame(self.parent, bg="yellow", width=400,height=50)
        # stops frame from shrinking when widget is placed inside
        
        self.top_frame.grid_propagate(0)
        self.main_menu.grid_propagate(0)
        self.bottom_frame.grid_propagate(0)
        
        # layout main containers
        self.top_frame.grid(row=0)
        self.main_menu.grid(row=1)
        self.bottom_frame.grid(row=2)
        # make row one auto-extend / make column zero auto-extend
        self.parent.grid_rowconfigure(1, weight=1)
        self.parent.grid_columnconfigure(0, weight=1)
        # bottom_frame has onw row / by saying ( 0, weight=1 ) it allows the row to grow with the size of the frame
        self.bottom_frame.grid_rowconfigure(0,weight=1)
        self.bottom_frame.grid_columnconfigure(0,weight=1)
        # create all widgets used by the different frames
        # top frame  
        self.ret_btn = Button(self.top_frame,text="Main Menu", width=10,  command= lambda: [self.set_ret_btn_vis(False), self.show_main_menu()] )
        # main frame
        self.task1_btn = Button(self.main_menu, text="Action1", command= lambda: [ self.set_ret_btn_vis(True),self.show_task1_frame()] )
        self.task2_btn = Button(self.main_menu, text="Action2", command= lambda: [ self.set_ret_btn_vis(True),self.show_task2_frame()] )

        # configure the grid / rows of the main frame
        # have to columns equally weighted and one row 
        self.main_menu.grid_columnconfigure(0, weight=1)
        self.main_menu.grid_columnconfigure(1, weight=1)
        self.main_menu.grid_rowconfigure(0,weight=1)

        # with the sticky options the buttons expand
        self.task1_btn.grid(column=0, row=0, columnspan=1)#, sticky="ew")
        self.task2_btn.grid(column=1, row=0, columnspan=1)#, sticky="ew")

        # bottom frame
        self.name_lbl = Label(self.bottom_frame, text="my name", bg='yellow')
        self.name_lbl.grid(column=0, columnspan=1, sticky="nsew")
       
        # keeps track of currently active frame
        self.active_frame = self.main_menu
    
    def set_ret_btn_vis(self,new_visibility):
        if(new_visibility):
            self.ret_btn.grid(row=1, column=2, padx=50)
        else:
            self.ret_btn.grid_forget()

    def show_main_menu(self):
        #populate the main frame with two action buttons
        print("I am the Main Menu")
        self.active_frame.grid_forget()
        self.main_menu.grid(row=1,sticky="nsew")

    def show_task1_frame(self):
        print("I am Task1")
        self.main_menu.grid_forget()
        self.task1.grid(row=1,sticky="ew")
        #set the new active frame
        self.active_frame = self.task1

    def show_task2_frame(self):
        print("I am Task2")
        self.main_menu.grid_forget()
        self.task2.grid(row=1,sticky="ew")
        #set the new active frame
        self.active_frame = self.task2

root = Tk()
root.title("IM-Tools")
root.geometry("{}x{}".format(400,350))
root.resizable(False,False)

my_UI = IM_UI(root)


root.mainloop()

Tkinter python layout grid pack place

1 Answers1