Python Tkinter Frame

In this tutorial, we will learn about python tkinter frame. We will also cover these topics.

• Python Tkinter Frame
• Python Tkinter Frame attributes
• Python Tkinter Frame grid
• Python Tkinter Frame class
• Python Tkinter Frame color
• Python Tkinter Frame size
• Python Tkinter Frame border
• Python Tkinter Frame within the Frame
• Python Tkinter Frame vs LabelFrame
• Python Tkinter Frame Mini-Project

Are you know to GUI programming? Check out Python GUI Programming (Python Tkinter).

Python Tkinter Frame

• Tkinter frame is a top-level widget. It is placed on the parent window and is used to group other widgets.
• It improves the UI/UX of the application. Python Frames are also called panels.

Python Tkinter Frame attributes

• Attribute refers to the features.
• Most of the features are common in every widget. But there are few features that work only on the specific widget. Common features are like, bg, width, height, fg, etc.
• Attributes are valid resources. To see these valid resources type help(widget_name)

Code:

Here is the code to see all the attributes of widget frame in Python.

from tkinter import *

ws = Tk()
ws.geometry('300x200')
ws.title('PythonGuides')

help(Frame)

ws.mainloop()

Output:

The output displays all the information related to widget frame. Attribute section is highlighted.

Now, let’s study about each widget with practical.

You may also like Crosstab in Python Pandas and Python Tkinter to Display Data in Textboxes.

background, bg	background or bg fills color in the background of the frame. there is more than one method to do so. 1) frame = Frame(ws, bg=’red’) frame.pack() 2) frame = Frame(ws, background=’red’) frame.pack() 3) frame = Frame(ws) frame.config(bg=’red’) frame.pack() 4) frame = Frame(ws) frame.config(background=’red’) frame.pack() 5) frame = Frame(ws) frame[‘bg’]=’red’ frame.pack() 6) frame = Frame(ws) frame[‘background’] = ‘red’ frame.pack()
borderwidth, bd	bd or borderwidth provides width to the border of the frame. Similar to bg it can also be implemented in multiple ways: 1) frame = Frame(ws, bd=10) frame.pack() 2) frame = Frame(ws, borderwidth=10) frame.pack() 3) frame = Frame(ws) frame.config(bd=10′) frame.pack() 4) frame = Frame(ws) frame.config(borderwidth=10) frame.pack() 5) frame = Frame(ws) frame[‘bd’]=10 frame.pack() 6) frame = Frame(ws) frame[‘borderwidth’] = 10 frame.pack()
class	default class name is Frame. Frame(parent, **options)
colormap	Few old screens support 256 or fewer colors. So the developer has to set limitations for colors. In that case, supported colors are mapped so that only those colors can be implemented in the entire application. Yes, different windows can inherit this color or can create a new one. frame = Frame(bg=”blue”, colormap=”new”, borderwidth=10) frame.pack()
container	containers are the layout managers. widgets are of 2 types: container & child. Containers organize child widgets. pack, grid, place are the container widgets.
cursor	the cursor is an icon on the screen that tells about the mouse position. Here is the list of cursors that can be used: “arrow”,”circle”,”clock”,”cross”,”dotbox”,”exchange”,”fleur”,”heart”,”heart”,”man”, “mouse”,”pirate”,”plus”,”shuttle”,”sizing”,”spider”,”spraycan”,”star”,”target”,”cross”, “trek”,”watch”. Example: frame = Frame(ws, cursor=’clock’) frame.pack()
height, Width	Height refers to horizontal space and width refers to vertical space. Example: frame = Frame(ws, height=20, width=50) frame.pack()
highlightbackground	Color of the focus highlight when the frame does not have focus.
highlightcolor	Color shown in the focus highlight when the frame has the focus.
hightlightthickness	Thickness of the focus highlight.
relief	It adds style to frame by adding 3D affect to the frame. there are 5 options for relief. 1) Flat 2) sunken 3) Raised 4) Groove 5) Ridge here is the code snippet to implement: frame = Frame(ws, relief=FLAT, bd=10) frame.pack()
takefocus	the default value of takefocus is 0. It determines the shift of focus when the tab is pressed.
visual	Specifies visual information for the new window in any of the forms.

Python Tkinter Frame grid

• Grid is used to position the frame widget in a row and column format.
• row & column are the necessary arguments.

Code:

In this code, we have used 2 frames. One for label & other for entry boxes. frames are positioned using grid manager.

from tkinter import *

ws = Tk()
ws.title('Python Guides')
ws.geometry('250x200')

frame1 = Frame(ws, padx=5, pady=5)
frame1.grid(row=0, column=1)

Label(frame1, text='Name', padx=5, pady=5).pack()
Label(frame1, text='Email', padx=5, pady=5).pack()
Label(frame1, text='Password', padx=5, pady=5).pack()
 

frame2 = Frame(ws, padx=5, pady=5)
frame2.grid(row=0, column=2)

Entry(frame2).pack(padx=5, pady=5)
Entry(frame2).pack(padx=5, pady=5)
Entry(frame2).pack(padx=5, pady=5)


Button(ws, text='Submit', padx=10).grid(row=1, columnspan=5, pady=5)


ws.mainloop()

Output:

In this output, though the frame is not visible it is there. Labels on the left are organized in frame1 and entry boxes on the right are organized in frame2. frames are placed using the grid geometry manager.

You may like, How to Set Background to be an Image in Python Tkinter?

Python Tkinter Frame class

• Class helps in avoiding repetition of part of code.
• We use class most of the time.
• At times we use predefined classes or we create new one .
• Here is the implementation of frame using class.

Code:

from tkinter import *

class Frame1(Frame):
    def __init__(self, ws):
        Frame.__init__(self, ws, bg="#006699")
        self.ws = ws
        self.widgets()

    def widgets(self):
        self.text = Label(self, text="This label is on the frame ")
        self.text.grid(row=0, column=0, padx=20, pady=20) # margins


class Win(Tk):

    def __init__(self, ws):
        Tk.__init__(self, ws)
        self.ws = ws
        self.title('PythonGuides')
        self.geometry('300x200')
        self.main()

    def main(self):
        self.w = Frame1(self)
        self.w.pack()

if __name__=="__main__":
    app = Win(None)
    app.mainloop()

Output:

Read: Python Tkinter Colors

Python Tkinter Frame color

• Color is used to provide a great look to the application
• The selection of the right color makes the application look professional.
• In the frame, we can change the background color of the window.
• bg or background keyword is used to fill color in the frame.

Code:

from tkinter import *

ws = Tk()
ws.title('PythonGuides')
ws.geometry('300x200')

frame = Frame(ws, bd=10, bg='red')
frame.pack(pady=50)

Label(frame, text='Color-Demo').pack()

ws.mainloop()

Output:

In this output, red coloured frame with 10 border-width is displayed.

Read Python Tkinter Filter Function()

Python Tkinter Frame size

• The size of the window can be controlled using the keyword Height and Width
• Any integer value provided as height or width will modify the window screen.

Python Tkinter Frame border

• To provide border we can either use bd or borderwidth keyword.
• any integer value can be passed to set the border

code:

In this code, we have created border with width of 20.

from tkinter import *

ws = Tk()
ws.title('PythonGuides')
ws.geometry('300x200')

frame = Frame(ws, bd=10, bg='red')
frame.pack(pady=50)

Label(frame, text='Border-Demo').pack()

ws.mainloop()

Output:

In this output, border with width 20 is created. Since frame has default colour as master window have. So we have provided red colour to the border.

Python Tkinter Frame within the Frame

• The frame creates a window on the parent window.
• other frames are placed on the first frame to organize widgets.

Code:

In this code, 3 frames are created. Out of these 2 frames are placed within the other frame.

from tkinter import *

ws = Tk()
ws.title('PythonGuides')
ws.geometry('300x200')

frame = Frame(ws, height=300, width=300, bg='#ccffcc')
frame.pack()

food = LabelFrame(frame, text='Food', bd=5, relief=RIDGE)
food.grid(row=0, column=0, sticky=W, padx=20, pady=20)

Checkbutton(food, text='Pizza').pack(anchor=W)
Checkbutton(food, text='Noodles').pack(anchor=W)
Checkbutton(food, text='Sandwich').pack(anchor=W)
Checkbutton(food, text='eggs').pack(anchor=W)

drinks = LabelFrame(frame, text='Drinks', bd=5, relief=RIDGE)
drinks.grid(row=0, column=1, sticky=E, padx=20, pady=20)

Checkbutton(drinks, text='Water').pack(anchor=W)
Checkbutton(drinks, text='Coffee').pack(anchor=W)
Checkbutton(drinks, text='Fanta').pack(anchor=W)
Checkbutton(drinks, text='Bear').pack(anchor=W)

ws.mainloop()

Output:

In this output, there are 3 frames, food & drinks are labelframe placed within a green coloured frame

Read: Python Tkinter Mainloop

Python Tkinter Frame vs LabelFrame

LabelFrame is another variant of Frame. There is only 2 possible differences:

Frame	LabelFrame
By default have no borders	By default have dotted borders
Not possible to provide header description	The header can be provided using keyword text
Syntax: Frame(master)	Synatx: LabelFrame(master, text=”text”)
Example: frame = Frame(ws) frame.pack()	Example: frame = LabelFrame(ws, text=” text to display”) frame.pack()

So here you can observe the difference between Label & LabelFrame. LabelFrame has the same color as the background that is why have changed color to blue. All the blue portion is Fame with Label on it. Whereas LabelFrame has text written on the top and dotted boundary.

Read Python Tkinter add function with examples

Python Tkinter Frame Mini-Project

• In this project, we have created beautiful Login & Registration page in Python TKinter.
• Both login & Registration sections are created using 2 different frames with the name left_frame & right_frame

Code:

left_frame is for login section whereas right_frame is for registration section

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()

Output:

This is the output of the code, We choose yellow & grey because these colours are nominated as ‘Colours of the year’. Feel free to use the code for your projects.

You may like the following Python tutorials:

• How to display calendar in Python
• How to make a calculator in Python
• Regular Expressions in Python
• Python Booleans
• Python generators
• Python Tkinter Menu bar – How to Use
• Python Tkinter Checkbutton – How to use
• Python Tkinter radiobutton – How to use
• Python Tkinter Button – How to use
• Python Tkinter Entry – How to use
• How to Take User Input and Store in Variable using Python Tkinter

So this this tutorial we have learned about python tkinter frame also we have covered these topics.

• Python Tkinter Frame
• Python Tkinter Frame attributes
• Python Tkinter Frame grid
• Python Tkinter Frame class
• Python Tkinter Frame color
• Python Tkinter Frame size
• Python Tkinter Frame border
• Python Tkinter Frame within the Frame
• Python Tkinter Frame vs LabelFrame
• Python Tkinter Frame Mini-Project