In this tutorial, I will explain how to create layouts with Python Tkinter Frame. As a Python developer working on various projects, I have faced challenges in designing intuitive and visually appealing user interfaces. Through extensive research and experimentation, I have discovered the uses of the Tkinter Frame widget in solving these layout issues.
Python Tkinter Frame Widget
The Tkinter Frame widget acts as a container that helps arrange the position of other widgets within a GUI application. It is essentially a rectangular area on the screen that organizes the layout of other widgets. By using frames, you can group related widgets and create a hierarchical structure for your GUI.
Read How to Create a Progress Bar in Python Tkinter?
Create Layouts with Python Tkinter Frame
To create a Tkinter Frame, you need to use the Frame class provided by the Tkinter module. Here’s a basic example of how to create an empty frame with a light blue background.
import tkinter as tk
root = tk.Tk()
frame = tk.Frame(root, bg="lightblue")
frame.pack()
root.mainloop()You can see the output in the screenshot below.
In this example, we create a Frame object called frame and pass the root window (root) as its parent. We set the background color of the frame to light blue using the bg parameter. Finally, we use the pack() method to add the frame to the root window and display it.
Check out How to Master the Python Tkinter Canvas?
Organize Widgets within a Frame
One of the main purposes of using frames is to organize widgets within a GUI. By placing widgets inside frames, you can create a structured layout that is easy to understand and maintain. Let’s consider a real-world example of creating a user registration form for a website targeting users in the USA.
import tkinter as tk
def submit_form():
name = name_entry.get()
email = email_entry.get()
state = state_var.get()
print(f"Name: {name}")
print(f"Email: {email}")
print(f"State: {state}")
root = tk.Tk()
root.title("User Registration Form")
# Create frames
header_frame = tk.Frame(root, bg="lightblue", pady=20)
header_frame.pack(fill=tk.X)
form_frame = tk.Frame(root, padx=20, pady=20)
form_frame.pack()
# Add widgets to header frame
header_label = tk.Label(header_frame, text="User Registration", font=("Arial", 24), bg="lightblue")
header_label.pack()
# Add widgets to form frame
name_label = tk.Label(form_frame, text="Name:")
name_label.grid(row=0, column=0, sticky=tk.E)
name_entry = tk.Entry(form_frame)
name_entry.grid(row=0, column=1)
email_label = tk.Label(form_frame, text="Email:")
email_label.grid(row=1, column=0, sticky=tk.E)
email_entry = tk.Entry(form_frame)
email_entry.grid(row=1, column=1)
state_label = tk.Label(form_frame, text="State:")
state_label.grid(row=2, column=0, sticky=tk.E)
state_var = tk.StringVar()
state_dropdown = tk.OptionMenu(form_frame, state_var, "California", "New York", "Texas", "Florida")
state_dropdown.grid(row=2, column=1)
submit_button = tk.Button(form_frame, text="Submit", command=submit_form)
submit_button.grid(row=3, columnspan=2, pady=10)
root.mainloop()You can see the output in the screenshot below.
You can see the output in the screenshot below. In this example, we create two frames: header_frame and form_frame. The header_frame contains a label displaying the form title, while the form_frame contains the form fields and the submit button. We use the grid() method to arrange the widgets within the form_frame in a tabular format.
Read How to Set and Manage Window Size in Python Tkinter?
Position Frames within a Layout
When creating a more complex GUI layout, you may need to position frames in a specific way. Tkinter provides several layout managers, such as pack(), grid(), and place(), to help you arrange frames within a window.
Let’s say you want to create a layout with three frames: a header frame at the top, a content frame in the middle, and a footer frame at the bottom. Here’s how you can achieve this using the pack() layout manager:
import tkinter as tk
root = tk.Tk()
root.title("Three Frame Layout")
# Create frames
header_frame = tk.Frame(root, bg="lightblue", height=100)
header_frame.pack(fill=tk.X)
content_frame = tk.Frame(root, bg="white", padx=20, pady=20)
content_frame.pack(fill=tk.BOTH, expand=True)
footer_frame = tk.Frame(root, bg="lightgray", height=50)
footer_frame.pack(fill=tk.X)
# Add widgets to frames
header_label = tk.Label(header_frame, text="Header", font=("Arial", 18), bg="lightblue")
header_label.pack(pady=20)
content_label = tk.Label(content_frame, text="Content goes here", font=("Arial", 14))
content_label.pack()
footer_label = tk.Label(footer_frame, text="Footer", font=("Arial", 12), bg="lightgray")
footer_label.pack(pady=10)
root.mainloop()You can see the output in the screenshot below.
In this example, we use the pack() method with different parameters to position the frames. The header_frame and footer_frame are packed with fill=tk.X to make them span the entire width of the window. The content_frame is packed with fill=tk.BOTH and expand=True to make it fill the remaining space between the header and footer frames.
Check out How to Use the Tkinter Treeview Widget in Python?
Customize Frame Attributes
Tkinter allows you to customize various attributes of frames to enhance their appearance and behavior. Some common attributes you can modify include:
bg: Sets the background color of the frame.bdorborderwidth: Sets the border width of the frame.relief: Sets the border style of the frame (e.g.,tk.RAISED,tk.SUNKEN).padxandpady: Sets the padding inside the frame.widthandheight: Sets the size of the frame.
Here’s an example that demonstrates how to customize frame attributes:
import tkinter as tk
root = tk.Tk()
root.title("Custom Frame")
frame = tk.Frame(root, bg="lightgreen", bd=2, relief=tk.SOLID, padx=20, pady=20, width=300, height=200)
frame.pack()
label = tk.Label(frame, text="This is a custom frame", font=("Arial", 16))
label.pack()
root.mainloop()You can see the output in the screenshot below.
In this example, we create a frame with a light green background color, a solid border of width 2, padding of 20 pixels on all sides, and a size of 300×200 pixels. We then add a label widget inside the frame to display some text.
Read How to Take User Input and Store It in a Variable Using Python Tkinter?
Python Tkinter Frame Mini-Project
In this project, we have created a beautiful Login & Registration page in Python TKinter. Both login & Registration sections are created using 2 different frames with the names left_frame & right_frame.
from tkinter import *
ws = Tk()
ws.title('Email System')
ws.geometry('940x500')
ws.config(bg='#f7ef38')
variable = StringVar()
gender = ('Male', 'Female', 'Other')
variable.set(gender[0])
# widgets
left_frame = Frame(ws, bd=2, relief=SOLID, padx=10, pady=10)
Label(left_frame, text="Enter Email", font=('Times', 14)).grid(row=0, column=0, sticky=W, pady=10)
Label(left_frame, text="Enter Password", font=('Times', 14)).grid(row=1, column=0, pady=10)
log_em = Entry(left_frame, font=('Times', 14))
log_pw = Entry(left_frame, font=('Times', 14))
login_btn = Button(left_frame, width=15, text='Login', font=('Times', 14), command=None)
right_frame = Frame(ws, bd=2, relief=SOLID, padx=10, pady=10)
Label(right_frame, text="Enter Name", font=('Times', 14)).grid(row=0, column=0, sticky=W, pady=10)
Label(right_frame, text="Enter Email", font=('Times', 14)).grid(row=1, column=0, sticky=W, pady=10)
Label(right_frame, text="Enter Mobile", font=('Times', 14)).grid(row=2, column=0, sticky=W, pady=10)
Label(right_frame, text="Enter Age", font=('Times', 14)).grid(row=3, column=0, sticky=W, pady=10)
Label(right_frame, text="Select Gender", font=('Times', 14)).grid(row=4, column=0, sticky=W, pady=10)
Label(right_frame, text="Enter Password", font=('Times', 14)).grid(row=5, column=0, sticky=W, pady=10)
Label(right_frame, text="Re-Enter Password", font=('Times', 14)).grid(row=6, column=0, sticky=W, pady=10)
reg_na = Entry(right_frame, font=('Times', 14))
reg_em = Entry(right_frame, font=('Times', 14))
reg_mo = Entry(right_frame, font=('Times', 14))
reg_ag = Entry(right_frame, font=('Times', 14))
reg_ge = OptionMenu(right_frame, variable, *gender)
reg_ge.config(width=10, font=('Times', 14))
reg_pw = Entry(right_frame, font=('Times', 14))
re_pw = Entry(right_frame, font=('Times', 14))
reg_btn = Button(right_frame, width=15, text='Register', font=('Times', 14), command=None)
# widgets placement
log_em.grid(row=0, column=1, pady=10, padx=20)
log_pw.grid(row=1, column=1, pady=10, padx=20)
login_btn.grid(row=2, column=1, pady=10, padx=20)
left_frame.place(x=50, y=50)
reg_na.grid(row=0, column=1, pady=10, padx=20)
reg_em.grid(row=1, column=1, pady=10, padx=20)
reg_mo.grid(row=2, column=1, pady=10, padx=20)
reg_ag.grid(row=3, column=1, pady=10, padx=20)
reg_ge.grid(row=4, column=1, pady=10, padx=20)
reg_pw.grid(row=5, column=1, pady=10, padx=20)
re_pw.grid(row=6, column=1, pady=10, padx=20)
reg_btn.grid(row=7, column=1, pady=10, padx=20)
right_frame.place(x=500, y=50)
# infinite loop
ws.mainloop()You can see the output in the screenshot below.
Check out How to Read a Text File and Display the Contents in a Tkinter With Python?
Conclusion
In this tutorial, I have helped you learn how to create layouts with Python Tkinter Frame. I explained how to create layouts, organize widgets within a frame, position frames within a layout, and customize frame attributes. I also explained a Python Tkinter mini-project.
You may read:
- How to Upload a File in Python Tkinter?
- How to Navigate Between Pages in a Python Tkinter?
- How to Implement Drag and Drop Functionality in Python Tkinter?
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.
