Adding a Widget

Now that you have a window, you can add a widget. Use thetk.Label class to add some text to a window. Create aLabel widget with the text"Hello, Tkinter" and assign it to a variable calledgreeting:

>>>greeting=tk.Label(text="Hello, Tkinter")

The window you created earlier doesn’t change. You just created aLabel widget, but you haven’t added it to the window yet. There are several ways to add widgets to a window. Right now, you can use theLabel widget’s.pack() method:

>>>greeting.pack()

The window now looks like this:

When you pack a widget into a window, Tkinter sizes the window as small as it can be while still fully encompassing the widget. Now execute the following:

>>>window.mainloop()

Nothing seems to happen, but notice that no new prompt appears in the shell.

window.mainloop() tells Python to run the Tkinterevent loop. This method listens for events, such as button clicks or keypresses, andblocks any code that comes after it from running until you close the window where you called the method. Go ahead and close the window you’ve created, and you’ll see a new prompt displayed in the shell.

Creating a window with Tkinter only takes a couple of lines of code. But blank windows aren’t very useful! In the next section, you’ll learn about some of the widgets available in Tkinter, and how you can customize them to meet your application’s needs.

Check Your Understanding

Expand the code blocks below to check your understanding:

Exercise: Create a Tkinter windowShow/Hide

Write a full Python script that creates a Tkinter window with the text"Python rocks!".

The window should look like this:

Try this exercise now.

You can expand the code block below to see a solution:

importtkinterastkwindow=tk.Tk()label=tk.Label(text="Python rocks!")label.pack()window.mainloop()

When you’re ready, you can move on to the next section.

Displaying Text and Images WithLabel Widgets

Label widgets are used to displaytext orimages. The text displayed by aLabel widget can’t be edited by the user. It’s for display purposes only. As you saw in the example at the beginning of this tutorial, you can create aLabel widget by instantiating theLabel class and passing astring to thetext parameter:

label=tk.Label(text="Hello, Tkinter")

Label widgets display text with the default system text color and the default system text background color. These are typically black and white, respectively, but you may see different colors if you’ve changed these settings in your operating system.

You can controlLabel text and background colors using theforeground andbackground parameters:

label=tk.Label(text="Hello, Tkinter",foreground="white",# Set the text color to whitebackground="black"# Set the background color to black)

There are numerous valid color names, including:

• "red"
• "orange"
• "yellow"
• "green"
• "blue"
• "purple"

Many of theHTML color names work with Tkinter. For a full reference, including macOS- and Windows-specific system colors that the current system theme controls, check out thecolors manual page.

You can also specify a color usinghexadecimal RGB values:

label=tk.Label(text="Hello, Tkinter",background="#34A2FE")

This sets the label background to a nice, light blue color. Hexadecimal RGB values are more cryptic than named colors, but they’re also more flexible. Fortunately, there aretools available that make getting hexadecimal color codes relatively painless.

If you don’t feel like typing outforeground andbackground all the time, then you can use the shorthandfg andbg parameters to set the foreground and background colors:

label=tk.Label(text="Hello, Tkinter",fg="white",bg="black")

You can also control the width and height of a label with thewidth andheight parameters:

label=tk.Label(text="Hello, Tkinter",fg="white",bg="black",width=10,height=10)

Here’s what this label looks like in a window:

It may seem strange that the label in the window isn’t square even though the width and height are both set to10. This is because the width and height are measured intext units. One horizontal text unit is determined by the width of the character0, or the number zero, in the default system font. Similarly, one vertical text unit is determined by the height of the character0.

Labels are great for displaying some text, but they don’t help you get input from a user. The next three widgets that you’ll learn about are all used to get user input.

Displaying Clickable Buttons WithButton Widgets

Button widgets are used to displayclickable buttons. You can configure them to call a function whenever they’re clicked. You’ll cover how to call functions from button clicks in the next section. For now, take a look at how to create and style a button.

There are many similarities betweenButton andLabel widgets. In many ways, a button is just a label that you can click! The same keyword arguments that you use to create and style aLabel will work withButton widgets. For example, the following code creates a button with a blue background and yellow text. It also sets the width and height to25 and5 text units, respectively:

button=tk.Button(text="Click me!",width=25,height=5,bg="blue",fg="yellow",)

Here’s what the button looks like in a window:

Pretty nifty! You can use the next two widgets to collect text input from a user.

Getting User Input WithEntry Widgets

When you need to get a little bit of text from a user, like a name or an email address, use anEntry widget. It’ll display asmall text box that the user can type some text into. Creating and styling anEntry widget works pretty much exactly like withLabel andButton widgets. For example, the following code creates a widget with a blue background, some yellow text, and a width of50 text units:

entry=tk.Entry(fg="yellow",bg="blue",width=50)

The interesting bit aboutEntry widgets isn’t how to style them, though. It’s how to use them to getinput from a user. There are three main operations that you can perform withEntry widgets:

1. Retrieving text with.get()
2. Deleting text with.delete()
3. Inserting text with.insert()

The best way to get an understanding ofEntry widgets is to create one and interact with it. Open up a Python shell and follow along with the examples in this section. First, importtkinter and create a new window:

>>>importtkinterastk>>>window=tk.Tk()

Now create aLabel and anEntry widget:

>>>label=tk.Label(text="Name")>>>entry=tk.Entry()

TheLabel describes what sort of text should go in theEntry widget. It doesn’t enforce any sort of requirements on theEntry, but it tells the user what your program expects them to put there. You need to.pack() the widgets into the window so that they’re visible:

>>>label.pack()>>>entry.pack()

Here’s what that looks like:

Notice that Tkinter automatically centers the label above theEntry widget in the window. This is a feature of.pack(), which you’ll learn more about in later sections.

Click inside theEntry widget with your mouse and typeReal Python:

Now you’ve got some text entered into theEntry widget, but that text hasn’t been sent to your program yet. You can use.get() to retrieve the text and assign it to a variable calledname:

>>>name=entry.get()>>>name'Real Python'

You can delete text as well. This.delete() method takes an integer argument that tells Python which character to remove. For example, the code block below shows how.delete(0) deletes the first character fromEntry:

>>>entry.delete(0)

The text remaining in the widget is noweal Python:

Note that, just like Pythonstring objects, text in anEntry widget is indexed starting with0.

If you need to remove several characters from anEntry, then pass a second integer argument to.delete() indicating the index of the character where deletion should stop. For example, the following code deletes the first four letters inEntry:

>>>entry.delete(0,4)

The remaining text now readsPython:

Entry.delete() works just likestring slicing. The first argument determines the starting index, and the deletion continues up to butnot including the index passed as the second argument. Use the special constanttk.END for the second argument of.delete() to remove all text inEntry:

>>>entry.delete(0,tk.END)

You’ll now see a blank text box:

On the opposite end of the spectrum, you can also insert text into anEntry widget:

>>>entry.insert(0,"Python")

The window now looks like this:

The first argument tells.insert() where to insert the text. If there’s no text inEntry, then the new text will always be inserted at the beginning of the widget, no matter what value you pass as the first argument. For example, calling.insert() with100 as the first argument instead of0, as you did above, would’ve generated the same output.

IfEntry already contains some text, then.insert() will insert the new text at the specified position and shift all existing text to the right:

>>>entry.insert(0,"Real ")

The widget text now readsReal Python:

Entry widgets are great for capturing small amounts of text from a user, but because they’re only displayed on a single line, they’re not ideal for gathering large amounts of text. That’s whereText widgets come in!

Getting Multiline User Input WithText Widgets

Text widgets are used for entering text, just likeEntry widgets. The difference is thatText widgets may containmultiple lines of text. With aText widget, a user can input a whole paragraph or even several pages of text! Just like withEntry widgets, you can perform three main operations withText widgets:

1. Retrieve text with.get()
2. Delete text with.delete()
3. Insert text with.insert()

Although the method names are the same as theEntry methods, they work a bit differently. It’s time to get your hands dirty by creating aText widget and seeing what it can do.

>>>window.destroy()

In your Python shell, create a new blank window and pack aText() widget into it:

>>>window=tk.Tk()>>>text_box=tk.Text()>>>text_box.pack()

Text boxes are much larger thanEntry widgets by default. Here’s what the window created above looks like:

Click anywhere inside the window to activate the text box. Type in the wordHello. Then pressEnter and typeWorld on the second line. The window should now look like this:

Just like withEntry widgets, you can retrieve the text from aText widget using.get(). However, calling.get() with no arguments doesn’t return the full text in the text box like it does forEntry widgets. It raises anexception:

>>>text_box.get()Traceback (most recent call last):...TypeError:get() missing 1 required positional argument: 'index1'

Text.get() requires at least one argument. Calling.get() with a single index returns a single character. To retrieve several characters, you need to pass astart index and anend index. Indices inText widgets work differently than inEntry widgets. SinceText widgets can have several lines of text, an index must contain two pieces of information:

1. The line number of a character
2. The position of a character on that line

Line numbers start with1, and character positions start with0. To make an index, you create a string of the form"<line>.<char>", replacing<line> with the line number and<char> with the character number. For example,"1.0" represents the first character on the first line, and"2.3" represents the fourth character on the second line.

Use the index"1.0" to get the first letter from the text box that you created earlier:

>>>text_box.get("1.0")'H'

There are five letters in the wordHello, and the character number ofo is4, since character numbers start from0, and the wordHello starts at the first position in the text box. Just like with Python string slices, in order to get the entire wordHello from the text box, the end index must be one more than the index of the last character to be read.

So, to get the wordHello from the text box, use"1.0" for the first index and"1.5" for the second index:

>>>text_box.get("1.0","1.5")'Hello'

To get the wordWorld on the second line of the text box, change the line numbers in each index to2:

>>>text_box.get("2.0","2.5")'World'

To get all of the text in a text box, set the starting index in"1.0" and use the specialtk.END constant for the second index:

>>>text_box.get("1.0",tk.END)'Hello\nWorld\n'

Notice that text returned by.get() includes any newline characters. You can also see from this example that every line in aText widget has a newline character at the end, including the last line of text in the text box.

.delete() is used to delete characters from a text box. It works just like.delete() forEntry widgets. There are two ways to use.delete():

1. With asingle argument
2. Withtwo arguments

Using the single-argument version, you pass to.delete() the index of a single character to be deleted. For example, the following deletes the first character,H, from the text box:

>>>text_box.delete("1.0")

The first line of text in the window now readsello:

With the two-argument version, you pass two indices to delete a range of characters starting at the first index and up to, but not including, the second index.

For example, to delete the remainingello on the first line of the text box, use the indices"1.0" and"1.4":

>>>text_box.delete("1.0","1.4")

Notice that the text is gone from the first line. This leaves a blank line followed the wordWorld on the second line:

Even though you can’t see it, there’s still a character on the first line. It’s a newline character! You can verify this using.get():

>>>text_box.get("1.0")'\n'

If you delete that character, then the rest of the contents of the text box will shift up a line:

>>>text_box.delete("1.0")

Now,World is on the first line of the text box:

Try to clear out the rest of the text in the text box. Set"1.0" as the start index and usetk.END for the second index:

>>>text_box.delete("1.0",tk.END)

The text box is now empty:

You can insert text into a text box using.insert():

>>>text_box.insert("1.0","Hello")

This inserts the wordHello at the beginning of the text box, using the same"<line>.<column>" format used by.get() to specify the insertion position:

Check out what happens if you try to insert the wordWorld on the second line:

>>>text_box.insert("2.0","World")

Instead of inserting the text on the second line, the text is inserted at the end of the first line:

If you want to insert text onto a new line, then you need to insert a newline character manually into the string being inserted:

>>>text_box.insert("2.0","\nWorld")

NowWorld is on the second line of the text box:

.insert() will do one of two things:

1. Insert text at the specified position if there’s already text at or after that position.
2. Append text to the specified line if the character number is greater than the index of the last character in the text box.

It’s usually impractical to try and keep track of what the index of the last character is. The best way to insert text at the end of aText widget is to passtk.END to the first parameter of.insert():

>>>text_box.insert(tk.END,"Put me at the end!")

Don’t forget to include the newline character (\n) at the beginning of the text if you want to put it on a new line:

>>>text_box.insert(tk.END,"\nPut me on a new line!")

Label,Button,Entry, andText widgets are just a few of the widgets available in Tkinter. There are several others, including widgets for checkboxes, radio buttons, scroll bars, and progress bars. For more information on all of the available widgets, see the Additional Widgets list in theAdditional Resources section.

Assigning Widgets to Frames WithFrame Widgets

In this tutorial, you’re going to work with only five widgets:

1. Label
2. Button
3. Entry
4. Text
5. Frame

These are the four you’ve seen so far plus theFrame widget.Frame widgets are important for organizing thelayout of your widgets in an application.

Before you get into the details about laying out the visual presentation of your widgets, take a closer look at howFrame widgets work, and how you can assign other widgets to them. The following script creates a blankFrame widget and assigns it to the main application window:

importtkinterastkwindow=tk.Tk()frame=tk.Frame()frame.pack()window.mainloop()

frame.pack() packs the frame into the window so that the window sizes itself as small as possible to encompass the frame. When you run the above script, you get some seriously uninteresting output:

An emptyFrame widget is practically invisible. Frames are best thought of ascontainers for other widgets. You can assign a widget to a frame by setting the widget’smaster attribute:

frame=tk.Frame()label=tk.Label(master=frame)

To get a feel for how this works, write a script that creates twoFrame widgets calledframe_a andframe_b. In this script,frame_a contains a label with the text"I'm in Frame A", andframe_b contains the label"I'm in Frame B". Here’s one way to do this:

importtkinterastkwindow=tk.Tk()frame_a=tk.Frame()frame_b=tk.Frame()label_a=tk.Label(master=frame_a,text="I'm in Frame A")label_a.pack()label_b=tk.Label(master=frame_b,text="I'm in Frame B")label_b.pack()frame_a.pack()frame_b.pack()window.mainloop()

Note thatframe_a is packed into the window beforeframe_b. The window that opens shows the label inframe_a above the label inframe_b:

Now see what happens when you swap the order offrame_a.pack() andframe_b.pack():

importtkinterastkwindow=tk.Tk()frame_a=tk.Frame()label_a=tk.Label(master=frame_a,text="I'm in Frame A")label_a.pack()frame_b=tk.Frame()label_b=tk.Label(master=frame_b,text="I'm in Frame B")label_b.pack()# Swap the order of `frame_a` and `frame_b`frame_b.pack()frame_a.pack()window.mainloop()

The output looks like this:

Nowlabel_b is on top. Sincelabel_b is assigned toframe_b, it moves to whereverframe_b is positioned.

All four of the widget types that you’ve learned about—Label,Button,Entry, andText—have amaster attribute that’s set when you instantiate them. That way, you can control whichFrame a widget is assigned to.Frame widgets are great for organizing other widgets in a logical manner. Related widgets can be assigned to the same frame so that, if the frame is ever moved in the window, then the related widgets stay together.

In addition to grouping your widgets logically,Frame widgets can add a little flare to thevisual presentation of your application. Read on to see how to create various borders forFrame widgets.

Adjusting Frame Appearance With Reliefs

Frame widgets can be configured with arelief attribute that creates a border around the frame. You can setrelief to be any of the following values:

• tk.FLAT: Has no border effect (the default value)
• tk.SUNKEN: Creates a sunken effect
• tk.RAISED: Creates a raised effect
• tk.GROOVE: Creates a grooved border effect
• tk.RIDGE: Creates a ridged effect

To apply the border effect, you must set theborderwidth attribute to a value greater than1. This attribute adjusts the width of the border in pixels. The best way to get a feel for what each effect looks like is to see them for yourself. Here’s a script that packs fiveFrame widgets into a window, each with a different value for therelief argument:

 1importtkinterastk 2 3border_effects={ 4"flat":tk.FLAT, 5"sunken":tk.SUNKEN, 6"raised":tk.RAISED, 7"groove":tk.GROOVE, 8"ridge":tk.RIDGE, 9}1011window=tk.Tk()1213forrelief_name,reliefinborder_effects.items():14frame=tk.Frame(master=window,relief=relief,borderwidth=5)15frame.pack(side=tk.LEFT)16label=tk.Label(master=frame,text=relief_name)17label.pack()1819window.mainloop()

Here’s a breakdown of this script:

• Lines 3 to 9 create adictionary whose keys are the names of the different relief effects available in Tkinter. The values are the corresponding Tkinter objects. This dictionary is assigned to theborder_effects variable.

• Line 13 starts afor loop to loop over each item in theborder_effects dictionary.

• Line 14 creates a newFrame widget and assigns it to thewindow object. Therelief attribute is set to the corresponding relief in theborder_effects dictionary, and theborder attribute is set to5 so that the effect is visible.

• Line 15 packs theFrame into the window using.pack(). Theside keyword argument tells Tkinter in which direction to pack theframe objects. You’ll see more about how this works in the next section.

• Lines 16 and 17 create aLabel widget to display the name of the relief and pack it into theframe object you just created.

The window produced by the above script looks like this:

In this image, you can see the following effects:

• tk.FLAT creates a frame that appears to be flat.
• tk.SUNKEN adds a border that gives the frame the appearance of being sunken into the window.
• tk.RAISED gives the frame a border that makes it appear to stick out from the screen.
• tk.GROOVE adds a border that appears as a sunken groove around an otherwise flat frame.
• tk.RIDGE gives the appearance of a raised lip around the edge of the frame.

These effects give your Python GUI Tkinter application a bit of visual appeal.

Understanding Widget Naming Conventions

When you create a widget, you can give it any name you like, as long as it’s avalid Python identifier. It’s usually a good idea to include the name of the widget class in the variable name that you assign to the widget instance. For example, if aLabel widget is used to display a user’s name, then you might name the widgetlabel_user_name. AnEntry widget used to collect a user’s age might be calledentry_age.

>>>tk.Label(text="Hello, Tkinter").pack()

When you include the widget class name in the variable name, you help yourself and anyone else who needs to read your code to understand what type of widget the variable name refers to. However, using the full name of the widget class can lead to long variable names, so you may want to adopt a shorthand for referring to each widget type. For the rest of this tutorial, you’ll use the following shorthand prefixes to name widgets:

In this section, you learned how to create a window, use widgets, and work with frames. At this point, you can make some plain windows that display messages, but you’ve yet to create a full-blown application. In the next section, you’ll learn how to control the layout of your applications using Tkinter’s powerful geometry managers.

Check Your Understanding

Expand the code block below for an exercise to check your understanding:

Exercise: Create an Entry widget and insert some textShow/Hide

Write a complete script that displays anEntry widget that’s 40 text units wide and has a white background and black text. Use.insert() to display text in the widget that readsWhat is your name?.

The output window should look like this:

Try this exercise now.

You can expand the code block below to see a solution:

importtkinterastkwindow=tk.Tk()entry=tk.Entry(width=40,bg="white",fg="black")entry.pack()entry.insert(0,"What is your name?")window.mainloop()

importtkinterastkwindow=tk.Tk()entry=tk.Entry(width=40)entry.pack()entry.insert(0,"What is your name?")window.mainloop()

When you’re ready, you can move on to the next section.

The.pack() Geometry Manager

The.pack() geometry manager uses apacking algorithm to place widgets in aFrame or window in a specified order. For a given widget, the packing algorithm has two primary steps:

1. Compute a rectangular area called aparcel that’s just tall (or wide) enough to hold the widget and fills the remaining width (or height) in the window with blank space.
2. Center the widget in the parcel unless a different location is specified.

.pack() is powerful, but it can be difficult to visualize. The best way to get a feel for.pack() is to look at some examples. See what happens when you.pack() threeLabel widgets into aFrame:

importtkinterastkwindow=tk.Tk()frame1=tk.Frame(master=window,width=100,height=100,bg="red")frame1.pack()frame2=tk.Frame(master=window,width=50,height=50,bg="yellow")frame2.pack()frame3=tk.Frame(master=window,width=25,height=25,bg="blue")frame3.pack()window.mainloop()

.pack() places eachFrame below the previous one by default, in the order that they’re assigned to the window:

EachFrame is placed at the topmost available position. Therefore, the redFrame is placed at the top of the window. Then the yellowFrame is placed just below the red one and the blueFrame just below the yellow one.

There are three invisible parcels, each containing one of the threeFrame widgets. Each parcel is as wide as the window and as tall as theFrame that it contains. Because noanchor point was specified when.pack() was called for eachFrame, they’re all centered inside of their parcels. That’s why eachFrame is centered in the window.

.pack() accepts some keyword arguments for more precisely configuring widget placement. For example, you can set thefill keyword argument to specify in whichdirection the frames should fill. The options aretk.X to fill in the horizontal direction,tk.Y to fill vertically, andtk.BOTH to fill in both directions. Here’s how you would stack the three frames so that each one fills the whole window horizontally:

importtkinterastkwindow=tk.Tk()frame1=tk.Frame(master=window,height=100,bg="red")frame1.pack(fill=tk.X)frame2=tk.Frame(master=window,height=50,bg="yellow")frame2.pack(fill=tk.X)frame3=tk.Frame(master=window,height=25,bg="blue")frame3.pack(fill=tk.X)window.mainloop()

Notice that thewidth is not set on any of theFrame widgets.width is no longer necessary because each frame sets.pack() to fill horizontally, overriding any width you may set.

The window produced by this script looks like this:

One of the nice things about filling the window with.pack() is that the fill isresponsive to window resizing. Try widening the window generated by the previous script to see how this works. As you widen the window, the width of the threeFrame widgets grow to fill the window:

Notice, though, that theFrame widgets don’t expand in the vertical direction.

Theside keyword argument of.pack() specifies on which side of the window the widget should be placed. These are the available options:

• tk.TOP
• tk.BOTTOM
• tk.LEFT
• tk.RIGHT

If you don’t setside, then.pack() will automatically usetk.TOP and place new widgets at the top of the window, or at the topmost portion of the window that isn’t already occupied by a widget. For example, the following script places three frames side by side from left to right and expands each frame to fill the window vertically:

importtkinterastkwindow=tk.Tk()frame1=tk.Frame(master=window,width=200,height=100,bg="red")frame1.pack(fill=tk.Y,side=tk.LEFT)frame2=tk.Frame(master=window,width=100,bg="yellow")frame2.pack(fill=tk.Y,side=tk.LEFT)frame3=tk.Frame(master=window,width=50,bg="blue")frame3.pack(fill=tk.Y,side=tk.LEFT)window.mainloop()

This time, you have to specify theheight keyword argument on at least one of the frames to force the window to have some height.

The resulting window looks like this:

Just like when you setfill=tk.X to make the frames responsive when you resized the window horizontally, you can setfill=tk.Y to make the frames responsive when you resize the window vertically:

To make the layout truly responsive, you can set an initial size for your frames using thewidth andheight attributes. Then, set thefill keyword argument of.pack() totk.BOTH and set theexpand keyword argument toTrue:

importtkinterastkwindow=tk.Tk()frame1=tk.Frame(master=window,width=200,height=100,bg="red")frame1.pack(fill=tk.BOTH,side=tk.LEFT,expand=True)frame2=tk.Frame(master=window,width=100,bg="yellow")frame2.pack(fill=tk.BOTH,side=tk.LEFT,expand=True)frame3=tk.Frame(master=window,width=50,bg="blue")frame3.pack(fill=tk.BOTH,side=tk.LEFT,expand=True)window.mainloop()

When you run the above script, you’ll see a window that initially looks the same as the one you generated in the previous example. The difference is that now you can resize the window however you want, and the frames will expand and fill the window responsively:

Pretty cool!

The.place() Geometry Manager

You can use.place() to control theprecise location that a widget should occupy in a window orFrame. You must provide two keyword arguments,x andy, which specify the x- and y-coordinates for the top-left corner of the widget. Bothx andy are measured in pixels, not text units.

Keep in mind that theorigin, wherex andy are both0, is the top-left corner of theFrame or window. So, you can think of they argument of.place() as the number of pixels from the top of the window, and thex argument as the number of pixels from the left edge of the window.

Here’s an example of how the.place() geometry manager works:

 1importtkinterastk 2 3window=tk.Tk() 4 5frame=tk.Frame(master=window,width=150,height=150) 6frame.pack() 7 8label1=tk.Label(master=frame,text="I'm at (0, 0)",bg="red") 9label1.place(x=0,y=0)1011label2=tk.Label(master=frame,text="I'm at (75, 75)",bg="yellow")12label2.place(x=75,y=75)1314window.mainloop()

Here’s how this code works:

• Lines 5 and 6 create a newFrame widget calledframe, measuring150 pixels wide and150 pixels tall, and pack it into the window with.pack().
• Lines 8 and 9 create a newLabel calledlabel1 with a red background and place it inframe1 at position (0, 0).
• Lines 11 and 12 create a secondLabel calledlabel2 with a yellow background and place it inframe1 at position (75, 75).

Here’s the window that the code produces:

Note that if you run this code on a different operating system that uses different font sizes and styles, then the second label might become partially obscured by the window’s edge. That’s why.place() isn’t used often. In addition to this, it has two main drawbacks:

1. Layout can be difficult to manage with.place(). This is especially true if your application has lots of widgets.
2. Layouts created with.place() aren’t responsive. They don’t change as the window is resized.

One of the main challenges of cross-platform GUI development is making layouts that look good no matter which platform they’re viewed on, and.place() is a poor choice for making responsive and cross-platform layouts.

That’s not to say you should never use.place()! In some cases, it might be just what you need. For example, if you’re creating a GUI interface for a map, then.place() might be the perfect choice to ensure widgets are placed at the correct distance from each other on the map.

.pack() is usually a better choice than.place(), but even.pack() has some downsides. The placement of widgets depends on the order in which.pack() is called, so it can be difficult to modify existing applications without fully understanding the code controlling the layout. The.grid() geometry manager solves a lot of these issues, as you’ll see in the next section.

The.grid() Geometry Manager

The geometry manager you’ll likely use most often is.grid(), which provides all the power of.pack() in a format that’s easier to understand and maintain.

.grid() works by splitting a window orFrame into rows and columns. You specify the location of a widget by calling.grid() and passing the row and column indices to therow andcolumn keyword arguments, respectively. Both row and column indices start at0, so a row index of1 and a column index of2 tells.grid() to place a widget in the third column of the second row.

The following script creates a 3 × 3 grid of frames withLabel widgets packed into them:

importtkinterastkwindow=tk.Tk()foriinrange(3):forjinrange(3):frame=tk.Frame(master=window,relief=tk.RAISED,borderwidth=1)frame.grid(row=i,column=j)label=tk.Label(master=frame,text=f"Row{i}\nColumn{j}")label.pack()window.mainloop()

Here’s what the resulting window looks like:

You’re using two geometry managers in this example. Each frame is attached towindow with the.grid() geometry manager:

importtkinterastkwindow=tk.Tk()foriinrange(3):forjinrange(3):frame=tk.Frame(master=window,relief=tk.RAISED,borderwidth=1)frame.grid(row=i,column=j)label=tk.Label(master=frame,text=f"Row{i}\nColumn{j}")label.pack()window.mainloop()

Eachlabel is attached to its masterFrame with.pack():

importtkinterastkwindow=tk.Tk()foriinrange(3):forjinrange(3):frame=tk.Frame(master=window,relief=tk.RAISED,borderwidth=1)frame.grid(row=i,column=j)label=tk.Label(master=frame,text=f"Row{i}\nColumn{j}")label.pack()window.mainloop()

The important thing to realize here is that even though.grid() is called on eachFrame object, the geometry manager applies to thewindow object. Similarly, the layout of eachframe is controlled with the.pack() geometry manager.

The frames in the previous example are placed tightly next to one another. To add some space around each frame, you can set the padding of each cell in the grid.Padding is just some blank space that surrounds a widget and visually sets its content apart.

The two types of padding areexternal andinternal padding. External padding adds some space around the outside of a grid cell. It’s controlled with two keyword arguments to.grid():

1. padx adds padding in the horizontal direction.
2. pady adds padding in the vertical direction.

Bothpadx andpady are measured in pixels, not text units, so setting both of them to the same value will create the same amount of padding in both directions. Try to add some padding around the outside of the frames from the previous example:

importtkinterastkwindow=tk.Tk()foriinrange(3):forjinrange(3):frame=tk.Frame(master=window,relief=tk.RAISED,borderwidth=1)frame.grid(row=i,column=j,padx=5,pady=5)label=tk.Label(master=frame,text=f"Row{i}\nColumn{j}")label.pack()window.mainloop()

Here’s the resulting window:

.pack() also haspadx andpady parameters. The following code is nearly identical to the previous code, except that you add five pixels of additional padding around each label in both thex andy directions:

importtkinterastkwindow=tk.Tk()foriinrange(3):forjinrange(3):frame=tk.Frame(master=window,relief=tk.RAISED,borderwidth=1)frame.grid(row=i,column=j,padx=5,pady=5)label=tk.Label(master=frame,text=f"Row{i}\nColumn{j}")label.pack(padx=5,pady=5)window.mainloop()

The extra padding around theLabel widgets gives each cell in the grid a little bit of breathing room between theFrame border and the text in the label:

That looks pretty nice! But if you try and expand the window in any direction, then you’ll notice that the layout isn’t very responsive:

The whole grid stays at the top-left corner as the window expands.

By using.columnconfigure() and.rowconfigure() on thewindow object, you can adjust how the rows and columns of the grid grow as the window is resized. Remember, the grid is attached towindow, even though you’re calling.grid() on eachFrame widget. Both.columnconfigure() and.rowconfigure() take three essential arguments:

1. Index: The index of the grid column or row that you want to configure or a list of indices to configure multiple rows or columns at the same time
2. Weight: A keyword argument calledweight that determines how the column or row should respond to window resizing, relative to the other columns and rows
3. Minimum Size: A keyword argument calledminsize that sets the minimum size of the row height or column width in pixels

weight is set to0 by default, which means that the column or row doesn’t expand as the window resizes. If every column or row is given a weight of1, then they all grow at the same rate. If one column has a weight of1 and another a weight of2, then the second column expands at twice the rate of the first. Adjust the previous script to better handle window resizing:

importtkinterastkwindow=tk.Tk()foriinrange(3):window.columnconfigure(i,weight=1,minsize=75)window.rowconfigure(i,weight=1,minsize=50)forjinrange(0,3):frame=tk.Frame(master=window,relief=tk.RAISED,borderwidth=1)frame.grid(row=i,column=j,padx=5,pady=5)label=tk.Label(master=frame,text=f"Row{i}\nColumn{j}")label.pack(padx=5,pady=5)window.mainloop()

.columnconfigure() and.rowconfigure() are placed in the body of the outerfor loop. You could explicitly configure each column and row outside of thefor loop, but that would require writing an additional six lines of code.

On each iteration of the loop, thei-th column and row are configured to have a weight of1. This ensures that the row and column expand at the same rate whenever the window is resized. Theminsize argument is set to75 for each column and50 for each row. This ensures that theLabel widget always displays its text without chopping off any characters, even if the window size is extremely small.

The result is a grid layout that expands and contracts smoothly as the window is resized:

Try it yourself to get a feel for how it works! Play around with theweight andminsize parameters to see how they affect the grid.

By default, widgets are centered in their grid cells. For example, the following code creates twoLabel widgets and places them in a grid with one column and two rows:

importtkinterastkwindow=tk.Tk()window.columnconfigure(0,minsize=250)window.rowconfigure([0,1],minsize=100)label1=tk.Label(text="A")label1.grid(row=0,column=0)label2=tk.Label(text="B")label2.grid(row=1,column=0)window.mainloop()

Each grid cell is250 pixels wide and100 pixels tall. The labels are placed in the center of each cell, as you can see in the following figure:

You can change the location of each label inside of the grid cell using thesticky parameter, which accepts a string containing one or more of the following letters:

• "n" or"N" to align to the top-center part of the cell
• "e" or"E" to align to the right-center side of the cell
• "s" or"S" to align to the bottom-center part of the cell
• "w" or"W" to align to the left-center side of the cell

The letters"n","s","e", and"w" come from the cardinal directions north, south, east, and west. Settingsticky to"n" on both labels in the previous code positions each label at the top-center of its grid cell:

importtkinterastkwindow=tk.Tk()window.columnconfigure(0,minsize=250)window.rowconfigure([0,1],minsize=100)label1=tk.Label(text="A")label1.grid(row=0,column=0,sticky="n")label2=tk.Label(text="B")label2.grid(row=1,column=0,sticky="n")window.mainloop()

Here’s the output:

You can combine multiple letters in a single string to position each label in the corner of its grid cell:

importtkinterastkwindow=tk.Tk()window.columnconfigure(0,minsize=250)window.rowconfigure([0,1],minsize=100)label1=tk.Label(text="A")label1.grid(row=0,column=0,sticky="ne")label2=tk.Label(text="B")label2.grid(row=1,column=0,sticky="sw")window.mainloop()

In this example, thesticky parameter oflabel1 is set to"ne", which places the label at the top-right corner of its grid cell.label2 is positioned in the bottom-left corner by passing"sw" tosticky. Here’s what that looks like in the window:

When a widget is positioned withsticky, the size of the widget itself is just big enough to contain any text and other contents inside of it. It won’t fill the entire grid cell. In order to fill the grid, you can specify"ns" to force the widget to fill the cell in the vertical direction, or"ew" to fill the cell in the horizontal direction. To fill the entire cell, setsticky to"nsew". The following example illustrates each of these options:

importtkinterastkwindow=tk.Tk()window.rowconfigure(0,minsize=50)window.columnconfigure([0,1,2,3],minsize=50)label1=tk.Label(text="1",bg="black",fg="white")label2=tk.Label(text="2",bg="black",fg="white")label3=tk.Label(text="3",bg="black",fg="white")label4=tk.Label(text="4",bg="black",fg="white")label1.grid(row=0,column=0)label2.grid(row=0,column=1,sticky="ew")label3.grid(row=0,column=2,sticky="ns")label4.grid(row=0,column=3,sticky="nsew")window.mainloop()

Here’s what the output looks like:

What the above example illustrates is that the.grid() geometry manager’ssticky parameter can be used to achieve the same effects as the.pack() geometry manager’sfill parameter. The correspondence between thesticky andfill parameters is summarized in the following table:

.grid() is a powerful geometry manager. It’s often easier to understand than.pack() and is much more flexible than.place(). When you’re creating new Tkinter applications, you should consider using.grid() as your primary geometry manager.

Now that you’ve got the fundamentals of geometry managers down for the Python GUI framework Tkinter, the next step is to assign actions to buttons to bring your applications to life.

Check Your Understanding

Expand the code block below for an exercise to check your understanding:

Exercise: Create an address entry formShow/Hide

Below is an image of an address entry form made with Tkinter:

Write a complete script that re-creates the window. You may use any geometry manager you like.

You can expand the code block below to see a solution:

importtkinterastk# Create a new window with the title "Address Entry Form"window=tk.Tk()window.title("Address Entry Form")# Create a new frame `frm_form` to contain the Label# and Entry widgets for entering address informationfrm_form=tk.Frame(relief=tk.SUNKEN,borderwidth=3)# Pack the frame into the windowfrm_form.pack()# Create the Label and Entry widgets for "First Name"lbl_first_name=tk.Label(master=frm_form,text="First Name:")ent_first_name=tk.Entry(master=frm_form,width=50)# Use the grid geometry manager to place the Label and# Entry widgets in the first and second columns of the# first row of the gridlbl_first_name.grid(row=0,column=0,sticky="e")ent_first_name.grid(row=0,column=1)# Create the Label and Entry widgets for "Last Name"lbl_last_name=tk.Label(master=frm_form,text="Last Name:")ent_last_name=tk.Entry(master=frm_form,width=50)# Place the widgets in the second row of the gridlbl_last_name.grid(row=1,column=0,sticky="e")ent_last_name.grid(row=1,column=1)# Create the Label and Entry widgets for "Address Line 1"lbl_address1=tk.Label(master=frm_form,text="Address Line 1:")ent_address1=tk.Entry(master=frm_form,width=50)# Place the widgets in the third row of the gridlbl_address1.grid(row=2,column=0,sticky="e")ent_address1.grid(row=2,column=1)# Create the Label and Entry widgets for "Address Line 2"lbl_address2=tk.Label(master=frm_form,text="Address Line 2:")ent_address2=tk.Entry(master=frm_form,width=50)# Place the widgets in the fourth row of the gridlbl_address2.grid(row=3,column=0,sticky=tk.E)ent_address2.grid(row=3,column=1)# Create the Label and Entry widgets for "City"lbl_city=tk.Label(master=frm_form,text="City:")ent_city=tk.Entry(master=frm_form,width=50)# Place the widgets in the fifth row of the gridlbl_city.grid(row=4,column=0,sticky=tk.E)ent_city.grid(row=4,column=1)# Create the Label and Entry widgets for "State/Province"lbl_state=tk.Label(master=frm_form,text="State/Province:")ent_state=tk.Entry(master=frm_form,width=50)# Place the widgets in the sixth row of the gridlbl_state.grid(row=5,column=0,sticky=tk.E)ent_state.grid(row=5,column=1)# Create the Label and Entry widgets for "Postal Code"lbl_postal_code=tk.Label(master=frm_form,text="Postal Code:")ent_postal_code=tk.Entry(master=frm_form,width=50)# Place the widgets in the seventh row of the gridlbl_postal_code.grid(row=6,column=0,sticky=tk.E)ent_postal_code.grid(row=6,column=1)# Create the Label and Entry widgets for "Country"lbl_country=tk.Label(master=frm_form,text="Country:")ent_country=tk.Entry(master=frm_form,width=50)# Place the widgets in the eight row of the gridlbl_country.grid(row=7,column=0,sticky=tk.E)ent_country.grid(row=7,column=1)# Create a new frame `frm_buttons` to contain the# Submit and Clear buttons. This frame fills the# whole window in the horizontal direction and has# 5 pixels of horizontal and vertical padding.frm_buttons=tk.Frame()frm_buttons.pack(fill=tk.X,ipadx=5,ipady=5)# Create the "Submit" button and pack it to the# right side of `frm_buttons`btn_submit=tk.Button(master=frm_buttons,text="Submit")btn_submit.pack(side=tk.RIGHT,padx=10,ipadx=10)# Create the "Clear" button and pack it to the# right side of `frm_buttons`btn_clear=tk.Button(master=frm_buttons,text="Clear")btn_clear.pack(side=tk.RIGHT,ipadx=10)# Start the applicationwindow.mainloop()

importtkinterastk# Create a new window with the title "Address Entry Form"window=tk.Tk()window.title("Address Entry Form")# Create a new frame `frm_form` to contain the Label# and Entry widgets for entering address informationfrm_form=tk.Frame(relief=tk.SUNKEN,borderwidth=3)# Pack the frame into the windowfrm_form.pack()# List of field labelslabels=["First Name:","Last Name:","Address Line 1:","Address Line 2:","City:","State/Province:","Postal Code:","Country:",]# Loop over the list of field labelsforidx,textinenumerate(labels):# Create a Label widget with the text from the labels listlabel=tk.Label(master=frm_form,text=text)# Create an Entry widgetentry=tk.Entry(master=frm_form,width=50)# Use the grid geometry manager to place the Label and# Entry widgets in the row whose index is idxlabel.grid(row=idx,column=0,sticky="e")entry.grid(row=idx,column=1)# Create a new frame `frm_buttons` to contain the# Submit and Clear buttons. This frame fills the# whole window in the horizontal direction and has# 5 pixels of horizontal and vertical padding.frm_buttons=tk.Frame()frm_buttons.pack(fill=tk.X,ipadx=5,ipady=5)# Create the "Submit" button and pack it to the# right side of `frm_buttons`btn_submit=tk.Button(master=frm_buttons,text="Submit")btn_submit.pack(side=tk.RIGHT,padx=10,ipadx=10)# Create the "Clear" button and pack it to the# right side of `frm_buttons`btn_clear=tk.Button(master=frm_buttons,text="Clear")btn_clear.pack(side=tk.RIGHT,ipadx=10)# Start the applicationwindow.mainloop()

When you’re ready, you can move on to the next section.

Using Events and Event Handlers

When you create a Tkinter application, you must callwindow.mainloop() to start theevent loop. During the event loop, your application checks if an event has occurred. If so, then it’ll execute some code in response.

The event loop is provided for you with Tkinter, so you don’t have to write any code that checks for events yourself. However, you do have to write the code that will be executed in response to an event. In Tkinter, you write functions calledevent handlers for the events that you use in your application.

You’ll write your own event loop in order to better understand how Tkinter’s event loop works. That way, you can see how Tkinter’s event loop fits into your application, and which parts you need to write yourself.

Assume there’s a list calledevents that contains event objects. A new event object is automatically appended toevents every time an event occurs in your program. You don’t need to implement this updating mechanism. It just automatically happens for you in this conceptual example. Using an infinite loop, you can continually check if there are any event objects inevents:

# Assume that this list gets updated automaticallyevents=[]# Run the event loopwhileTrue:# If the event list is empty, then no events have occurred# and you can skip to the next iteration of the loopifevents==[]:continue# If execution reaches this point, then there is at least one# event object in the event listevent=events[0]

Right now, the event loop that you’ve created doesn’t do anything withevent. Let’s change that. Suppose your application needs to respond to keypresses. You need to check thatevent was generated by a user pressing a key on their keyboard, and if so, passevent to an event handler function for keypresses.

Assume thatevent has a.type attribute set to the string"keypress" if the event is a keypress event object, and a.char attribute containing the character of the key that was pressed. Create a newhandle_keypress() function and update your event loop code:

events=[]# Create an event handlerdefhandle_keypress(event):"""Print the character associated to the key pressed"""print(event.char)whileTrue:ifevents==[]:continueevent=events[0]# If event is a keypress event objectifevent.type=="keypress":# Call the keypress event handlerhandle_keypress(event)

When you callwindow.mainloop(), something like the above loop is run for you. This method takes care of two parts of the loop for you:

1. It maintains alist of events that have occurred.
2. It runs anevent handler any time a new event is added to that list.

Update your event loop to usewindow.mainloop() instead of your own event loop:

importtkinterastk# Create a window objectwindow=tk.Tk()# Create an event handlerdefhandle_keypress(event):"""Print the character associated to the key pressed"""print(event.char)# Run the event loopwindow.mainloop()

.mainloop() takes care of a lot for you, but there’s something missing from the above code. How does Tkinter know when to usehandle_keypress()? Tkinter widgets have a method called.bind() for just this purpose.

Using.bind()

To call an event handler whenever an event occurs on a widget, use.bind(). The event handler is said to bebound to the event because it’s called every time the event occurs. You’ll continue with the keypress example from the previous section and use.bind() to bindhandle_keypress() to the keypress event:

importtkinterastkwindow=tk.Tk()defhandle_keypress(event):"""Print the character associated to the key pressed"""print(event.char)# Bind keypress event to handle_keypress()window.bind("<Key>",handle_keypress)window.mainloop()

Here, thehandle_keypress() event handler is bound to a"<Key>" event usingwindow.bind(). Whenever a key is pressed while the application is running, your program will print the character of the key pressed.

.bind() always takes at least two arguments:

1. Anevent that’s represented by a string of the form"<event_name>", whereevent_name can be any of Tkinter’s events
2. Anevent handler that’s the name of the function to be called whenever the event occurs

The event handler is bound to the widget on which.bind() is called. When the event handler is called, the event object is passed to the event handler function.

In the example above, the event handler is bound to the window itself, but you can bind an event handler to any widget in your application. For example, you can bind an event handler to aButton widget that will perform some action whenever the button is pressed:

defhandle_click(event):print("The button was clicked!")button=tk.Button(text="Click me!")button.bind("<Button-1>",handle_click)

In this example, the"<Button-1>" event on thebutton widget is bound to thehandle_click event handler. The"<Button-1>" event occurs whenever the left mouse button is pressed while the mouse is over the widget. There are other events for mouse button clicks, including"<Button-2>" for the middle mouse button and"<Button-3>" for the right mouse button.

You can bind any event handler to any kind of widget with.bind(), but there’s a more straightforward way to bind event handlers to button clicks using theButton widget’scommand attribute.

Usingcommand

EveryButton widget has acommand attribute that you can assign to a function. Whenever the button is pressed, the function is executed.

Take a look at an example. First, you’ll create a window with aLabel widget that holds a numeric value. You’ll put buttons on the left and right side of the label. The left button will be used to decrease the value in theLabel, and the right one will increase the value. Here’s the code for the window:

 1importtkinterastk 2 3window=tk.Tk() 4 5window.rowconfigure(0,minsize=50,weight=1) 6window.columnconfigure([0,1,2],minsize=50,weight=1) 7 8btn_decrease=tk.Button(master=window,text="-") 9btn_decrease.grid(row=0,column=0,sticky="nsew")1011lbl_value=tk.Label(master=window,text="0")12lbl_value.grid(row=0,column=1)1314btn_increase=tk.Button(master=window,text="+")15btn_increase.grid(row=0,column=2,sticky="nsew")1617window.mainloop()

The window looks like this:

With the app layout defined, you can bring it to life by giving the buttons some commands. Start with the left button. When this button is pressed, it should decrease the value in the label by one. In order to do this, you first need to get answers to two questions:

1. How do you get the text inLabel?
2. How do you update the text inLabel?

Label widgets don’t have.get() likeEntry andText widgets do. However, you can retrieve the text from the label by accessing thetext attribute with a dictionary-style subscript notation:

label=tk.Label(text="Hello")# Retrieve a label's texttext=label["text"]# Set new text for the labellabel["text"]="Good bye"

Now that you know how to get and set a label’s text, write anincrease() function that increases the value inlbl_value by one:

 1importtkinterastk 2 3defincrease(): 4value=int(lbl_value["text"]) 5lbl_value["text"]=f"{value+1}" 6 7# ...

increase() gets the text fromlbl_value and converts it to an integer withint(). Then, it increases this value by one and sets the label’stext attribute to this new value.

You’ll also needdecrease() to decrease the value invalue_label by one:

 5# ... 6 7defdecrease(): 8value=int(lbl_value["text"]) 9lbl_value["text"]=f"{value-1}"1011# ...

Putincrease() anddecrease() in your code just after theimport statement.

To connect the buttons to the functions, assign the function to the button’scommand attribute. You can do this when you instantiate the buttons. For example, update the two lines that instantiate the buttons to the following:

14# ...1516btn_decrease=tk.Button(master=window,text="-",command=decrease)17btn_decrease.grid(row=0,column=0,sticky="nsew")1819lbl_value=tk.Label(master=window,text="0")20lbl_value.grid(row=0,column=1)2122btn_increase=tk.Button(master=window,text="+",command=increase)23btn_increase.grid(row=0,column=2,sticky="nsew")2425window.mainloop()

That’s all you need to do to bind the buttons toincrease() anddecrease() and make the program functional. Try saving your changes and running the application! Click the buttons to increase and decrease the value in the center of the window:

Here’s the full application code for your reference:

importtkinterastkdefincrease():value=int(lbl_value["text"])lbl_value["text"]=f"{value+1}"defdecrease():value=int(lbl_value["text"])lbl_value["text"]=f"{value-1}"window=tk.Tk()window.rowconfigure(0,minsize=50,weight=1)window.columnconfigure([0,1,2],minsize=50,weight=1)btn_decrease=tk.Button(master=window,text="-",command=decrease)btn_decrease.grid(row=0,column=0,sticky="nsew")lbl_value=tk.Label(master=window,text="0")lbl_value.grid(row=0,column=1)btn_increase=tk.Button(master=window,text="+",command=increase)btn_increase.grid(row=0,column=2,sticky="nsew")window.mainloop()

This app isn’t particularly useful, but the skills you learned here apply to every app you’ll make:

• Usewidgets to create the components of the user interface.
• Usegeometry managers to control the layout of the application.
• Writeevent handlers that interact with various components to capture and transform user input.

In the next two sections, you’ll build more useful apps. First, you’ll build a temperature converter that converts a temperature value from Fahrenheit to Celsius. After that, you’ll build a text editor that can open, edit, and save text files!

Check Your Understanding

Expand the code block below for an exercise to check your understanding:

Exercise: Simulate rolling a six-sided dieShow/Hide

Write a program that simulates rolling a six-sided die. There should be one button with the textRoll. When the user clicks the button, a random integer from1 to6 should be displayed.

Hint: You can generate a random number usingrandint() in therandom module. If you’re not familiar with therandom module, then check outGenerating Random Data in Python (Guide) for more information.

The application window should look something like this:

Try this exercise now.

You can expand the code block below to see a solution:

importrandomimporttkinterastkdefroll():lbl_result["text"]=str(random.randint(1,6))window=tk.Tk()window.columnconfigure(0,minsize=150)window.rowconfigure([0,1],minsize=50)btn_roll=tk.Button(text="Roll",command=roll)lbl_result=tk.Label()btn_roll.grid(row=0,column=0,sticky="nsew")lbl_result.grid(row=1,column=0)window.mainloop()

When you’re ready, you can move on to the next section.