« Tkinter tutorial
Tkinter frame to hold widgets and images with background colour border and managing layout
VIDEO
Managing widgets in a group and providing separators by using frame.( Think Frame as a container )
Size of the frame
We can specify width and height of the frame. If you are using pack layout then set the exapand=True
to cover all the available space.
frame_top=Frame(my_w,width=390, height=390)
frame_top.pack(expand=True)
Adding border to frame
We will use the options highlightbackground='red'
and highlightthicknes=5
to add red colour and thickness of 5 to the borders. For grid layout we can use rowconfigure , columnconfigure to manage full width
import tkinter as tk
from tkinter import *
my_w = tk.Tk()
my_w.geometry("400x200")
frame_top=Frame(my_w,width=380, height=180,
highlightbackground='red',highlightthicknes=5 )
frame_top.pack(expand=True)
my_w.mainloop()
Adding image to Frame
We will use Label to place the image. We can use Button also to place the image. Here to use jpg image we have to use PIL .
import tkinter as tk
from tkinter import *
my_w = tk.Tk()
my_w.geometry("400x400")
frame_top=Frame(my_w,width=390, height=390,
highlightbackground='red',highlightthicknes=3)
frame_top.grid(row=0,column=0,padx=5,pady=5,ipadx=5,ipady=5)
my_img = tk.PhotoImage(file = "D:\\top2.png")
l2 = tk.Label(frame_top, image=my_img )
l2.grid(row=0,column=0,padx=5,pady=5)
my_w.mainloop()
Background colour of Frame
Use the option background='yellow'
or use Hex code ( #FFFF00 ) to assign background colour to the frame.
If you are using pack layout then keep the option expand=True
to cover all available areas.
import tkinter as tk
from tkinter import *
my_w = tk.Tk()
my_w.geometry("400x400")
frame_top=Frame(my_w,width=390, height=390,background='yellow' ,
highlightbackground='red',highlightthicknes=3)
frame_top.grid(row=0,column=0,padx=5,pady=5,ipadx=5,ipady=5)
l2 = tk.Label(frame_top,text='yellow background with red border' )
l2.grid(row=0,column=0,padx=5,pady=5)
my_w.mainloop()
Understanding Multiple frame layout
To remove the butom frame ( frame_bottom ) the command option for button is used. command=lambda:frame_bottom.grid_forget()
, here in place of grid_forget() , pack_forget() is to be used for pack layout manager.
import tkinter as tk
from tkinter import *
my_w = tk.Tk()
my_w.geometry("400x350")
frame_top=Frame(my_w,width=390, height=150,
highlightbackground='red',highlightthicknes=3)
frame_top.grid(row=0,column=0,
padx=5,pady=5,ipadx=5,ipady=5,columnspan=2)
my_img = tk.PhotoImage(file = "D:\\top2.png")
l2 = tk.Label(frame_top, image=my_img )
l2.grid(row=0,column=0,padx=5,pady=5)
frame_body=Frame(my_w,width=380, height=150,background='lightblue',
highlightbackground='lightgreen',highlightthicknes=3)
frame_body.grid(row=1,column=0,
padx=20,pady=20,ipadx=5,ipady=5,columnspan=2)
l3=tk.Label(frame_body,text='Name',font=16)
l3.grid(row=0,column=0,padx=10,pady=10)
t1=tk.Entry(frame_body,width=20,font=16)
t1.grid(row=0,column=1)
b1=tk.Button(frame_body,text='Submit',font=20,fg='blue')
b1.grid(row=1,column=1,padx=20,pady=10)
b2=tk.Button(my_w,text='Delete',font=20,
fg='Red',command=lambda:frame_bottom.grid_forget() )
b2.grid(row=2,column=0,padx=10,pady=10)
b3=tk.Button(my_w,text='Restore',font=20,fg='Green',
command=lambda:frame_bottom.grid(row=3,column=0,columnspan=2) )
b3.grid(row=2,column=1,pady=10)
frame_bottom=Frame(my_w,width=380, height=150)
frame_bottom.grid(row=3,column=0,columnspan=2)
l4=tk.Label(frame_bottom,text='I am at bottom frame' ,
bg='lightblue',font=18)
l4.grid(row=0,column=0,pady=10,sticky='w')
my_w.mainloop()
Config options
background
Background colour to use, check the Output in above code for background
bg
Same as background
borderwidth
Width of the border of the Frame ( check examples)
bd
Same as borderwidth
class
Assign class , default is Frame
colormap
specify which color map to use
container
Default is 0
cursor
List of cursor shape is available here . The shape of mouse pointer to be displayed over the frame
height
Default is 0, part of size ( width , height)
highlightbackground
Default is system specific 9, border colour
highlightcolor
Default is system specific, border colour when in focus
highlightthicknes
Default is 0, border thickness when in focus
padx
Horizontal padding, Default is 0
pady
Vertical padding, Default is 0
relief
FLAT ( default ), SUNKEN, RAISED, GROOVE,RIDGE . The border decoration
takefocus
If true , tab can be used to move focus, Default is 0
visual
No Default
width
Default is 0, part of size ( width , height)
Example
import tkinter as tk
from tkinter import *
my_w=tk.Tk()
my_bottom=Frame(my_w,bg='green',cursor='boat',bd=20,relief=RAISED,
width=100,padx=10,pady=10,highlightcolor='yellow')
my_bottom.pack(side=BOTTOM)
b1=tk.Button(my_w,text='b1', width=30)
b1.pack(side=LEFT)
# Using Frame by_bottom
b2=tk.Button(my_bottom,text='b2')
b2.pack(side=LEFT)
b3=tk.Button(my_bottom,text='b3')
b3.pack(side=LEFT)
l4=tk.Label(my_bottom,text='l4 label')
l4.pack(side=LEFT)
my_w.mainloop()
We can update the above options by using config() . Here we are changing the background colour of the Frame on button click.
import tkinter as tk
my_w = tk.Tk()
my_w.geometry("600x400") # width x height of window
def my_open():
frame_top.config(bg='lightgreen')
frame_top=tk.Frame(my_w,width=390, height=150,bg='yellow',
highlightbackground='red',highlightthicknes=3)
frame_top.grid(row=0,column=0,padx=25,pady=25,columnspan=2)
my_button = tk.Button(my_w,text="plus2net", fg="blue",
cursor="hand2",font=18,command=my_open)
my_button.grid(row=1, column=0,padx=20, pady=20)
my_w.mainloop()
separator
import tkinter as tk
from tkinter import *
my_w=tk.Tk()
b1=tk.Button(my_w,text='b1', width=10)
b1.pack(side=TOP)
# Using Frame by_bottom
b2=tk.Button(my_w,text='b2')
b2.pack(side=TOP)
my_line=Frame(my_w,bg='green',bd=20,height=5,width=20,
relief=RAISED,highlightcolor='yellow')
my_line.pack(side=TOP,fill=X)
b3=tk.Button(my_w,text='b3')
b3.pack(side=BOTTOM)
l4=tk.Label(my_w,text='l4 label')
l4.pack(side=BOTTOM)
my_w.mainloop()
View and Download tkinter-frame ipynb file ( .html format )⇓
« Grid Layout
« Python Tkinter pack
« place layout
rowconfigure() & columnconfigure() »
LabelFrame »
← Subscribe to our YouTube Channel here