Make a treeview scrollable at a custom number of rows - python

In this treeview, I want to store rows with a rowheight of 500 (for example). As you can see I have attached a scrollbar which allows the Treeview to be scrollable, however the Treeview is not scrollable. I believe this is due to the treeview requiring a certain amount of rows before being scrollable, despite if it is impossible to see the next row.
# Components for PatrolOverview
POStyle=ttk.Style()
POStyle.configure('POStyle.Treeview', rowheight=500)
PatrolView = ttk.Treeview(PatrolOverview,style='POStyle.Treeview')
PatrolTitleLabel = tk.Label(PatrolOverview, text="Patrol Overview", font=TitleFont, bg="white")
PatrolTitleLabel.grid(row=1, column=1, columnspan=5)
PatrolView["columns"] = ("image", "patrolname", "patrolleader", "patrolaleader", "score")
PatrolView.grid(row=2, column=1)
PatrolView.heading("patrolname", text="Patrol Name", anchor="w")
PatrolView.column("patrolname", anchor="center", width=70)
PatrolView.heading("patrolleader", text="Patrol Leader", anchor="w")
PatrolView.column("patrolleader", anchor="center", width=70)
PatrolView.heading("patrolaleader", text="Assistant Patrol Leader", anchor="w")
PatrolView.column("patrolaleader", anchor="center", width=70)
PatrolView.heading("score", text="Patrol Score", anchor="w")
PatrolView.column("score", anchor="center", width=70)
PatrolView.grid(row=2, column=1, columnspan=5)
PatrolViewScrollbar = ttk.Scrollbar(PatrolOverview, orient="vertical", command=PatrolView.yview)
PatrolView.configure(yscroll=PatrolViewScrollbar.set)
PatrolViewScrollbar.grid(row=2, column=6, sticky="ns")
Since I am using the .grid method, I cannot give an accurate pixel measurement of the treeview, so here is a screen cap.
As seen in the image, the treeview only shows one row (should be three) and the scrollbar is not working.

Related

tkinter scrollbar alignment within LabelFrame

I want to display images on a Canvas within a Frame. For that I want the Canvas to have a Scrollbar. So I created a LabelFrame and assigned a Canvas for it:
wrapper1 = LabelFrame(self.root)
wrapper1.grid(row=1, columnspan=6, sticky="WE")
image_canvas = Canvas(wrapper1)
image_canvas.grid(sticky="NS")
Then I tried to add the Scrollbar:
yscrollbar = Scrollbar(wrapper1, orient="vertical", command=image_canvas.yview)
yscrollbar.grid(sticky="SNE", row=0, column=6)
image_canvas.configure(yscrollcommand=yscrollbar.set)
image_canvas.bind("<Configure>", lambda e: image_canvas.configure(scrollregion=image_canvas.bbox("all")))
All of it works apart from the fact that the Scrollbar doesn't properly stick to the right edge of the Frame:
As you can see it's rather in the middle. I also tried the same thing with buttons to no avail. Prior to this I also set up some buttons on self.root. I don't know if they mess up the grid somehow, as they are not in the LabelFrame:
BrowseButton = Button(self.root, text="Test1", command=self.browse)
BrowseButton.grid(row=3, column=0, sticky="WE")
ConvertButton = Button(self.root, text="Test2", command=self.search)
ConvertButton.grid(row=3, column=5, sticky="WE")
SimilarImages = Button(self.root, text="Test3", command=self.compare)
SimilarImages.grid(row=2, column=5, sticky="WE")
How do you make the Scrollbar stick correctly to the right side, while also filling out the whole Frame vertically?

Put a grid vertical line between columns in the middle of the window in Python Tkinter

It's a little complicated, but I'll try my best to explain:
let's say that for example, I have a grid with 4 labels when I have 2 rows and 2 columns (see image below). I'm trying to make the vertical line between columns 1 and 2 (red line in the image) to be the line that splits the window into two equal halves.
You can see a sample of my initial code below.
Edit: note that the elements are labels just for example, but in my original code they are actually all different (some are frames, some images, some buttons, etc)
import tkinter as tk
root = tk.Tk()
label1 = tk.Label(root, text=1, width=8, height=2, bg="red")
label1.grid(row=0, column=0)
label2 = tk.Label(root, text=2, width=10, height=3, bg="green")
label2.grid(row=0, column=1)
label3 = tk.Label(root, text=3, width=5, height=4, bg="blue")
label3.grid(row=1, column=0)
label4 = tk.Label(root, text=4, width=6, height=2, bg="yellow")
label4.grid(row=1, column=1)
root.mainloop()
This code makes the vertical and horizontal center lines of each label perfect as I wanted, but the vertical line between columns 1 and 2 (red line in image) is nowhere near to be the center of the window.
Then, I have tried adding the grid_columnconfigure function to my code:
import tkinter as tk
root = tk.Tk()
root.grid_columnconfigure(0, weight=1) # the line I've added
label1 = tk.Label(root, text=1, width=8, height=2, bg="red")
label1.grid(row=0, column=0)
label2 = tk.Label(root, text=2, width=10, height=3, bg="green")
label2.grid(row=0, column=1)
label3 = tk.Label(root, text=3, width=5, height=4, bg="blue")
label3.grid(row=1, column=0)
label4 = tk.Label(root, text=4, width=6, height=2, bg="yellow")
label4.grid(row=1, column=1)
root.mainloop()
But now I have a different problem, where the columns don't touch each other.
I've also tried to fix the issue by adding the sticky arguments when I'm placing the elements in the grid, and also tried putting every row and every column in their own frame, but all of the solutions did not work out for me.
How can I get this to work? Hope my explanation was clear, and thanks in advance (;
You could just put the four images/labels together into a Frame (or any other container element) and then have that frame horizontally and vertically centered in your root frame with place.
c = tk.Frame(root, bg='white')
c.place(relx=0.5, rely=0.5, anchor='center')
Don't forget to change the parent of the labels from root to c, i.e. Label(c, ...).
Update: But this does not center the line between the red and the green block to the frame. You could combine this with uniform to make the columns equal width, but then there will be some padding between the center and the thinner column...
for n in (0, 1):
c.grid_columnconfigure(n, uniform="foo")
You can use a ttk.Separator widget.
You should use the following code part:
import tkinter.ttk
import tkinter as tk
root = tk.Tk()
---etc---
---etc---
---etc---
tkinter.ttk.Separator(master, orient=VERTICAL).grid(column=1, row=0, rowspan=2, sticky='ns')
root.mainloop()
You can get the grid info of a widget with "grid_info" method.
row = widget.grid_info()['row'] # Row of the widget
column = widget.grid_info()['column'] # Column of the widget
Since there are 2 columns, root.grid_columnconfigure(0, weight=1) only affects the first column.
Try
for n in range(2):
root.grid_columnconfigure(n, weight=1)
or
root.grid_columnconfigure(0, weight=1)
root.grid_columnconfigure(1, weight=1)

Python Tkinter Checkbutton alignment to other widgets

So i have some tkinter checkboxes in a frame widget, which should be aligned to each other. I thought with grid and then using sticky='w' should align them to most east as possible of the column. So to say, to have the checkbox-squares aligned. Instead this happens (the relief is just to see the boundaries of the checkbutton widgets):
Image of GUI
The documentation of the widget - in my opinion - does not provide a function to set this. With the sticky of grid i am not sure whether it should even be the function. Actually the relief shows its sticky in that column...
Here is my code example:
def init_checkboxes(self):
"""
Creates all checkboxes for this particular frame subclass.
"""
self.bvar_cbx_showplots = tk.BooleanVar(value=False)
self.cbx_showplots = tk.Checkbutton(self.lblframe, width=20,
text='Show Plots after run',
variable=self.bvar_cbx_showplots,
relief='groove')
self.cbx_showplots.grid(row=1, column=2, sticky='W')
self.bvar_cbx_saveres = tk.BooleanVar(value=True)
self.cbx_saveres = tk.Checkbutton(self.lblframe, width=20,
text='Save simulation results',
variable=self.bvar_cbx_saveres,
relief='groove')
self.cbx_saveres.grid(row=2, column=2, sticky='W')
edit: Second attempt from Reblochon
Use anchor.
anchor=
Controls where in the button the text (or image) should be located. Use one of N, NE, E, SE, S, SW, W, NW, or CENTER. Default is CENTER. If you change this, it is probably a good idea to add some padding as well, using the padx and/or pady options. (anchor/Anchor)
import tkinter as tk
root = tk.Tk()
bvar_cbx_showplots = tk.BooleanVar(value=False)
cbx_showplots = tk.Checkbutton(root, width=20,
text='Show Plots after run',
variable=bvar_cbx_showplots,
relief='groove', anchor='w')
cbx_showplots.grid(row=1, column=2, sticky='W')
bvar_cbx_saveres = tk.BooleanVar(value=True)
cbx_saveres = tk.Checkbutton(root, width=20,
text='Save simulation results',
variable=bvar_cbx_saveres,
relief='groove', anchor='w')
cbx_saveres.grid(row=2, column=2, sticky='W')
root.mainloop()

Center a button widget in a column using tkinter

I have a Labelframe and inside that LabelFrame, I've placed a button. That button will always appear in the top-left corner of the LabelFrame, though I would like it to center itself within the LabelFrame. What property am I missing that will force this button to center itself inside of the LabelFrame?
self.f1_section_frame=LabelFrame(self.mass_window, text="LOCATIONS", width=300, height=998, padx=5, pady=5, bd=5)
self.f1_section_frame.grid(row=0, rowspan=6, column=1, sticky="nw", padx=(2,0))
self.f1_section_frame.grid_propagate(False)
self.button_frame1 = LabelFrame(self.f1_section_frame, width=275, height=50)
self.button_frame1.grid_propagate(False)
self.button_frame1.grid(row=1, column=0)
self.b1_scoring=Button(self.button_frame1, text="CONFIRM\nLOCATION(S)", height=2, width=10, command=self.initiate_site_scoring, justify="center")
self.b1_scoring.grid(row=0,column=0, pady=(1,0))
Thanks for the response #R4PH43L. I gave that a shot and it didn't seem to change. However, it got me thinking so I removed "grid_propagate" from the frame that encloses my buttons, which then wrapped the frame around the buttons without any space and centered the frame within the column in which IT was placed. Then I used padx=(x,0) on my leftmost button and padx=(0,x) on my rightmost button to add the space needed on the left and right side and it's working how I need it to now.
self.f1_section_frame=LabelFrame(self.mass_window, text="LOCATIONS", width=300,
height=998, padx=5, pady=5, bd=5)
self.f1_section_frame.grid(row=0, rowspan=6, column=1, sticky="nw", padx=(2,0))
self.f1_section_frame.grid_propagate(False)
self.button_frame1 = LabelFrame(self.f1_section_frame, width=275, height=50)
self.button_frame1.grid(row=1, column=0)
self.b1_scoring=Button(self.button_frame1, text="CONFIRM\nLOCATION(S)", height=2, width=10,
command=self.initiate_site_scoring, justify="center")
self.b1_scoring.grid(row=0,column=0, padx=(15,0))
self.b2_scoring=Button(self.button_frame1, text="CLEAR\nSELECTION(S)", height=2,
width=10, command=self.clear_selected_locations)
self.b2_scoring.grid(row=0,column=1)
self.b3_scoring=Button(self.button_frame1, text="UPDATE\nSELECTION(S)", height=2, width=10,
command=self.update_selected_location_details)
self.b3_scoring.grid(row=0,column=2, padx=(0,15))

tkinter frame propagate not behaving?

If you uncomment the options_frame_title you will see that it does not behave properly. Am I missing something? That section was just copied and pasted from the preview_frame_title and that seems to have no issues.
from tkinter import *
blank_app = Tk()
blank_app.geometry('750x500+250+100')
blank_app.resizable(width=False, height=False)
main_frame = Frame(blank_app, width=750, height=500, bg='gray22')
main_frame.grid(row=0, column=0, sticky=NSEW)
main_title = Label(main_frame, text='App Builder', bg='gray', fg='red', font='Times 12 bold', relief=RIDGE)
main_title.grid(row=0, column=0, padx=2, pady=2, sticky=NSEW, columnspan=2)
preview_frame = Frame(main_frame, width=70, height=465, bg='red', highlightcolor='white', highlightthickness=2)
preview_frame.grid(row=1, column=0, padx=2, pady=2, sticky=NSEW)
preview_frame_title = Label(preview_frame, text='Preview Window', width=70, bg='gray', fg='blue', relief=RIDGE)
preview_frame_title.grid(row=0, column=0, sticky=NSEW)
options_frame = Frame(main_frame, width=240, height=465, bg='blue', highlightcolor='white', highlightthickness=2)
options_frame.grid(row=1, column=1, padx=2, pady=2, sticky=NSEW)
options_frame_title = Label(options_frame, text='Widget Options', width=20, bg='gray', fg='blue', anchor=CENTER, relief=RIDGE)
options_frame_title.grid(row=0, column=0, sticky=NSEW)
blank_app.mainloop()
I don't understand what you mean by "behaving properly". It seems to be behaving as it's designed to behave.
By default, tkinter frames are designed to shrink (or grow) to fit their child widgets. When you comment out options_frame_title.grid(...), the frame has no visible children so it says the fixed size that you gave it. When you uncomment that line, it causes a label to be placed in the widget which then causes the frame to shrink to fit.
To further complicate the matters for you, grid will by default give any extra space to rows and columns that have a non-zero weight. Since you haven't given any rows or columns any weight, they don't get any extra space.
Part of the problem is that you are trying to solve too many problems at once. When first starting out you need to be more methodical. Also, you should consider using pack when you're putting a single widget into another widget. It only takes one line of code to get it to fill its parent rather than three with grid.
pro-tip: it really helps if you separate widget creation from widget layout. Your code, even though it's only a couple dozen lines long, is really hard to read.
For example, the first thing you should do is start by creating your top-most frames, and get them to fill and expand/shrink properly before putting any widgets in them.
Starting from scratch
Step 0: don't remove the ability to resize the window
User's don't like having control taken away from them. Remove this line:
blank_app.resizable(width=False, height=False)
Your users will thank you, and during development it's much easier to play with the window to make sure everything is filling, growing, and shrinking as necessary.
Step 1: main_frame
Since it appears this is designed to contain everything, it makes sense to use pack since it is the only widget directly in blank_app.
main_frame = Frame(blank_app, width=750, height=500, bg='gray22')
main_frame.pack(fill="both", expand=True)
With just that (plus the first couple of lines where you create the root window, along with the final call to mainloop), notice how the window is the right size, and the main frame fills the window. You can resize the window all you want and the main frame will continue to fill the whole window.
Step 2: widgets inside main_frame
As I mentioned earlier, it's best to separate widget creation and widget layout. Also, when using grid a good rule of thumb is to always give at least one row and one column a weight. It appears you want the right frame to be about 3x as wide as the left frame. This is where you can use weights.
# widgets in the main frame
main_title = Label(main_frame, text='App Builder', bg='gray', fg='red', font='Times 12 bold', relief=RIDGE)
preview_frame = Frame(main_frame, width=70, height=465, bg='red', highlightcolor='white', highlightthickness=2)
options_frame = Frame(main_frame, width=240, height=465, bg='blue', highlightcolor='white', highlightthickness=2)
# laying out the main frame
main_frame.grid_rowconfigure(1, weight=1)
main_frame.grid_columnconfigure(0, weight=1)
main_frame.grid_columnconfigure(1, weight=3)
main_title.grid(row=0, column=0, padx=2, pady=2, sticky="nsew", columnspan=2)
preview_frame.grid(row=1, column=0, padx=2, pady=2, sticky="nsew")
options_frame.grid(row=1, column=1, padx=2, pady=2, sticky="nsew")
Once again, run the code and notice that as you resize the main window everything still continues to fill the window, and resize properly, and keep the proper proportions. If you don't like the proportions, just change the weights. They can be any number you want. For example, you could use 70 and 240 if you want.
Step 3: preview frame
The preview frame has a label, and I presume you will be putting other stuff under the label. We'll continue to use grid, and just give the row below the label a weight so that it gets all of the extra space. When you add more widgets, you might need to adjust accordingly.
# widgets in the preview frame
preview_frame_title = Label(preview_frame, text="Preview Window", bg='gray', fg='blue', relief=RIDGE)
# laying out the preview frame
preview_frame.grid_rowconfigure(1, weight=1)
preview_frame.grid_columnconfigure(0, weight=1)
preview_frame_title.grid(row=0, column=0, sticky="nsew")
Step 4: the options frame
This is just like the preview frame: a label at the top, and all of the extra space is given to the empty row number 1.
# widgets in the options frame
options_frame_title = Label(options_frame, text='Widget Options', bg='gray', fg='blue', anchor=CENTER, relief=RIDGE)
# laying out the options frame
options_frame.grid_rowconfigure(1, weight=1)
options_frame.grid_columnconfigure(0, weight=1)
options_frame_title.grid(row=0, column=0, sticky="new")
Final thoughs
Notice that you don't need to worry about propagation, which is somewhat of an advanced topic. You also don't have to worry about the size of frames since we're using column weights to give relative sizes, and you don't have to give sizes to their labels.
We have removed the propagation code, removed the non-resizable behavior, and removed some hard-coded widths, giving us less code but more functionality.
Ok after some digging I realized the problem was not with your options_frame_title but with your frames the Label was being placed in.
Of you un-comment options_frame_title and comment out preview_frame_title you will see the exact same problem. What is happening is the frame has a set size and the main window is conforming to that frame size. And when you decide to place a label into the frame then the frame will conform to the label size.
What you want to do to achieve the look you are going for is do something a little different with the .grid_propagate(0) than what you are currently doing.
We also need to add some weights to the correct frames so the widgets will fill properly.
Take a look at this code.
from tkinter import *
blank_app = Tk()
main_frame = Frame(blank_app,width=700, height=300, bg='gray22')
main_frame.grid(row=0, column=0, sticky=NSEW)
main_frame.grid_propagate(0) #the only place you need to use propagate(0) Thought there are better ways
main_frame.columnconfigure(0, weight = 1) #using weights to manage frames properly helps a lot here
main_frame.columnconfigure(1, weight = 1)
main_frame.rowconfigure(0, weight = 0)
main_frame.rowconfigure(1, weight = 1)
main_title = Label(main_frame, text='App Builder', bg='gray', fg='red', font='Times 12 bold', relief=RIDGE)
main_title.grid(row=0, column=0, columnspan=2, padx=2, pady=2, sticky=NSEW)
preview_frame = Frame(main_frame, bg='red', highlightcolor='white', highlightthickness=2)
preview_frame.grid(row=1, column=0, padx=2, pady=2, sticky=NSEW)
preview_frame.columnconfigure(0, weight = 1)# using weights to manage frames properly helps a lot here
preview_frame_title = Label(preview_frame, text='Preview Window', bg='gray', fg='blue', relief=RIDGE)
preview_frame_title.grid(row=0, column=0, sticky=NSEW)
options_frame = Frame(main_frame, bg='blue', highlightcolor='white', highlightthickness=2)
options_frame.grid(row=1, column=1, padx=2, pady=2, sticky=NSEW)
options_frame.columnconfigure(0, weight = 1) #using weights to manage frames properly helps a lot here
options_frame_title = Label(options_frame, text='Widget Options', bg='gray', fg='blue', anchor=CENTER, relief=RIDGE)
options_frame_title.grid(row=0, column=0, sticky=NSEW)
blank_app.mainloop()

Categories

Resources