How to switch between pages in the same window (Tkinter)

Question

So I have these two pages. And I want Switch between them in the same windows:

Page 1:

import tkinter as tk
from tkinter import *
from PIL import Image, ImageTk
import customtkinter as ct
from tkinter import ttk
from numpy import roots
import pandas as pd
import random


Height = 600
Width = 700 
Dark_theme = True
root = tk.Tk() 

main = root
accounts = root


def welcome_page_dark():
 # Main canvas
 canvas = tk.Canvas(main, height=Height, width=Width, bg = '#272222', bd=5 )
 canvas.pack(fill="both", expand=1)

 #Main Frame (child of canvas)
 frame = tk.Frame(canvas, bg = '#CB2E2E')
 frame.place(relx=0, rely=0, height = 48, relwidth=1, anchor='nw')

 #Menu widget
 Accounts_button = ct.CTkButton(canvas, fg_color= '#FFFFFF', text_color = '#FFFFFF', corner_radius=25)
 Accounts_button.place(relx=.01, rely=.01,anchor= 'nw', relheight= 0.01, relwidth = 0.05)

 Accounts_button = ct.CTkButton(canvas, fg_color= '#FFFFFF', text_color = '#FFFFFF', corner_radius=25)
 Accounts_button.place(relx=.01, rely=.03,anchor= 'nw', relheight= 0.01, relwidth = 0.05)

 Accounts_button = ct.CTkButton(canvas, fg_color= '#FFFFFF', text_color = '#FFFFFF', corner_radius=25)
 Accounts_button.place(relx=.01, rely=.05,anchor= 'nw', relheight= 0.01, relwidth = 0.05)

 # Logo
 book1 = Image.open('drawing.png')
 resized_image= book1.resize((300,420), Image.ANTIALIAS)
 img1 = ImageTk.PhotoImage(resized_image)
 img = Label(canvas, image=img1, bg='#272222')
 img.image = img1
 img.place(relx=.50, rely=.4, anchor= CENTER)


# Welcome text
 label = tk.Label(canvas, font = ('Montserrat', 15, 'bold'), fg= '#FFFFFF', text = 'WELCOME TO PRUDENTIA', bg = '#272222' )
 label.place(relx=.5, rely=.55,anchor= CENTER)

 # Accounts Button 
 Accounts_button = ct.CTkButton(canvas, text = 'ACCOUNTS',text_font = ('Montserrat', 15, 'bold'), text_color= '#FFFFFF', fg_color= '#CB2E2E', hover_color='#D97070', corner_radius=5, command=lambda: Accs())
 Accounts_button.place(relx=.5, rely=.65,anchor= CENTER, relheight= 0.055, relwidth = 0.12)

 # Add Account button
 Add_Accounts_button = ct.CTkButton(canvas, text = 'ADD AN ACCOUNT',text_font = ('Montserrat', 15, 'bold'), text_color= '#FFFFFF', fg_color= '#CB2E2E', hover_color='#D97070', corner_radius=5)
 Add_Accounts_button.place(relx=.5, rely=.72,anchor= CENTER, relheight= 0.055, relwidth = 0.16)

 # teacher login
 teacher_log_button = ct.CTkButton(canvas, text = 'OR LOGIN AS A TEACHER INSTEAD',text_font = ('Montserrat', 15, 'bold'), text_color= '#FFFFFF', fg_color= '#3012E4', hover_color='#8376D8', corner_radius=5)
 teacher_log_button.place(relx=.5, rely=.79,anchor= CENTER, relheight= 0.055, relwidth = 0.28)

def welcome_page_light():
 # Main canvas
 canvas = tk.Canvas(root, height=Height, width=Width, bd=5 )
 canvas.pack(fill="both", expand=True)

 #Main Frame (child of canvas)
 frame = tk.Frame(canvas, bg = '#CB2E2E')
 frame.place(relx=0, rely=0, height = 48, relwidth=1, anchor='nw')

 #Menu widget
 Accounts_button = ct.CTkButton(canvas, fg_color= '#FFFFFF', text_color = '#FFFFFF', corner_radius=25)
 Accounts_button.place(relx=.01, rely=.01,anchor= 'nw', relheight= 0.01, relwidth = 0.05)

 Accounts_button = ct.CTkButton(canvas, fg_color= '#FFFFFF', text_color = '#FFFFFF', corner_radius=25)
 Accounts_button.place(relx=.01, rely=.03,anchor= 'nw', relheight= 0.01, relwidth = 0.05)

 Accounts_button = ct.CTkButton(canvas, fg_color= '#FFFFFF', text_color = '#FFFFFF', corner_radius=25)
 Accounts_button.place(relx=.01, rely=.05,anchor= 'nw', relheight= 0.01, relwidth = 0.05)

 # Logo
 book1 = Image.open('drawing.png')
 resized_image= book1.resize((300,420), Image.ANTIALIAS)
 img1 = ImageTk.PhotoImage(resized_image)
 img = Label(canvas, image=img1)
 img.image = img1
 img.place(relx=.50, rely=.4, anchor= CENTER)


# Welcome text
 label = tk.Label(canvas, font = ('Montserrat', 15, 'bold'), fg= '#CB2E2E', text = 'WELCOME TO PRUDENTIA' )
 label.place(relx=.5, rely=.55,anchor= CENTER)

 # Accounts Button 
 Accounts_button = ct.CTkButton(canvas, text = 'ACCOUNTS',text_font = ('Montserrat', 15, 'bold'), text_color= '#FFFFFF', fg_color= '#CB2E2E', hover_color='#D97070', corner_radius=5)
 Accounts_button.place(relx=.5, rely=.65,anchor= CENTER, relheight= 0.055, relwidth = 0.12)

 # Add Account button
 Add_Accounts_button = ct.CTkButton(canvas, text = 'ADD AN ACCOUNT',text_font = ('Montserrat', 15, 'bold'), text_color= '#FFFFFF', fg_color= '#CB2E2E', hover_color='#D97070', corner_radius=5)
 Add_Accounts_button.place(relx=.5, rely=.72,anchor= CENTER, relheight= 0.055, relwidth = 0.16)

 # teacher login
 teacher_log_button = ct.CTkButton(canvas, text = 'OR LOGIN AS A TEACHER INSTEAD',text_font = ('Montserrat', 15, 'bold'), text_color= '#FFFFFF', fg_color= '#3012E4', hover_color='#8376D8', corner_radius=5)
 teacher_log_button.place(relx=.5, rely=.79,anchor= CENTER, relheight= 0.055, relwidth = 0.28)

if Dark_theme:
 welcome_page_dark()
else:
 welcome_page_light()


root.mainloop()

Page 2:

    from ast import Global
from hashlib import new
import tkinter as tk
from tkinter import *
from PIL import Image, ImageTk
import customtkinter as ct
from tkinter import ttk
import pandas as pd
import random

root = tk.Tk()

def Accounts_dark(window):

 dfs = pd.read_csv('student_accs.csv')
 df = pd.DataFrame(dfs)


Height = 600
 Width = 700 
 Dark_theme = True
 
 colors = ['#FC3D3D', '#DBDF0E', '#F24008', '#EA1F1F', '#299CAC', '#FC3D82', '#5AD99C', '#6F3DFC']
 # Main canvas
 frame = tk.Frame(window, height=Height, width=Width)
 frame.pack(fill='both', expand=1)
 # Main canvas
 canvas = tk.Canvas(frame, height=Height, width=Width, bg = '#272222', bd=5 )
 canvas.pack(fill="both", expand=1)

 #Student widgets frame
 account_frame = tk.Frame(canvas, bg='#272222')
 account_frame.place(relx=0,rely=0, relheight=1,relwidth=1)

 #scrollbar
 scrollbar = ttk.Scrollbar(canvas, orient=VERTICAL, command=canvas.yview)
 scrollbar.pack(side=RIGHT, fill=Y)

 #configure canvas with the scrollbar
 canvas.configure(yscrollcommand=scrollbar.set)
 canvas.bind('<Configure>', lambda e: canvas.configure(scrollregion= canvas.bbox('all')))


# new frame
 new_frame = Frame(canvas, bg= '#272222')
 # canvas window for the main frame
 canvas.create_window((0,0), window=new_frame,anchor='nw')

 #Main Frame (child of canvas)
 frame = tk.Frame(canvas, bg = '#CB2E2E')
 frame.place(relx=0, rely=0, relheight = .069, relwidth=1, anchor='nw')

 #Accounts text
 Accounts_txt = tk.Label(frame, height=2,width=11, font = ('Montserrat', 15, 'bold'), bg='#CB2E2E', text='ACCOUNTS', fg= '#FFFFFF')
 Accounts_txt.place(relx=.5, rely=.5, anchor=CENTER)

 # Actual widgets
 

 

 def widget_creator():
 for index, rows in df.iterrows():

 
 
 row, col = divmod(index, 3)
 ct.CTkButton(new_frame, text= rows['Name'], text_font = ('Montserrat', 15, 'bold'), corner_radius=10, fg_color=random.choice(colors), text_color='#FFFFFF').grid(row=row, column=col, pady=100, padx=50, ipadx = 100, ipady=130)
 
 
 
 
 widget_creator()
 

 

Accounts_dark(root)

root.mainloop()

(The code of both these pages are in different files as I didn't want to pile up and write everything in the same file. I want to use import statements to use these files)

As you can see that all the elements are children of a Canvas and not a Frame. And this is a problem I wasn't able to find any good solution to switch between Canvas pages and that too in the same window without opening a new one. So is there anyway to switch between pages that are basically canvases and not frames?

Thanks

See [Switch between two frames in tkinter?](https://stackoverflow.com/questions/7546050/switch-between-two-frames-in-tkinter/7557028#7557028) — martineau, Jun 29 '22 at 07:37
Your two code segments create *different windows* actually, so it needs to redesign in order to *switch between pages in same window*. — acw1668, Jun 29 '22 at 07:39
I would suggest to use the `tabControl` option of the tkk Notebook. Check out [this](https://www.geeksforgeeks.org/creating-tabbed-widget-with-python-tkinter/). As you would only have one `root`, I would maybe design the GUI in one single file and only import certain functions from a second file. — steTATO, Jul 01 '22 at 12:35

How to switch between pages in the same window (Tkinter)

0 Answers0