How To Navigate Between Pages In A Python Tkinter?

Recently someone asked me how to create a multi-page Python Tkinter application, which allows users to seamlessly navigate between different pages or frames within the same window, I discovered effective techniques to switch between pages without opening new windows, providing a smooth and intuitive user experience.

Table of Contents

Navigate Between Pages in a Python Tkinter

Let’s dive into a practical example to illustrate the concept. Suppose we want to build a contact management system for a company based in New York. The application will have three pages: a login page, a registration page, and a contact list page.

Read How to Create Tables in Python Tkinter?

Step 1: Create the Main Window

This step initializes the Tkinter application, creates a container to hold pages, and sets up frame switching.

import tkinter as tk

class ContactApp(tk.Tk):
    def __init__(self):
        super().__init__()

        self.title("Contact Management App")
        self.geometry("400x300")

        # Container for pages
        container = tk.Frame(self)
        container.pack(side="top", fill="both", expand=True)

        # Configure grid layout
        container.grid_rowconfigure(0, weight=1)
        container.grid_columnconfigure(0, weight=1)

        # Dictionary to store page frames
        self.frames = {}

        # Add pages to the container
        for F in (LoginPage, RegistrationPage, ContactListPage):
            frame = F(container, self)
            self.frames[F] = frame
            frame.grid(row=0, column=0, sticky="nsew")

        self.show_frame(LoginPage)  # Show the Login page first

    def show_frame(self, cont):
        """Bring a specific frame to the front."""
        frame = self.frames[cont]
        frame.tkraise()

Creates the main Tkinter window, Adds a container frame to hold multiple pages, Uses a dictionary (self.frames) to store page instances, Defines show_frame() to switch between pages.

Check out How to Create Python Tkinter Text Editor?

Step 2: Create Page Classes

Each page (Login, Registration, Contact List) is a subclass of tk.Frame and has its own background color and navigation buttons.

class LoginPage(tk.Frame):
    def __init__(self, parent, controller):
        super().__init__(parent, bg="lightblue")  # Set background color
        label = tk.Label(self, text="Login Page", font=("Arial", 16), bg="lightblue")
        label.pack(pady=20)

        # Navigation Button to Registration
        button_register = tk.Button(self, text="Go to Register", command=lambda: controller.show_frame(RegistrationPage))
        button_register.pack(pady=5)

        # Navigation Button to Contact List
        button_contact = tk.Button(self, text="Go to Contacts", command=lambda: controller.show_frame(ContactListPage))
        button_contact.pack(pady=5)

class RegistrationPage(tk.Frame):
    def __init__(self, parent, controller):
        super().__init__(parent, bg="lightgreen")  # Set background color
        label = tk.Label(self, text="Registration Page", font=("Arial", 16), bg="lightgreen")
        label.pack(pady=20)

        # Navigation Button to Login
        button_login = tk.Button(self, text="Back to Login", command=lambda: controller.show_frame(LoginPage))
        button_login.pack(pady=5)

        # Navigation Button to Contact List
        button_contact = tk.Button(self, text="Go to Contacts", command=lambda: controller.show_frame(ContactListPage))
        button_contact.pack(pady=5)

class ContactListPage(tk.Frame):
    def __init__(self, parent, controller):
        super().__init__(parent, bg="lightcoral")  # Set background color
        label = tk.Label(self, text="Contact List Page", font=("Arial", 16), bg="lightcoral")
        label.pack(pady=20)

        # Navigation Button to Login
        button_login = tk.Button(self, text="Back to Login", command=lambda: controller.show_frame(LoginPage))
        button_login.pack(pady=5)

        # Navigation Button to Registration
        button_register = tk.Button(self, text="Go to Register", command=lambda: controller.show_frame(RegistrationPage))
        button_register.pack(pady=5)

Pages inherit from tk.Frame, Navigation buttons allow switching between pages.

Read How to Create Animations in Python with Tkinter?

Step 3: Implement Page Switching

Finally, we run the app and display the ContactApp class.

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

Creates an instance of ContactApp(), Runs the Tkinter event loop.

You can look at the output in the screenshot below.

Navigate Between Pages in a Python Tkinter

Read How to Create Animations in Python with Tkinter?

Best Practices and Tips

When building a multi-page Tkinter application, consider the following best practices and tips:

Use a consistent design and layout across all pages to provide a cohesive user experience.
Organize your code into separate classes for each page to improve readability and maintainability.
Utilize Tkinter geometry managers effectively to create responsive layouts that adapt to different window sizes.
Implement error handling and validation to ensure a robust application.
Consider using the Model-View-Controller (MVC) pattern to separate the application logic, data, and user interface.

Check out How to Master Python Tkinter Events?

Conclusion

In this tutorial, I helped you learn how to navigate between different pages in Python Tkinter. I explain step by step the creation of the main window , creating page classes , and implementing page switching. And also some best practices and tips.

You may read:

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/