We Keep Coding

How do I get my frame sizes to match up to my root window size?

I'm making a text game. I used an entry widget for player input, a text widget for the game's output, and put them into frames. I set the root window's geometry and the frame sizes to fit into that geometry. However, the frame sizes are smaller than expected. Specifically, my story_text_frame is shorter than expected. I have done a tutorial, and am not sure what I am missing now.
import tkinter as tk
class Game(tk.Tk):
def __init__(self, *args, **kwargs):
super().__init__(*args,**kwargs)
self.geometry('1280x720')
self.player_input_frame = tk.Frame(self, height=20, width=625)
self.player_input_field = tk.Entry(self.player_input_frame, background='black', foreground='white', relief='flat')
self.player_input_field.grid(row=0, column=0)
self.player_input_frame.grid(row=2, column=1)
self.story_text_frame = tk.Frame(self, height=670, width=625)
self.story_text_field = tk.Text(self.story_text_frame, background='grey', foreground='white')
self.story_text_field.grid(row=0, column=0)
self.story_text_frame.grid(row=1, column=1)

To have a widget size follow the size of a master widget or a window you must specify how this is to be done with columnconfigure() and rowconfigure(). Then you must expand the widget to fill the available cell space by instructing grid() to stick to the edges; sticky='nsew'. See my example:
import tkinter as tk
class Game(tk.Tk):
def __init__(self, *args, **kwargs):
super().__init__(*args,**kwargs)
self.geometry('800x600')
self.columnconfigure(0, weight=1) # Specify how columns and rows will
self.rowconfigure(0, weight=1) # change when window size changes.
# The game's output Text() widget
self.story_text_field = tk.Text(self)
self.story_text_field.grid(row=0, column=0, sticky='nsew',
pady=10, padx=10) # Sticky expands the widget to fill the cell
# The player input Entry() widget
self.player_input_field = tk.Entry(self)
self.player_input_field.grid(row=1, column=0, pady=(0,10))
Game().mainloop()
I have removed the Frames to make the construction clearer. Also I removed the coloring of the widgets. I introduced some padding to make the result more pleasing to the eye and changed the window size to be easier to handle on my tiny screen.
For further information on grid() I can recommend effbot's The Tkinter Grid Geometry Manager. You can also read Mike - SMT's answer to Find position of another anchor than the anchor already used which elaborates on both grid() and pack().

How to add a specific spacing in pixels between tkinter buttons?

I have written some code for some buttons. However, I am not sure how to add a specific number of pixels of spacing for each button. So far is the code I have written. However, I have not yet figured out a reliable way to add spacing between the buttons in pixel sizes.
import tkinter as tk
#from tkinter import PhotoImage
def banana():
print ("Sundae")
def tomato():
print ("Ketchup")
def potato():
print ("Potato chips")
root = tk.Tk()
root.geometry("960x600")
f1 = tk.Frame(root, width=70, height=30)
f1.grid(row=3, column=0, sticky="we")
button_qwer = tk.Button(f1, text="Banana", command=banana)
button_asdf = tk.Button(f1, text="Tomato", command=tomato)
button_zxcv = tk.Button(f1, text="Potato", command=potato)
button_qwer.grid(row=0, column=0)
button_asdf.grid(row=0, column=1)
button_zxcv.grid(row=0, column=2)
root.mainloop()

Adding space between widgets depends on how you are putting the widgets in the window. Since you are using grid, one simple solution is to leave empty columns between the buttons, and then give these columns a minsize equal to the space you want.
Example:
f1.grid_columnconfigure((1, 3), minsize=10, weight=0)
button_qwer.grid(row=0, column=0)
button_asdf.grid(row=0, column=2)
button_zxcv.grid(row=0, column=4)

Using a specific number of pixels of spacing between each Buttondoesn't sound to me like such as good idea because it isn't very flexible nor easily portable to devices with different resolutions.
Nevertheless I've figured-out a way of doing it—namely by putting a do-nothing invisible button between of the each real ones. This got somewhat involved, mostly because it requires putting an image on each Button used this way so its width option argument will be interpreted as number of pixels instead of number of characters (here's some documentation describing the various Button widget configuration options).
import tkinter as tk
# Inline XBM format data for a 1x1 pixel image.
BITMAP = """
#define im_width 1
#define im_height 1
static char im_bits[] = {
0x00
};
"""
root = tk.Tk()
root.geometry("960x600")
bitmap = tk.BitmapImage(data=BITMAP, maskdata=BITMAP)
f1 = tk.Frame(root, width=70, height=30)
f1.grid(row=3, column=0, sticky=tk.EW)
def banana():
print ("Sundae")
def tomato():
print ("Ketchup")
def potato():
print ("Potato chips")
def layout_buttons(parent, buttons, spacing):
if buttons:
first, *rest = buttons
first.grid(row=0, column=0) # Position first Button.
for index, button in enumerate(rest, start=1):
col = 2*index
# Dummy widget to separate each button from the one before it.
separator = tk.Button(parent, relief=tk.FLAT, state=tk.ACTIVE,
image=bitmap, borderwidth=0, highlightthickness=0,
width=spacing)
separator.grid(row=0, column=col-1)
button.grid(row=0, column=col)
buttons = (
tk.Button(f1, text="Banana", command=banana),
tk.Button(f1, text="Tomato", command=tomato),
tk.Button(f1, text="Potato", command=potato),
)
layout_buttons(f1, buttons, 30)
root.mainloop()
Result:
Here's a blow-up showing that the spacing is exactly 30 pixels (as counted in my image editor and indicated by the thin horizontal black line between the adjacent edges of the two Buttons).

python, tkinter - Frame height and width parameter values have no effect

I am trying to create 16 buttons which will completely occupy the bottom 3/4 th of the window. But, the frame height and width values don't seem to have any effect. How to get the behaviour I want?
from tkinter import *
class Application(object):
def __init__(self):
# Creating the main window
self.window = Tk()
self.window.geometry('{}x{}'.format(400, 400))
# frame where numbered buttons will be
frame = Frame(self.window)
frame.configure(height=300, width=300)
frame.pack(side=BOTTOM)
# add buttons
for i in range(4):
for j in range(4):
Button(frame, text=str(4*i + j + 1)).grid(row=i, column=j, sticky=N+E+S+W)
self.window.mainloop()
def main():
app = Application()
main()

The reason for the behavior you are seeing is that tkinter widgets are designed to shrink or expand to exactly fit around their children when using grid or pack. 99.99% of the time this is the exact right behavior, because it results in GUIs that are responsive to changes in font size, screen resolution, and window size.
If your goal is to divide the screen into two parts, where one part takes up 1/4 of the screen and one part takes up 3/4, the best solution is to use grid or place since those both make it easy to set relative sizes.
I don't normally recommend place, so here's a solution using grid. Note the use of grid.rowconfigure and grid.columnconfigure
from tkinter import *
class Application(object):
def __init__(self):
self.window = Tk()
self.window.geometry('{}x{}'.format(400, 400))
self.window.grid_rowconfigure(0, weight=1)
self.window.grid_rowconfigure(1, weight=3)
self.window.grid_columnconfigure(0, weight=1)
frame = Frame(self.window, background="pink")
frame.grid(row=1, column=0, sticky="nsew")
for row in range(4):
frame.grid_rowconfigure(row, weight=1)
for column in range(4):
frame.grid_columnconfigure(column, weight=1)
# add buttons
for i in range(4):
for j in range(4):
button = Button(frame, text=str(4*i + j + 1))
button.grid(row=i, column=j, sticky=N+E+S+W)
self.window.mainloop()
def main():
app = Application()
main()
With this example, row 0 (zero) in the root window can be used for anything you want. Tkinter will try its best to always make that part of the GUI 1/4 the height of the window. I recommend putting a frame in that row, and then any other widgets inside that frame.

Disable tree view from filling the window after update

I have very simple grid layout with two columns, where first column should display some text, and the second to show tree view:
#! python3
from random import randint
import tkinter as tk
from tkinter import ttk
from tkinter.constants import *
class Application(ttk.Frame):
def __init__(self, root):
self.root = root
self.root.resizable(0, 0)
self.root.grid_columnconfigure(0, weight=1)
self.root.grid_columnconfigure(1, weight=3)
self.init_widgets()
self.arrange_grid()
def init_widgets(self):
self.text_frame = ttk.Labelframe(self.root, text='Info')
self.button = ttk.Button(self.root, text='Process', command=self.on_button)
self.tree = ttk.Treeview(self.root)
self.scroll = ttk.Scrollbar(self.root, orient=HORIZONTAL, command=self.tree.xview)
self.tree.configure(xscrollcommand=self.scroll.set)
def arrange_grid(self):
self.text_frame.grid(row=0, sticky=NSEW)
self.button.grid(row=0, sticky=N, pady=32)
self.tree.grid(row=0, column=1, sticky=NSEW)
self.scroll.grid(row=0, column=1, sticky=(S, W, E))
def on_button(self):
headers = list(range(20))
rows = [[randint(0, 100)] * len(headers) for i in headers]
self.tree["columns"] = headers
for i, row in enumerate(rows):
self.tree.insert("", i, values=row)
if __name__ == '__main__':
root = tk.Tk()
app = Application(root)
root.mainloop()
When I click on a "Process" button, tree view is populated with data, but at the same time it resizes the root window and fills whole space.
How can I instruct ttk tree view, to remain it's size after populating with data?

The treeview will grow to fit all of its columns, unless constrained by the window. The window will grow to fit all of it children unless you give it a fixed size. What is happening is that you're giving the treeview many columns, causing it to grow. Because it grows, the window grows because you haven't constraint its growth.
There are several solutions. Perhaps the simplest solution is to put the tree in a frame so that you can give it an explicit width and height. The key to this is to make the frame control the size of its children rather than the other way around. This is done by turning geometry propagation off.
First, start by creating a frame, and then putting the tree in the frame. We can also put the scrollbar in the frame so that we can treat the tree and scrollbar as a single unit.
self.tree_frame = tk.Frame(self.root, width=400, height=200)
self.tree = ttk.Treeview(self.treeframe)
self.scroll = ttk.Scrollbar(self.tree_frame, orient=HORIZONTAL, command=self.tree.xview)
self.tree.configure(xscrollcommand=self.scroll.set)
Next, add the treeview and scrollbar to the frame. You can use any of pack, place or grid; I find pack superior for a top-to-bottom layout. We also use pack_propagate to turn off geometry propagation (meaning: the frame width and height are honored):
self.tree_frame.pack_propagate(0)
self.scroll.pack(side="bottom", fill="x")
self.tree.pack(side="top", fill="both", expand=True)
With that, you need to modify your arrange_grid to put the frame in the root window, and then ignore the scrollbar since it's already packed in the frame:
def arrange_grid(self):
self.text_frame.grid(row=0, sticky=NSEW)
self.button.grid(row=0, sticky=N, pady=32)
self.tree_frame.grid(row=0, column=1, sticky=NSEW)
Note: you've turned off the ability for the user to resize the window. I recommend avoiding this -- the user usually knows better what size they want the window. Instead, you should configure your GUI to properly resize when the user resizes the window.
Since you're using grid, all you have to do is tell tkinter which rows and columns get any extra space caused by the user resizing the window. Since everything is in a single row, you merely need to give that row a weight:
root.grid_rowconfigure(0, weight=1)

If I'm using grid(), why the widgets don't scale when I resize the window?

I'm using tkinter with Python 3.4 in Windows 7.
I'm positioning in a non-absolute way (I'm not using place, I'm using grid), and therefore, the widgets should scale when I resize the window automatically. Nevertheless, that does not happen, and I'm failing to grasp the point. Here's my code:
import tkinter as tk
class App(tk.Frame):
def __init__(self, master=None):
tk.Frame.__init__(self, master)
self.config()
self.grid()
self.create_widgets()
def config(self):
self.master.title("Pykipedia Explorer")
def create_widgets(self):
self.search_label = tk.Label(self, text="Search: ")
self.search_label.grid(row=0, column=0, sticky=tk.N+tk.SW)
self.search_entry = tk.Entry(self)
self.search_entry.grid(row=0, column=0, padx=60, sticky=tk.N+tk.SW)
self.search_button = tk.Button(self, text="Explore!")
self.search_button.grid(row=0, column=0, padx=232, sticky=tk.SW)
self.content_area = tk.Text(self)
self.content_area.grid(row=1, column=0)
self.content_scroll_bar = tk.Scrollbar(self, command=self.content_area.yview)
self.content_scroll_bar.grid(row=1, column=1, sticky=tk.NW+tk.S+tk.W)
self.content_area["yscrollcommand"] = self.content_scroll_bar.set
self.quit_button = tk.Button(self, text="Quit", command=self.quit)
self.quit_button.grid(row=2, column=0, sticky=tk.SW)
def main():
app = App()
app.mainloop()
return 0
if __name__ == '__main__':
main()
Why??
Also, I've tried to use grid_columnconfigure and grid_rowconfigure just like in this answer, and it fails miserably.

You have several problems in your code that are working together to prevent the widgets from scaling (and by "widgets", I assume you mean the text widget).
First, you use grid to put the instance of App in the root window. However, you haven't set the sticky attribute, so the app won't grow and shrink. If it doesn't grow and shrink, neither will its contents.
Also, because you're using grid, you need to give row zero and column zero a positive weight so that tkinter will allocate extra space to it. However, since this is the only widget in the root window, you can use pack and solve the problem by replacing the call to grid with a call to pack:
self.pack(fill="both", expand=True)
Next, you use grid to add the text widget to the canvas. You haven't used the sticky option, so even if the space allocated to it grows, the widget will stay centered in the space. You need to use the sticky attribute to tell it to "stick" to all sides of the area it is given:
self.content_area.grid(row=1, column=0, sticky="nsew")
Finally, you haven't given any columns any "weight", which tells tkinter how to allocate extra space. When a window managed by grid resizes, any extra space is given to the rows and columns according to their weight. By default a row and column has zero weight, so it does not get any extra space.
To get the text area to grow as the window grows, you need to give column zero and row one a positive weight:
self.grid_rowconfigure(1, weight=1)
self.grid_columnconfigure(0, weight=1)