How to switch between frames in tkinter - python-3.x

Question

Currently resisting the temptation to throw my laptop out of the window and smash it with a bat at this point.
Currently, I'm trying to create a simple GUI for what used to be a nice simple text based RPG game. But trying to work with a GUI makes me want to die.
I just want to have a scaleable way to swap between frames in the game. (Currently there exists the main menu and the Work in progress character creation screen because I can't even manage to get even just that to work.)
I've tried most things that I can find on this website and on discord servers and I seem to just get a new error every time.
I just want to know how to swap between these since trying anything that I can find online just creates more errors.
There are more "screens" to come since it's a game so a scaleable solution would be perfect thanks.
import tkinter
from tkinter import *
from tkinter import ttk
from PIL import ImageTk, Image
root = Tk()
content = ttk.Frame(root)
root.geometry("600x600")
class CharacterCreate(tkinter.Frame):
def __init__(self, parent):
tkinter.Frame.__init__(self)
self.parent = parent
backgroundchar = ImageTk.PhotoImage(Image.open("plont2.png"))
backgroundlabelchar = tkinter.Label(content, image = backgroundchar)
backgroundlabelchar.image = backgroundchar
backgroundlabelchar.grid(row=1,column=1)
Charname = tkinter.Label(content, text = "Enter your character name here:").grid(row=0)
e1 = tkinter.Entry(content)
e1.grid(row=0, column=1)
e1.lift()
CharBtn1 = Button(content, text="Return to main menu", width = 15, height = 1)
CharBtn1.grid(row=2, column=2)
CharBtn1.lift()
class MainMenu(tkinter.Frame):
def __init__(self, parent):
tkinter.Frame.__init__(self)
self.parent = parent
background = ImageTk.PhotoImage(Image.open("bred.png"))
content.grid(column=1, row=1)
Btn1 = Button(content, text="Play", width=5, height=1, command = CharacterCreate.lift(1))
Btn2 = Button(content, text="Quit", width=5, height=1, command = root.quit)
backgroundlabel = tkinter.Label(content, image=background)
backgroundlabel.image = background
backgroundlabel.grid(row=1, column=1)
Btn1.grid(row=1, column=1, padx=(50), pady=(50))
Btn1.columnconfigure(1, weight=1)
Btn1.rowconfigure(1, weight=1)
Btn1.lift()
Btn2.grid(row=1, column=2, padx=(50), pady=(50))
Btn2.columnconfigure(2, weight=1)
Btn2.rowconfigure(1, weight=1)
Btn2.lift()
MainMenu(1)
root.mainloop()

Answer 1

You have five major problems:
you are calling a function immediately (command=CharacterCreate.lift(1)) rather than at the time the button is clicked (command=CharacterCreate.lift),
you are passing an invalid argument to lift - you are passing 1, but the argument to lift must be another widget,
you are calling lift on a class rather than an instance of a class.
you never create an instance of CharacterCreate
your classes inherit from Frame but you never use the classes as frames -- they each place their widgets directly in container
Switching between pages usually involves one of two techniques: create all the frames at startup and then lift the active frame above the others, or destroy the current frame and recreate the active frame. You seem to be attempting to do the latter, so this answer will show you how to do that.
Since fixing your program is going to require many changes, I am instead going to show you a template that you can use to start over.
Let's start with an import, and then the definition of your pages. To keep the example short, each class will have a single label so that you can distinguish between them (note: importing tkinter "as tk" is done simply to make the code a bit easier to read and type):
import tkinter as tk
class CharacterCreate(tk.Frame):
def __init__(self, parent):
tk.Frame.__init__(self, parent)
label = tk.Label(self, text="I am CharacterCreate")
label.pack(padx=20, pady=20)
class MainMenu(tk.Frame):
def __init__(self, parent):
tk.Frame.__init__(self, parent)
label = tk.Label(self, text="I am MainMenu")
label.pack(padx=20, pady=20)
Your original code created a container, so we'll do that next. We need to create the root window, too:
root = tk.Tk()
container = tk.Frame(root)
container.pack(fill="both", expand=True)
Now we need to create an instance of each page, giving them the container as the parent. As a rule of thumb, the code that creates a widget should be the code that calls pack, place, or grid on the widget, so we have to do that too. We need to make sure that grid is configured to give all weight to row 0 column 0.
main = MainMenu(container)
cc = CharacterCreate(container)
main.grid(row=0, column=0, sticky="nsew")
cc.grid(row=0, column=0, sticky="nsew")
container.grid_rowconfigure(0, weight=1)
container.grid_columnconfigure(0, weight=1)
We need a way to lift one of the classes above the other. That's best handled by a function. To make the code easier to understand we'll save the pages in a dictionary so we can reference them by name. This name will be the argument to the function.
pages = {"cc": cc, "main": main}
def switch(name):
page = pages[name]
page.lift()
Finally, we need to start with the main menu on top, and we need to start the event loop:
switch('main')
root.mainloop()
With that, you have a program that runs and displays the main menu. To finish the example lets add a button to the menu to switch to the create page, and create a button in the create page to switch back to the menu.
First, inside the __init__ of MainMenu add the following after the code that creates the label. Notice that because we need to pass an argument to switch, we use lambda:
button = tk.Button(self, text="Go to creater", command=lambda: switch('cc'))
button.pack()
And next, inside the __init__ of CharacterCreate add the following after the code that creates the label:
button = tk.Button(self, text="Go to main menu", command=lambda: switch('main'))
button.pack()
With that, you now have the basic structure to create as many pages as you want, and easily switch to them by name.