Create Multi-Page Tkinter Apps in Python – Page Switching with Frames

← Back to Home

 

---

🐍 Python UI Programming Series — Part 4: Building Multi-Page UIs in Tkinter

---

📘 Overview

Until now, you’ve built single-window applications. But what if your app needs multiple pages, like a login screen, dashboard, and settings page?

In this part, you'll learn how to:

• Create multiple pages (or screens)

• Switch between pages using Frames

• Build a mini multi-page app

---

🔄 Why Multi-Page UIs?

Most real applications have multiple screens:

• Login page ➜ Dashboard

• Homepage ➜ Settings ➜ Profile

• Step-by-step forms

Tkinter doesn’t have a built-in "page manager", but we can simulate it with Frames.

---

🏗️ Multi-Page Layout with tk.Frame

We’ll use a container Frame to hold multiple child Frames (each as a “page”), and a controller to switch between them.

---

✅ Example: A 3-Page App (Start, Page One, Page Two)

import tkinter as tk

class App(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title("Multi-Page Tkinter App")
        self.geometry("400x250")
        
        container = tk.Frame(self)
        container.pack(fill="both", expand=True)

        self.frames = {}

        for F in (StartPage, PageOne, PageTwo):
            page_name = F.__name__
            frame = F(parent=container, controller=self)
            self.frames[page_name] = frame
            frame.grid(row=0, column=0, sticky="nsew")

        self.show_frame("StartPage")

    def show_frame(self, page_name):
        frame = self.frames[page_name]
        frame.tkraise()

class StartPage(tk.Frame):
    def __init__(self, parent, controller):
        super().__init__(parent)
        self.controller = controller
        tk.Label(self, text="Start Page", font=("Arial", 16)).pack(pady=20)
        tk.Button(self, text="Go to Page One", command=lambda: controller.show_frame("PageOne")).pack()
        tk.Button(self, text="Go to Page Two", command=lambda: controller.show_frame("PageTwo")).pack()

class PageOne(tk.Frame):
    def __init__(self, parent, controller):
        super().__init__(parent)
        self.controller = controller
        tk.Label(self, text="Page One", font=("Arial", 16)).pack(pady=20)
        tk.Button(self, text="Back to Start", command=lambda: controller.show_frame("StartPage")).pack()

class PageTwo(tk.Frame):
    def __init__(self, parent, controller):
        super().__init__(parent)
        self.controller = controller
        tk.Label(self, text="Page Two", font=("Arial", 16)).pack(pady=20)
        tk.Button(self, text="Back to Start", command=lambda: controller.show_frame("StartPage")).pack()

if __name__ == "__main__":
    app = App()
    app.mainloop()

---

🧠 Key Concepts

• All pages are Frames stacked in the same container.

• tkraise() brings the desired page to the front.

• The controller (App) switches between pages.

This pattern is scalable and used by professional Tkinter developers.

---

🧩 How to Extend It

You can now:

• Add login logic to the StartPage

• Build a dashboard in PageOne

• Create settings or data entry forms in PageTwo

• Use TTK styling to make it pretty (see Part 3)

---

💡 Recap

In this part, you learned:

• How to organize multiple pages using frames

• How to switch between pages dynamically

• A reusable pattern for building real apps in Tkinter

---

🚀 Coming Up in Part 5:

“Connecting Python GUI to a Backend: Storing Data with SQLite”

• Learn to save user input to a database

• Build forms that remember your data

← Previous Next →