Make Image Exact Center in tkinter.ttk in python

Question

I am creating a simple application using tkinter.ttk. I am creating one Image Viewer App but while creating the app I am getting some problem. Here is my code:

from tkinter import *
from tkinter.ttk import *
from PIL import Image, ImageTk

root = Tk()
root.title("Simple Image Viewer")
style = Style()


root.columnconfigure(0, weight=True)
root.rowconfigure(0, weight=True)

img1 = ImageTk.PhotoImage(Image.open("images/img_1.jpg"))
img2 = ImageTk.PhotoImage(Image.open("images/img_2.jpg"))
img3 = ImageTk.PhotoImage(Image.open("images/img_3.jpg"))

images = [img1, img2, img3]
img_idx = 0


def previous_image():
    global lbl_img
    global images
    global img_idx
    img_idx = img_idx - 1
    if img_idx < 0:
        img_idx = len(images) - 1
    try:
        lbl_img.configure(image=images[img_idx])
    except IndexError:
        img_idx = -1
        lbl_img.configure(image=images[img_idx])
    finally:
        status.configure(text=f"{img_idx + 1} of {len(images)} images.")


btn_back = Button(text="<", command=previous_image)


def forward_image():
    global lbl_img
    global images
    global img_idx
    img_idx = img_idx + 1
    try:
        lbl_img.configure(image=images[img_idx])
    except IndexError:
        img_idx = 0
        lbl_img.configure(image=images[img_idx])
    finally:
        status.configure(text=f"{img_idx + 1} of {len(images)} images.")


btn_forward = Button(text=">", command=forward_image)

lbl_img = Label(image=images[img_idx])

status = Label(root, text=f"{img_idx + 1} of {len(images)} images.", borderwidth=1,
               relief=SUNKEN, anchor="e")
status.grid(row=2, column=0, columnspan=3, stick=W+E)

btn_exit = Button(text="Exit", command=root.quit)
btn_back.grid(row=0, column=0, stick=W)
lbl_img.grid(row=0, column=1)
btn_forward.grid(row=0, column=2, stick=E)
btn_exit.grid(row=1, column=1)

root.mainloop()

When I run this then it comes like this: In small window

And when I maximize it: In maximize It comes like this. In above picture you can see that the image is not coming properly in center. My pictures must be in exact center in both in small and big window. Please can any one help me to do that by seeing my program.

Thanks in advance

Answer 1

You can achieve this with grid you need to make sure that left and right get space, also up and down, but the middle gets no space. As an exampel:

import tkinter as tk

root = tk.Tk()

up = tk.Frame(root)
up.grid(column=0, row=0,columnspan=3,sticky='n')
s1 = tk.Label(up, text='spacer')
s1.pack()

left = tk.Frame(root)
b1 = tk.Button(left, text='B1')
left.grid(column=0,row=1,sticky='w')
b1.pack()

middle = tk.Frame(root)
middle.grid(column=1, row=1)
s2 = tk.Label(middle, text='spacer')
s2.pack()

down = tk.Frame(root)
qb = tk.Button(down, text='Exit', command= root.destroy)
down.grid(column=0, row=2,columnspan=3,sticky='s')
qb.pack()

right = tk.Frame(root)
right.grid(column=2,row=1,sticky='e')
b2 = tk.Button(right, text='B2')
b2.pack()

root.columnconfigure(0,weight=1) #left get space
root.columnconfigure(2,weight=1) #right get space

root.rowconfigure(0, weight=1) #up get space
root.rowconfigure(2, weight=1) #down get space

root.mainloop()

Ourput:

For detail information what weight does.