CODEWITHSUNDEEP
pythontkinter
NUB at codes
NUB at codes

Reputation: 59

Python GUI frame and button layout, how to add frame and buttons to correct location?

def create_layout(frame):

frame = Frame(frame, bg = 'red')
frame.pack(side = LEFT, fill=BOTH)

b = Button(frame, text='Button1', command=pressed, padx = 20)
b.pack(pady = 20, padx = 20)
c = Button(frame, text='Button2', command=pressed, padx=20)
c.pack(pady = 20, padx = 20)

I got this code so far, assume that from Tkinter import * has already been called and the frame has already had its size and colour set. It should look like the picture below. However i can't ever get button 3 and 4 to the frame on the right, whenever i add a button it goes in the red frame.

enter image description here

Upvotes: 2

Views: 20219

Answers (3)

Billal BEGUERADJ
Billal BEGUERADJ

Reputation: 22754

You have 2 frames, and 4 buttons.

Let us create a function called create_widgets() which will only consist in calling 2 other functions create_frames() and create_buttons()

For the frames, we use the grid() layout manager:

def create_frames(self):
   self.left_frame = tk.Frame(width=140, height=140, background='red')       
   self.left_frame.grid(row=0, column=0)

   self.right_frame = tk.Frame(width=300, height=140, background='gold2')       
   self.right_frame.grid(row=0, column=1)

This will create this interface:

enter image description here

Let us design create_buttons() in a way it only consists in calling to 2 different functions, each having a specific task:

  • create_left_frame_buttons() to create buttons for the left frame
  • create_right_frame_buttons() to create buttons for the right frame

Here is their simple implementation:

def create_buttons(self):
   self.create_left_frame_buttons()
   self.create_right_frame_buttons()       

def create_left_frame_buttons(self):
   self.button1 = tk.Button(self.left_frame, text='Button1')       
   self.button1.grid(row=0, column=0, padx=30, pady=20)

   self.button2 = tk.Button(self.left_frame, text='Button2')       
   self.button2.grid(row=1, column=0, padx=30, pady=20)       

def create_right_frame_buttons(self):
   self.button1 = tk.Button(self.right_frame, text='Button3')       
   self.button1.grid(row=0, column=0, padx=20, pady=50)

   self.button2 = tk.Button(self.right_frame, text='Button4')       
   self.button2.grid(row=0, column=1, padx=70)

Note that I used the options padx and pady to create a suitable spacing between the buttons.

Up to this moment, this is the resulting interface:

enter image description here

You can see both the left and right frames are shrinking, and the result is ugly. To fix this issue, we can set rid_propagate(0) for each frame.

So based on these observations and following Tkinter best practices, here is the full code:

import tkinter as tk


class MainApplication(tk.Frame):
   def __init__(self, master):
       self.master = master
       tk.Frame.__init__(self, self.master)
       self.configure_gui()
       self.create_widgets()

   def configure_gui(self):
       self.master.title('Simple layout')
       self.master.geometry('440x140')
       self.master.resizable(0, 0)

   def create_widgets(self):
       self.create_frames()
       self.create_buttons()

   def create_frames(self):
       self.left_frame = tk.Frame(width=140, height=140, background='red')
       self.left_frame.grid_propagate(0)
       self.left_frame.grid(row=0, column=0)

       self.right_frame = tk.Frame(width=300, height=140, background='gold2')
       self.right_frame.grid_propagate(0)
       self.right_frame.grid(row=0, column=1)   

   def create_buttons(self):
       self.create_left_frame_buttons()
       self.create_right_frame_buttons()       

   def create_left_frame_buttons(self):
       self.button1 = tk.Button(self.left_frame, text='Button1')       
       self.button1.grid(row=0, column=0, padx=30, pady=20)

       self.button2 = tk.Button(self.left_frame, text='Button2')       
       self.button2.grid(row=1, column=0, padx=30, pady=20)       

   def create_right_frame_buttons(self):
       self.button1 = tk.Button(self.right_frame, text='Button3')       
       self.button1.grid(row=0, column=0, padx=20, pady=50)

       self.button2 = tk.Button(self.right_frame, text='Button4')       
       self.button2.grid(row=0, column=1, padx=70)


if __name__ == '__main__':
   root = tk.Tk()
   main_app =  MainApplication(root)
   root.mainloop()

Demo:

enter image description here

Upvotes: 1

Bob
Bob

Reputation: 21

OK, the first set of buttons, button 1 & 2 are in the "frame", buttons 3 & 4 should be left out.

So with buttons 1 & 2, open the frame with the bg of red, pack it with side=tk.LEFT, fill with both & expand it.

With buttons 3 & 4, just side them LEFT and expand. That will work like a treat ;-)

Upvotes: 2

Drizzlydayz
Drizzlydayz

Reputation: 13

You need to add another frame that sits to the right, and then pack button3 and button4 into that. Maybe change the previous frame you have there to frame1 and then have:

frame2 = Frame(frame, bg = "yellow")
frame2.pack(side = RIGHT, fill = BOTH)

Then, create the buttons and pack them in. Hope this helps!

Upvotes: 1

Related Questions