Using Frames to Divide the Window

In this section, we will be using the Frames widget to divide up the screen, but before we do that, let’s talk a bit about the app we are making. Today, we are going to be making a very simple version of a drawing app. On the left, there will be buttons that we can use to pick the color we want to draw with, and on the right, there will be a canvas that we can draw on by clicking and dragging the mouse cursor. With that in mind, we are going to want two distinct areas on our screen, the left side will hold all of the buttons, and the right side should hold the canvas we are going to draw on. We also will likely also want the left side to be smaller than the right, and for the canvas side to take up as much space as it can.

The first thing we will do is make two variables representing frame widgets, leftFrame, and rightFrame. When making a new widget (except for the Tk widget) you need to specify where in the GUI you want to place it. In the case of our frames, we want to place them in the root window we defined earlier, hence the word “root”. We can also c

leftFrame = Frame(window, width = 80, bg = "black")
rightFrame = Frame(window, bg = "white")

Whenever we make a new widget in a tkinter app, we need to “pack” it after we define it. The pack function controls how the widget will be displayed on the screen, and there are some attributes we can set when doing this. With the code on the right, we are adding in our frames. Test out the code to see how this works. Experiment with these pack settings to better understand how they work.

leftFrame.pack(fill = Y, side = LEFT)
rightFrame.pack(expand=True, fill = BOTH, side=RIGHT)