Related
I'm making a game based off of the periodic table with tkinter. I made the particle frame just fine, so I decided to copy the code and reuse it for the element frame, changing only the variable names. But for some reason, even though the particle frame works just fine, nothing shows up for the element frame. Here is my full code:
# Boilerplate
import random
import periodictable as pt
from tkinter import *
root = Tk()
root.title('Periodic Table Game')
root.geometry('350x250')
LightBlue = "#b3c7d6"
Menu = Frame(root)
elementFrame = Frame(root)
particleFrame = Frame(root)
settingsFrame = Frame(root)
root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)
for AllFrames in (Menu, elementFrame, particleFrame, settingsFrame):
AllFrames.grid(row=0, column=0, sticky='nsew')
AllFrames.configure(bg=LightBlue)
def show_frame(frame):
frame.tkraise()
show_frame(Menu)
# Menu Frame
Menu.grid_columnconfigure(0, weight=1)
root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)
MenuTitle = Label(Menu, text="Periodic Table Game", font=("Arial", 15), bg=LightBlue)
MenuTitle.grid(row=0, column=0, pady=25)
MenuTitle.grid_rowconfigure(1, weight=1)
MenuTitle.grid_columnconfigure(1, weight=1)
MenuButton1 = Button(Menu, width=25, text="Guess The Particles", command=lambda: show_frame(particleFrame))
MenuButton1.grid(row=1, column=0)
MenuButton2 = Button(Menu, width=25, text="Guess The Element Name", command=lambda: show_frame(elementFrame))
MenuButton2.grid(row=2, column=0, pady=5)
SettingsButton = Button(Menu, width=25, text="Settings", command=lambda: show_frame(settingsFrame))
SettingsButton.grid(row=3, column=0)
# Particle Frame
particleFrame.grid_columnconfigure(0, weight=1)
BackButtonF2 = Button(particleFrame, text='Back', command=lambda: show_frame(Menu))
BackButtonF2.grid(row=0, column=0, sticky=W)
ParticleLabel = Label(particleFrame, text='testing', bg=LightBlue)
ParticleLabel.grid(row=1, column=0, pady=15)
ParticleEntry = Entry(particleFrame)
ParticleEntry.grid(row=2, column=0, pady=10)
ParticleEnter = Button(particleFrame, text='Enter', width=10)
ParticleEnter.grid(row=3, column=0, pady=10)
# Element Frame
elementFrame.grid_columnconfigure(0, weight=1)
BackButtonF3 = Button(particleFrame, text='Back', command=lambda: show_frame(Menu))
BackButtonF3.grid(row=0, column=0, sticky=W)
ElementLabel = Label(particleFrame, text='testing', bg=LightBlue)
ElementLabel.grid(row=1, column=0, pady=15)
ElementEntry = Entry(particleFrame)
ElementEntry.grid(row=2, column=0, pady=10)
ElementEnter = Button(particleFrame, text='Enter', width=10)
ElementEnter.grid(row=3, column=0, pady=10)
root.mainloop()
Why does identical code work only with one frame?
Precisely, because you copied the code you don't spot where the issue is.
When you are defining the element frame widgets you are placing them all into particleFrame.
Example:
BackButtonF3 = Button(particleFrame, text='Back', command=lambda: show_frame(Menu))
should be
BackButtonF3 = Button(elementFrame, text='Back', command=lambda: show_frame(Menu))
Your problem will be solved.
Change this particleFrame, to elementFrame
snippet code:
BackButtonF3 = Button(elementFrame, text='Back', command=lambda: show_frame(Menu))
BackButtonF3.grid(row=0, column=0, sticky=W)
ElementLabel = Label(elementFrame, text='testing', bg=LightBlue)
ElementLabel.grid(row=1, column=0, pady=15)
ElementEntry = Entry(elementFrame)
ElementEntry.grid(row=2, column=0, pady=10)
ElementEnter = Button(elementFrame, text='Enter', width=10)
ElementEnter.grid(row=3, column=0, pady=10)
Screenshot before:
Screenshot after same as elementFrame and particleFrame:
I'm trying to create an app with a frame with two frames inside, but I want one of then to be wider than the other... I found a way to do it using grid, but when I add a scrollbar on one of the frames it readjusts the grid and both frames get the same size.
Here is the code working without the scrollbar:
def __init__(self, master=None):
ctk.set_appearance_mode('system')
ctk.set_default_color_theme('blue')
self.__root = ctk.CTk() if master is None else ctk.CTkToplevel(master)
self.__root. Configure(height=1500, width=944)
self.__root.minsize(1500, 944)
self.__main_container = ctk.CTkFrame(self.__root)
self.__image_frame = ctk.CTkFrame(self.__main_container)
self.__image_frame.configure(height=800, width=1000)
self.__image_canvas = ctk.CTkCanvas(self.__image_frame)
self.__image_canvas.configure(confine="true", cursor="crosshair")
self.__image_canvas.grid(column=0, row=0, sticky="nsew")
self.__image_canvas.bind("<ButtonPress-1>", self.__start_drawing)
self.__image_canvas.bind("<ButtonRelease-1>", self.__end_drawing)
self.__image_canvas.bind("<B1-Motion>", self.__draw_rectangle)
self.__image_frame.grid(column=0, padx=10, pady=20, row=0, sticky="nsew")
self.__image_frame.grid_propagate(0)
self.__image_frame.grid_anchor("center")
self.__image_frame.rowconfigure(0, weight=1)
self.__image_frame.columnconfigure(0, weight=1)
self.__boxes_frame = ctk.CTkFrame(self.__main_container)
self.__boxes_frame.configure(height=800, width=400)
self.__boxes_frame.grid(column=1, padx=10, pady=20, row=0, sticky="ns")
self.__main_container.grid(column=0, padx=20, pady=40, row=0, sticky="ns")
self.__main_container.grid_anchor("center")
self.__main_container.rowconfigure(0, weight=1)
self.__root.grid_anchor("center")
self.__root.rowconfigure(0, weight=1)
self.mainwindow = self.__root
And this is the code when I add the scrollbar and messes the grid
def __init__(self, master=None):
ctk.set_appearance_mode('system')
ctk.set_default_color_theme('blue')
self.__root = ctk.CTk() if master is None else ctk.CTkToplevel(master)
self.__root. Configure(height=1500, width=944)
self.__root.minsize(1500, 944)
self.__main_container = ctk.CTkFrame(self.__root)
self.__image_frame = ctk.CTkFrame(self.__main_container)
self.__image_frame.configure(height=800, width=1000)
self.__image_canvas = ctk.CTkCanvas(self.__image_frame)
self.__image_canvas.configure(confine="true", cursor="crosshair")
self.__image_canvas.grid(column=0, row=0, sticky="nsew")
self.__image_canvas.bind("<ButtonPress-1>", self.__start_drawing)
self.__image_canvas.bind("<ButtonRelease-1>", self.__end_drawing)
self.__image_canvas.bind("<B1-Motion>", self.__draw_rectangle)
#------ adding the scrollbar -----
self.__image_frame_vertical_scrollbar = ctk.CTkScrollbar(self.__image_frame, orientation="vertical")
self.__image_frame_vertical_scrollbar.grid(column=1, row=0, sticky="ns")
self.__image_frame_vertical_scrollbar.configure(command=self.__image_canvas.yview)
self.__image_canvas.configure(yscrollcommand=self.__image_frame_vertical_scrollbar.set)
#---------------------------------
self.__image_frame.grid(column=0, padx=10, pady=20, row=0, sticky="nsew")
self.__image_frame.grid_propagate(0)
self.__image_frame.grid_anchor("center")
self.__image_frame.rowconfigure(0, weight=1)
self.__image_frame.columnconfigure(0, weight=1)
self.__boxes_frame = ctk.CTkFrame(self.__main_container)
self.__boxes_frame.configure(height=800, width=400)
self.__boxes_frame.grid(column=1, padx=10, pady=20, row=0, sticky="ns")
self.__main_container.grid(column=0, padx=20, pady=40, row=0, sticky="ns")
self.__main_container.grid_anchor("center")
self.__main_container.rowconfigure(0, weight=1)
self.__root.grid_anchor("center")
self.__root.rowconfigure(0, weight=1)
self.mainwindow = self.__root
What is wrong with the grid definition that is messing things up? How can I set the __image_frame grid to it fills the __main_container keeping the desired dimensions?
Set the size of the canvas explicitly
self.__image_canvas = ctk.CTkCanvas(self.__image_frame, width=900)
I did search for a lot of examples before posting but still can't properly use the tkinter grid.
What I want:
my code:
import tkinter as tk
from tkinter import ttk
root = tk.Tk()
b1 = ttk.Button(root, text='b1')
b1.grid(row=0, column=0, sticky=tk.W)
e1 = ttk.Entry(root)
e1.grid(row=0, column=1, sticky=tk.EW)
t = ttk.Treeview(root)
t.grid(row=1, column=0, sticky=tk.NSEW)
scroll = ttk.Scrollbar(root)
scroll.grid(row=1, column=1, sticky=tk.E+tk.NS)
scroll.configure(command=t.yview)
t.configure(yscrollcommand=scroll.set)
root.columnconfigure(0, weight=1)
root.columnconfigure(1, weight=1)
root.rowconfigure(1, weight=1)
root.mainloop()
The quick and simple solution is to define the columnspan of the treeview. This will tell the treeview to spread across 2 columns and allow the entry field to sit next to your button.
On an unrelated note you can use strings for your sticky so you do not have to do things like tk.E+tk.NS. Instead simply use "nse" or whatever directions you need. Make sure thought you are doing them in order of "nsew".
import tkinter as tk
from tkinter import ttk
root = tk.Tk()
b1 = ttk.Button(root, text='b1')
b1.grid(row=0, column=0, sticky="w")
e1 = ttk.Entry(root)
e1.grid(row=0, column=1, sticky="ew")
t = ttk.Treeview(root)
t.grid(row=1, column=0, columnspan=2, sticky="nsew") # columnspan=2 goes here.
scroll = ttk.Scrollbar(root)
scroll.grid(row=1, column=2, sticky="nse") # set this to column=2 so it sits in the correct spot.
scroll.configure(command=t.yview)
t.configure(yscrollcommand=scroll.set)
# root.columnconfigure(0, weight=1) Removing this line fixes the sizing issue with the entry field.
root.columnconfigure(1, weight=1)
root.rowconfigure(1, weight=1)
root.mainloop()
Results:
To fix your issue you mention in the comments you can delete root.columnconfigure(0, weight=1) to get the entry to expand properly.
Thanks for taking time to look at this. I've been struggling with this for almost a week and its driving me crazy.
I have a horizontal Paned Window which is supposed to stretch from the bottom of my toolbar to the bottom of my window, but it's sticking only to the bottom of the root window. Eventually I want to have a Treeview widget in the left pane and thumbnails in the right pane.
Can anyone help me to get the Paned Window to stick NSEW? Do I need to put it inside another frame?
I'm using Python 2.7 on Windows 7. (This isn't my whole program, just a sample to demonstrate the problem.)
#!/usr/bin/env python
# coding=utf-8
from Tkinter import *
from ttk import *
class MainWindow:
def null(self):
pass
def __init__(self):
self.root = Tk()
self.root.geometry("700x300")
self.root.resizable(width=TRUE, height=TRUE)
self.root.rowconfigure(0, weight=1)
self.root.columnconfigure(0, weight=1)
self.menubar = Menu(self.root)
File_menu = Menu(self.menubar, tearoff=0)
self.menubar.add_cascade(label="Pandoras Box", menu=File_menu)
File_menu.add_command(label="Black Hole", command=self.null)
self.root.config(menu=self.menubar)
self.toolbar = Frame(self.root, relief=RAISED)
self.toolbar.grid(row=0, column=0, sticky='NEW')
self.toolbar.grid_columnconfigure(0, weight=1)
self.toolbar.rowconfigure(0, weight=1)
dummy = Button(self.toolbar, text="Tool Button")
dummy.grid(row=0, column=0, sticky='EW')
Find = Label(self.toolbar, text="Search")
Search = Entry(self.toolbar)
Find.grid(row=0, column=5, sticky='E', padx=6)
Search.grid(row=0, column=6, sticky='E', padx=8)
self.info_column = Frame(self.root, relief=RAISED, width=100)
self.info_column.grid(row=0, column=5, rowspan=3, sticky='NSW')
self.info_column.grid_rowconfigure(0, weight=1)
self.info_column.grid_columnconfigure(0, weight=1)
self.rootpane = PanedWindow(self.root, orient=HORIZONTAL)
self.rootpane.grid(row=1, column=0, sticky='NS')
self.rootpane.grid_rowconfigure(0, weight=1)
self.rootpane.grid_columnconfigure(0, weight=1)
self.leftpane = Frame(self.rootpane, relief=RAISED)
self.leftpane.grid(row=0, column=0, sticky='NSEW')
self.rightpane = Frame(self.rootpane, relief=RAISED)
self.rightpane.grid(row=0, column=0, sticky='NSEW')
''' THESE BUTTONS ARE SUPPOSED TO BE INSIDE PANED WINDOW STUCK TO THE TOP!'''
but_left = Button(self.leftpane, text="SHOULD BE IN LEFT PANE UNDER TOOLBAR FRAME")
but_left.grid(row=0, column=0, sticky='NEW')
but_right = Button(self.rightpane, text="SHOULD BE IN RIGHT PANE UNDER TOOLBAR FRAME")
but_right.grid(row=0, column=0, sticky='NEW')
self.rootpane.add(self.leftpane)
self.rootpane.add(self.rightpane)
self.SbarMesg = StringVar()
self.label = Label(self.root, textvariable=self.SbarMesg, font=('arial', 8, 'normal'))
self.SbarMesg.set('Status Bar:')
self.label.grid(row=3, column=0, columnspan=6, sticky='SEW')
self.label.grid_rowconfigure(0, weight=1)
self.label.grid_columnconfigure(0, weight=1)
self.root.mainloop()
a = MainWindow()
Short answer: the space you see between the buttons and the toolbar frame is because you allow the row containing the toolbar to resize, instead of the row containing the PanedWindow... To get what you want, replace:
self.root.rowconfigure(0, weight=1)
with
self.root.rowconfigure(1, weight=1)
Other comments:
Try to avoid wildcard imports. In this case, it makes it difficult to differentiate between tk and ttk widgets
To allow resizing of widgets aligned using grid(), .rowconfigure(..., weight=x) must be called on the widget's parent not the widget itself.
background colors are very useful to debug alignment issues in tkinter.
Code:
import Tkinter as tk
import ttk
class MainWindow:
def __init__(self):
self.root = tk.Tk()
self.root.geometry("700x300")
self.root.resizable(width=tk.TRUE, height=tk.TRUE)
self.root.rowconfigure(1, weight=1)
self.root.columnconfigure(0, weight=1)
self.toolbar = tk.Frame(self.root, relief=tk.RAISED, bg="yellow")
self.toolbar.grid(row=0, column=0, sticky='NEW')
self.toolbar.columnconfigure(0, weight=1)
dummy = ttk.Button(self.toolbar, text="Tool Button")
dummy.grid(row=0, column=0, sticky='EW')
Find = tk.Label(self.toolbar, text="Search")
Search = ttk.Entry(self.toolbar)
Find.grid(row=0, column=5, sticky='E', padx=6)
Search.grid(row=0, column=6, sticky='E', padx=8)
self.info_column = tk.Frame(self.root, relief=tk.RAISED, width=100, bg="orange")
self.info_column.grid(row=0, column=5, rowspan=2, sticky='NSW')
self.rootpane = tk.PanedWindow(self.root, orient=tk.HORIZONTAL, bg="blue")
self.rootpane.grid(row=1, column=0, sticky='NSEW')
self.leftpane = tk.Frame(self.rootpane, bg="pink")
self.rootpane.add(self.leftpane)
self.rightpane = tk.Frame(self.rootpane, bg="red")
self.rootpane.add(self.rightpane)
''' THESE BUTTONS ARE SUPPOSED TO BE INSIDE PANED WINDOW STUCK TO THE TOP!'''
but_left = ttk.Button(self.leftpane, text="SHOULD BE IN LEFT PANE UNDER TOOLBAR FRAME")
but_left.grid(row=0, column=0, sticky='NEW')
but_right = ttk.Button(self.rightpane, text="SHOULD BE IN RIGHT PANE UNDER TOOLBAR FRAME")
but_right.grid(row=0, column=0, sticky='NEW')
self.label = tk.Label(self.root, text="Status:", anchor="w")
self.label.grid(row=3, column=0, columnspan=6, sticky='SEW')
self.root.mainloop()
a = MainWindow()
I have this code, which should work, but for some reason actionFrame and infoFrame are put underneath each other...
from tkinter import *
root = Tk()
root.title("TNT Manager")
root.configure(background='grey')
root.grid_rowconfigure(0,weight=1)
root.grid_columnconfigure(0,weight=1)
plannerFrame = Frame(root, bg='grey')
plannerFrame.grid(row=0, column=0, sticky='NSEW')
plannerFrame.grid_rowconfigure(0, weight=15)
plannerFrame.grid_rowconfigure(1, weight=1)
plannerFrame.grid_columnconfigure(0, weight=5)
plannerFrame.grid_columnconfigure(1, weight=2)
actionFrame = Frame(plannerFrame, width=500, height=400)
actionFrame.grid_propagate(0)
actionFrame.grid(row=0, column=0, sticky="NSEW", padx=1,pady=1)
infoFrameWid(actionFrame) #for now just adds text widget inside frame
infoFrame = Frame(plannerFrame, width=200, height=400)
infoFrame.grid_propagate(0)
infoFrame.grid(row=0, column=1, sticky="NSEW", padx=1, pady=1)
infoFrameWid(infoFrame)
saveFrame = Frame(plannerFrame)
infoFrame.grid(row=1, column=0, padx=1, pady=1)
The problem I have is the infoFrame widget is going above the actionframe widget. They are on the same row. If you take away the saveframe widget it works fine.
you have to change atlast
saveFrame = Frame(plannerFrame)
infoFrame.grid(row=1, column=0, padx=1, pady=1)
to
saveFrame = Frame(plannerFrame,width=700, height=400)
saveFrame.grid(row=1, column=0, padx=1, pady=1)