6

I am learning Tkinter and building a simple 8 puzzle game.
(Example: http://www.permadi.com/java/puzzle8/)

Each number is a Canvas object placed into a Frame using a grid layout. One of the objects is adding extra padding between the Canvas objects. I set the border width to the Canvas objects to -2 which solved some people's issue, but that only slightly reduced the extra padding for me. Setting this value to -4 begins to cut into my canvas area.

I am assuming that the grid layout's cells have some default padding or border width, but I have not found a way to remove it. Setting the padx, pady, ipadx, ipady values when calling grid() on the Canvas objects does not seem to help either.

Another weirdness I found was when making a border for my Canvas objects I used create_rectangle, but I had to start x_1 and y_1 at 4,4 instead of 0,0 or 2,2 which is what I would expect for a 2px border.

Here is my code. Any help/advice/workarounds/otherwise is greatly appreciated.

#!/usr/bin/python

from Tkinter import *

class Number(Canvas):
    def __init__(self, master=None, number=1):
        Canvas.__init__(self, master, width=100, height=100, bd=-2)
        self.create_text(50, 50, text=str(number), anchor=CENTER)
        self.create_rectangle(4, 4, 98, 98, width=2)


class Application(Frame):
    def create_widgets(self):
        self.playarea = Frame(self, width=300, height=300)
        self.playarea.grid_propagate(0)
        self.playarea.grid()
        self.playarea.numbers = []
        for number in xrange(1, 10):
            num_obj = Number(self.playarea, number)
            self.playarea.numbers.append(num_obj)
            row = number // 3
            col = number % 3
            num_obj.grid(row=row, column=col)

    def __init__(self, master=None):
        Frame.__init__(self, master)
        self.grid()
        self.create_widgets()


def main():
    app = Application()
    app.master.title("Sample Application")
    app.mainloop()

if __name__ == '__main__':
    main()

1 Answer 1

11

Most likely the cause of your problem is that you're neglecting to set the highlightthickness attribute of each canvas to zero. This value controls a colored ring around the widget used to denote that it has focus.

Here's a trick when trying to solve these types of layout issues: Give each widget a different background color (ie: the root window a color, your inner frames a color, the canvas a color). You can then use the colors as a guide to see what widget owns the space you're trying to eliminate.

Sign up to request clarification or add additional context in comments.

2 Comments

highlightthickness was the culprit. Thanks for the help! The background trick worked wonders too.
+10 for "Give each widget a different background color". I used this before for a tricky layout issue but I forgot about it until you mentioned it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.