Switch Multiple Frames in Tkinter

One of the key features of modern user interfaces is the ability to display multiple pages or frames within the same window. In Tkinter, achieving this functionality is crucial for creating a clean and organized user interface. In this article, we’ll explore how to switch between multiple frames in Tkinter and create a modern UI for our application.

Creating Multiple Frames

To begin, let’s create multiple frames using the Tkinter library. We can do this by instantiating the Frame widget and placing it within the main window. Each frame will act as a separate page within our application, allowing us to switch between them as needed.

“`python
import tkinter as tk

class MainApplication(tk.Tk):
def __init__(self, *args, **kwargs):
tk.Tk.__init__(self, *args, **kwargs)

# Create a container to hold our frames
container = tk.Frame(self)
container.pack(side=”top”, fill=”both”, expand=True)

# Dictionary to hold our frames
self.frames = {}

# Create multiple frames and store them in the dictionary
for F in (HomePage, SettingsPage, AboutPage):
frame = F(container, self)
self.frames[F] = frame
frame.grid(row=0, column=0, sticky=”nsew”)

self.show_frame(HomePage)

def show_frame(self, page):
# Display the specified frame
frame = self.frames[page]
frame.tkraise()

class HomePage(tk.Frame):
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)

label = tk.Label(self, text=”Home Page”)
label.pack(pady=10, padx=10)

class SettingsPage(tk.Frame):
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)

label = tk.Label(self, text=”Settings Page”)
label.pack(pady=10, padx=10)

class AboutPage(tk.Frame):
def __init__(self, parent, controller):
tk.Frame.__init__(self, parent)

label = tk.Label(self, text=”About Page”)
label.pack(pady=10, padx=10)

app = MainApplication()
app.mainloop()
“`

Switching Between Frames

Now that we have created our multiple frames, we need a way to switch between them. This can be achieved by defining a method to show the desired frame and using the tkraise() method to bring it to the front.

“`python
def show_frame(self, page):
# Display the specified frame
frame = self.frames[page]
frame.tkraise()
“`

Creating a Modern UI

With the ability to switch between multiple frames, we can now create a modern UI for our application. Each frame can represent a different section of the application, such as the home page, settings page, and about page. This approach allows for a clean and organized user interface that is easy to navigate.

Conclusion

By utilizing the Frame widget in Tkinter, we can create a modern UI with multiple pages or frames. This functionality is crucial for organizing and presenting different sections of an application to the user. With the ability to switch between frames, we can provide a seamless user experience that is both intuitive and visually appealing.