[Tutor] Tkinter grid layout question

[Alan Gauld]

On 26/10/2023 06:18, Phil wrote:
> This a customtkinter project but I expect the grid layout works exactly 
> the same in standard Tkinter.
> 
> The aim is to display an image at the top left of the window and four 
> direction buttons in a cross formation centred on the image and to the 
> right of the image.

I don't understand this bit. How can it be centred both on
the image and to the right of it? Are there two locations
and the group can move from one to the other?

Or do you mean the buttons are positioned to the right of
the image but with the image horizontally level with the
centre of the buttons? In which case the image surely
can't be top-left? Or is it a big image, bigger than
the 4 buttons?

Can you use ASCII art to show what you are aiming for?


> I've got this working through a trial and error but I'd like to know how 
> I should have arrived at the same solution without all the fuss. 
> Gradually increasing the label rowspan finally led to the solution.

Increasing rowspan generally only works when there are
other objects in the rows being spanned, otherwise
Tk considers the empty rows as having zero size...

> I have a large label defined and displayed as follows:
> 
>          my_image = customtkinter.CTkImage(
>              dark_image=Image.open("background.png"), size=(250, 230)
>          )
>          image_label = customtkinter.CTkLabel(self, image=my_image, 
> text="",fg_color="yellow")
>          image_label.grid(row=0, column=0, rowspan=18, padx=10, pady=10, 
> sticky="nw")

OK, That puts the image top-left spanning 18 rows. - But no columns?
I'd have expected a colspan of 3 at least(see below)

> The four direction arrow buttons are as follows (I'll just show one):
> 
>          up_arrow_image = customtkinter.CTkImage(
>              dark_image=Image.open("up.png"), size=(40, 40)
>          up_button = customtkinter.CTkButton(
>              self, text="", image=up_arrow_image, width=50, height=50
>          )
> 
>          up_button.grid(row=0, column=4, pady=(40,0),sticky="ne")

I would have expected column 1 if you are putting the buttons
on top of the image: 0 for the left, 1 for up/down and 2
for the right.

> The up_button pady=(40,0) shifts the group of buttons down so that 
> they're centred to the right of the label.

Again I don't really understand this. Is this an action performed
by the button or what happens when you insert it into the geometry?

> I'm not confident that I've attacked the problem correctly but if the 
> solution is correct then all is well.

Sorry, but I'm not clear what your solution is. Nor what
it is supposed to be. Maybe if you showed all of the
button grid calls it would help.

Assuming you want to superimpose the image on the buttons then
I'd expect the image to be in cell [0,0] and have row and
colspan set to 3.
Then have the buttons in cells [0,1][1,0][1,2],[2,2]

Although I'm not sure how TK handles multiple objects in
a cell, I've never tried that! I'd probably have used a Canvas
widget and drawn all the button images on that then used
then used click events on the images to trigger the events.

-- 
Alan G
Author of the Learn to Program web site
http://www.alan-g.me.uk/
http://www.amazon.com/author/alan_gauld
Follow my photo-blog on Flickr at:
http://www.flickr.com/photos/alangauldphotos