Tkinter - Change Button Position on expanding window size

user_13549108 0
Viewed 499

My expected output is:

 _______________________________
|-------------------------------|
|            EXAMPLE            |
|                       Label1  |
| ______     _______    ______  |
||      |   |       |  |      | |
||      |   |       |  |      | |
||______|   |_______|  |______| |
|_______________________________|

Here I want to place these three buttons at a fixed distance apart and at the center, means The size of the buttons are fixed and if the user tries to expand the size of window the ratio of distance between buttons should be maintained

Here is my code:

from tkinter import *

window = Tk()
window.minsize(710, 500)
window.state('zoomed')
window.title('Example')

frame = Frame(window)
frame.pack(fill=BOTH, expand=True)

frame2 = Frame(window)
frame2.pack(fill=BOTH, expand=True)


Label(frame, text="Example", fg='red3',
      font=('Eras Bold ITC', '65', 'bold')).pack(anchor = 'n', pady = 50)

Label(frame, text="Label2", fg='blue',
      font=('Calibri', '25', 'bold')).pack(anchor = 'e', padx = 40)

Button(frame2, height='10', width='20', text = 'image1').grid(row = 0, column = 0, padx = 20)
Button(frame2, height='10', width='20', text = 'image2').grid(row = 0, column = 6, padx = 20)
Button(frame2, height='10', width='20', text = 'image3').grid(row = 0, column = 12, padx = 20)

mainloop()

Here I have used the grid method but I have tried applying pack() but it places the button just below the first one

Output: https://i.stack.imgur.com/ItxvB.jpg

Expected Output: Even on expanded window (Edited Image) https://i.stack.imgur.com/Koe34.jpg

button grid pack tkinter python
1 Answers

This is one way to organize the widgets in a grid.

https://i.postimg.cc/yYN0FX3D/tkinter-change-button-position-on-expanding-window-size.png

I removed frame2 from the code and used just one frame ("frame") as the container. In the image above and in the code below you will see that:

  • I modified the import to not use * (I've read it's not a good practice). So tk. was added as needed
  • label "Example" goes in row 0, column 0 and spans for 3 cells
  • label "label2" goes in row 1, column 3
  • I created another label (label1) in row 1, column 2, just above button3 (I got confused, since the image you linked [Expected Output] is different from the sketch you presented in the beginning of your question
  • the 3 buttons go in row 2, in columns 0, 1 and 2, respectively
  • I added a pady=40 for the buttons for a better appearance
  • rowconfigure and columnconfigure are needed with the weight option, in order for the grid to resize

HTH

import tkinter as tk

window = tk.Tk()
window.minsize(710, 500)
window.state('zoomed')
window.title('Example')

# the frame will be the main container, it's a child of the root window
frame = tk.Frame(window)
frame.grid(row=0, column=0, stick='news')
# tell our root window that its grid should be stretchable
window.rowconfigure(0, weight=1)
window.columnconfigure(0, weight=1)

# create a label, child of the frame, in row 0, column 0. It wiil span for 3 cells
tk.Label(frame, text="Example", fg='red3',
      font=('Eras Bold ITC', '65', 'bold')).grid(row=0, column=0, columnspan=3)

# create another label, child of the frame, in row 1, column 2
tk.Label(frame, text="Label1", fg='blue',
      font=('Calibri', '25', 'bold')).grid(row=1, column=2)


# create another label, child of the frame, in row 1, column 3
tk.Label(frame, text="Label2", fg='blue',
      font=('Calibri', '25', 'bold')).grid(row=1, column=3)

# create a button, child of the frame, in row 2, column 0
tk.Button(frame, height='10', width='20', text = 'image1').grid(row = 2, column = 0, padx = 20, pady=40)
# create a button, child of the frame, in row 2, column 1
tk.Button(frame, height='10', width='20', text = 'image2').grid(row = 2, column = 1, padx = 20, pady=40)
# create a button, child of the frame, in row 2, column 2
tk.Button(frame, height='10', width='20', text = 'image3').grid(row = 2, column = 2, padx = 20, pady=40)

# tell our frame that its grid should resize (stretchable) with same ratio for row heights and column widths
frame.rowconfigure(0, weight=1)
frame.rowconfigure(1, weight=1)
frame.columnconfigure(0, weight=1)
frame.columnconfigure(1, weight=1)
frame.columnconfigure(2, weight=1)
frame.columnconfigure(3, weight=1)

window.mainloop()
user_152324920
Related