Tkinter Frame Show and clear design

Question

I am trying the following design for one of my desktop application :

• There will be 2 buttons in the container which shall not disappear throughout the applications.
• On clicking buttton-1, Frame1 will show and on button-2, Frame2

I tried the following code with the grid design and tried adjusting it according to the grid details as described in various tutorial but couldn't get the design

from tkinter import *
from tkinter import ttk
from ttkthemes import themed_tk as tk

root = tk.ThemedTk()
  
width_value = root.winfo_screenwidth()
height_value = root.winfo_screenheight()
root.geometry(f"{width_value}x{height_value}+0+0")
root.resizable(True, True)
root.grid_columnconfigure(0,weight=1)
root.grid_rowconfigure(0,weight=1)
root.title("xyz")
root.iconbitmap(r'icon.ico')
#root.configure(background="LightBlue")


TopFrame = Frame(root,relief='solid',bg="Blue")
TopFrame.grid(row=0,column=0,sticky=N+W)
leftframe = Frame(root,relief='solid',bd=2,bg="Green")
leftframe.grid(row=1,column=0,padx=10, pady=10,sticky= W)
rightframe = Frame(root,relief='solid',bd=2,bg="RED")
rightframe.grid(row=0,column=1,padx=10, pady=10,sticky=E)


ddBtn = ttk.Button(TopFrame,text="Button1")
ddBtn.grid(row=0,column=0,sticky=N+W+E)
ddBtn1 = ttk.Button(TopFrame, text="Button2")
ddBtn1.grid(row=0,column=1,sticky=N+W+E)


root.mainloop()

Answer 1

Tkinter has a built-in method for that. This method adds a tab bar on the top of the page and lets you switch between frames by selecting different tabs.

import tkinter as tk
from tkinter import ttk

if __name__ == "__main__":
    root = tk.Tk()

    tabControl = ttk.Notebook(root)
    tabControl.grid(row=0,column=0,sticky="nsew")
    # make frame
    leftFrame = tk.Frame(tabControl,width=300,height=300)
    # add to tab controll
    tabControl.add(leftFrame, text="Frame 1")
    # add seccond frame
    rightFrame = tk.Frame(tabControl,width=300,height=300)
    tabControl.add(rightFrame, text="Frame 2")

    root.mainloop()

Answer 2

You had the basic idea. Add some width & height parameters to leftframe & rightframe, so they actually fill the space. Then define some show & hide callbacks for your buttons. Tweak padding & placement.

#! /usr/bin/env python3
##  pip3 install ttkthemes

from tkinter import *
from tkinter import ttk
from ttkthemes import themed_tk as tk

root = tk .ThemedTk()
##  define all your root stuff before trying to add widgets to it
Width = root .winfo_screenwidth()
Height = root .winfo_screenheight()

root .geometry( f'{Width}x{Height}' )
root .resizable( True, True )

root .grid_columnconfigure( 0, weight=1 )
root .grid_rowconfigure( 0, weight=1 )

root .title( 'xyz' )
##  root .iconbitmap( r'icon .ico' )  don't happen to have this installed here
root .configure( background='LightBlue' )

# Create the menubar
menubar = Menu( root )
root .config( menu=menubar )

statusbar = ttk .Label( root, text='Status Bar', width=130, relief=SUNKEN, font='Times 10 italic' )
statusbar .grid( row=10, column=0, columnspan=4 )

def popupmsg( msg ):
    popup = tk .Tk()
    popup .wm_title( '!' )
    label = tk .Label( popup, text=msg )
    label .grid( row=5, column=7, pady=10 )
    popup .mainloop()

# Create the submenu
fileMenu = Menu( menubar, tearoff=0 )
fileMenu .add_command( label='New File', command= lambda : popupmsg( 'New file' ) )
fileMenu .add_command( label='Open File', command= lambda : popupmsg( 'Open File' ) )
fileMenu .add_command( label='Open Folder', command= lambda : popupmsg( 'Open folder' ) )
fileMenu .add_separator()
fileMenu .add_command( label='Save', command= lambda : popupmsg( 'Save' ) )
fileMenu .add_command( label='Save As', command= lambda : popupmsg( 'Save As' ) )
fileMenu .add_separator()
fileMenu .add_command( label='Exit', command= quit )
menubar .add_cascade( label='File', menu=fileMenu )

# Edit menu
Editmenu = Menu( menubar, tearoff=0 )
Editmenu .add_command( label='Undo', command= lambda : popupmsg( 'Undo' ) )
Editmenu .add_command( label='Redo', command= lambda : popupmsg( 'Redo' ) )
Editmenu .add_separator()
Editmenu .add_command( label='Cut', command= lambda : popupmsg( 'Open folder' ) )
Editmenu .add_command( label='Copy', command= lambda : popupmsg( 'Open folder' ) )
Editmenu .add_command( label='Paste', command= lambda : popupmsg( 'Open folder' ) )
menubar .add_cascade( label='Edit', menu=Editmenu )

# View Menu
ViewMenu = Menu( menubar, tearoff=0 )
ViewMenu .add_command( label='Explorer', command= lambda : popupmsg( 'Explorer' ) )
menubar .add_cascade( label='View', menu=ViewMenu )

# Run Menu
RunMenu = Menu( menubar, tearoff=0 )
RunMenu .add_command( label='Compile', command= lambda : popupmsg( 'Comppile' ) )
RunMenu .add_command( label='Build', command= lambda : popupmsg( 'Build' ) )
menubar .add_cascade( label='Run', menu=RunMenu )

# Help Menu
HelpMenu = Menu( menubar, tearoff=0 )
menubar .add_cascade( label='Help', menu=HelpMenu )

TopFrame = Frame( root, relief='solid', bg='Blue' )
TopFrame .grid( row=0, column=0, columnspan=4, sticky='n' )

leftframe = Frame( root, width=Width *0.95, height=Height*0.75, relief='solid', bd=2, bg='Green' )
rightframe = Frame( root, width=Width *0.95, height=Height*0.75, relief='solid', bd=2, bg='Red' )

def call1():
    leftframe .grid( row=1, column=0, rowspan=9, columnspan=3, padx=5, pady=5, sticky='w' )
    rightframe .grid_forget()

def call2():
    rightframe .grid( row=1, column=1, rowspan=9, columnspan=3, padx=5, pady=5, sticky='e' )
    leftframe .grid_forget()

ddBtn1 = ttk .Button( TopFrame, text='Button1', command=call1 )
ddBtn1 .grid( row=0, column=1, sticky='nw' )

ddBtn2 = ttk .Button( TopFrame, text='Button2', command=call2 )
ddBtn2 .grid( row=0, column=4, sticky='ne' )

root .mainloop()