Python tkinter frame

Tkinter tutorial

Tkinter frame to hold widgets and images with background colour border and managing layout


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

Frame Border 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

Image in 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

Background Colour in 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

Tkinter 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

backgroundBackground colour to use, check the Output in above code for background
bgSame as background
borderwidthWidth of the border of the Frame ( check examples)
bdSame as borderwidth
classAssign class , default is Frame
colormapspecify which color map to use
containerDefault is 0
cursorList of cursor shape is available here . The shape of mouse pointer to be displayed over the frame
heightDefault is 0, part of size ( width , height)
highlightbackgroundDefault is system specific 9, border colour
highlightcolorDefault is system specific, border colour when in focus
highlightthicknesDefault is 0, border thickness when in focus
padxHorizontal padding, Default is 0
padyVertical padding, Default is 0
reliefFLAT ( default ), SUNKEN, RAISED, GROOVE,RIDGE . The border decoration
takefocusIf true , tab can be used to move focus, Default is 0
visualNo Default
widthDefault is 0, part of size ( width , height)

Example

Tkinter frame config
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()

separator

Tkinter frame 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

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Post your comments , suggestion , error , requirements etc here





    Python Video Tutorials
    Python SQLite Video Tutorials
    Python MySQL Video Tutorials
    Python Tkinter Video Tutorials
    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2022 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer