Create scrollbar in tKinter without displacing widgets to the left (python) - python

I'm creating a program by learning from youtube tutorials (I'm a complete beginner) and I have come to some difficulties. This time, I'm trying to create a scrollbar, and I want my widgets to stay on the center of my window, not the left (I'm following the Codemy.com tutorial on scrollbars).
Here is the current aspect of my program:
with scrollbar
And here is how I want it to look:
without scrollbar
This is my code right now:
import tkinter as tk
root = tk.Tk()
root.geometry("600x400")
my_canvas = tk.Canvas(root)
my_canvas.pack(side = "left", fill = "both", expand = 1)
my_scrollbar = tk.Scrollbar(root, orient = "vertical", command = my_canvas.yview)
my_scrollbar.pack(side = "right", fill = "y")
my_canvas.configure(yscrollcommand = my_scrollbar.set)
my_canvas.bind("<Configure>", lambda e: my_canvas.configure(scrollregion = my_canvas.bbox("all")))
my_frame = tk.Frame(my_canvas)
for i in range(100):
my_label = tk.Label(my_frame, text = "Label")
my_label.pack()
my_canvas.create_window((0,0), window = my_frame, anchor = "nw")
root.mainloop()

Include width = 600, anchor = "nw" in my_canvas declaration.
my_canvas.create_window((0,0), window = my_frame, width = 600, anchor = "nw")

Related

Problem using .pack() and .place() in tkinter python

I want to create a scrollable frame and add some widgets but I have a problem, when I use entry.place() it doesn't show any entry but if I use pack() it works perfectly, any solution?
from tkinter import *
from tkinter import ttk
root = Tk()
root.title("Entry Widgets")
mainframe = Frame(root)
mainframe.pack(fill = "both", expand = True)
canvas = Canvas(mainframe)
canvas.pack(side = "left", fill = "both", expand = True)
scrollbar = Scrollbar(mainframe, orient = "vertical", command = canvas.yview)
scrollbar.pack(side = "right", fill = "y")
canvas.configure(yscrollcommand = scrollbar.set)
frame = Frame(canvas)
frame.pack(fill = "both", expand = True)
y=0
for i in range(50):
entry = Entry(frame)
entry.place(x=0,y=y)
y = entry.winfo_y() + entry.winfo_height() + 5
canvas.create_window((0, 0), window = frame, anchor = 'nw')
frame.update_idletasks()
canvas.configure(scrollregion = canvas.bbox("all"))
root.mainloop()
Edited:
I want to create a scrollable frame and add some widgets but I have a
problem, when I use entry.place() it doesn't show any entry.
You cannot used pack() and place() when doing looping for Entry widget.
Just use grid() for second frame.
In case, you want to use ttk module.
Code:
from tkinter import *
from tkinter import ttk
root = Tk()
root.title("Entry Widgets")
mainframe = ttk.Frame(root)
mainframe.pack(fill = "both", expand = True)
canvas = Canvas(mainframe)
canvas.pack(side = "left", fill = "both", expand = True)
scrollbar = ttk.Scrollbar(canvas, orient = "vertical", command = canvas.yview)
scrollbar.pack(side = "right", fill = "y")
canvas.configure(yscrollcommand = scrollbar.set)
frame = ttk.Frame(root)
frame.pack(fill = "both", expand = True)
for i in range(50):
entry = Entry(frame, width=50)
entry.grid(column=0,row=i+10)
canvas.create_window((0, 0), window = frame, anchor = 'nw')
frame.update_idletasks()
canvas.configure(scrollregion = canvas.bbox("all"))
root.mainloop()
Screenshot:

Python Tkinter - Put Vertical and Horizontal Scrollbar at the edge of the canvas

I want to put the horizontal and vertical scrollbars at the edge of the yellow canvas using Python tkinter, but whatever I do, it does not move and just stay inside the perimeter of the canvas. Why? Below is the image:
Below is the code:
def render_gui(self):
self.main_window = tk.Tk()
self.main_window.geometry("1000x600")
self.main_window.title("Damaged Text Document Virtual Restoration")
self.main_window.resizable(True, True)
self.main_window.configure(background="#d9d9d9")
self.main_window.configure(highlightbackground="#d9d9d9")
self.main_window.configure(highlightcolor="black")
self.main_canvas = tk.Canvas(self.main_window, bg = "yellow")
self.main_canvas.pack(expand = True, fill = "both")
vsb = tk.Scrollbar(self.main_canvas, orient="vertical", command=self.main_canvas.yview)
hsb = tk.Scrollbar(self.main_canvas, orient="horizontal", command=self.main_canvas.xview)
vsb.grid(row=1, column=50,columnspan = 20, sticky='ns')
hsb.grid(row=20, column=1,rowspan = 20,sticky = 'wes')
self.main_canvas.configure(yscrollcommand=vsb.set,xscrollcommand=hsb.set)
self.main_window.mainloop()
Please help.
The problem is that you are putting the scrollbars inside the canvas, and you've put nothing else in the canvas.
When you use grid to put something inside another widget, rows and columns that are empty have a size of zero. Thus, even though you put the vertical scrollbar in column 50, columns 0 and 2-49 have a width of zero so column 50 appears on the left. (Column 1 is the width of the horizontal scrollbar.)
The same is true for the horizontal scrollbar - you're putting it in row 20, but rows 0 and 2-19 have a height of zero, so row 20 appears near the top.
Normally it's not a good idea to put scrollbars inside the canvas, since anything you draw on the canvas might be hidden or partially hidden by the scrollbars. If you want them to appear to be in the canvas, the simplest solution is to put both the canvas and the scrollbars inside a frame. You can then turn the border off on the canvas and turn the border on for the frame.
Example:
import tkinter as tk
class Example():
def render_gui(self):
self.main_window = tk.Tk()
self.main_window.geometry("1000x600")
self.main_window.title("Damaged Text Document Virtual Restoration")
self.main_window.resizable(True, True)
self.main_window.configure(background="#d9d9d9")
self.main_window.configure(highlightbackground="#d9d9d9")
self.main_window.configure(highlightcolor="black")
canvas_container = tk.Frame(self.main_window, bd=1, relief='sunken')
canvas_container.pack(expand = True, fill = "both")
self.main_canvas = tk.Canvas(canvas_container, bg = "yellow")
vsb = tk.Scrollbar(canvas_container, orient="vertical", command=self.main_canvas.yview)
hsb = tk.Scrollbar(canvas_container, orient="horizontal", command=self.main_canvas.xview)
self.main_canvas.configure(yscrollcommand=vsb.set,xscrollcommand=hsb.set)
vsb.grid(row=0, column=1, sticky="ns")
hsb.grid(row=1, column=0, sticky="ew")
self.main_canvas.grid(row=0, column=0, sticky="nsew")
canvas_container.grid_rowconfigure(0, weight=1)
canvas_container.grid_columnconfigure(0, weight=1)
self.main_window.mainloop()
e = Example()
e.render_gui()
The code has the canvas as the parent to the scrollbars.
Setting the scrollbars to have the same parent as the canvas, and changing a few placement things around, renders something workable:
import tkinter as tk
class test:
def __init__(self):
self.render_gui()
def render_gui(self):
self.main_window = tk.Tk()
self.main_window.geometry("1000x600")
self.main_window.title("Damaged Text Document Virtual Restoration")
self.main_window.resizable(True, True)
self.main_window.configure(background="#d9d9d9")
self.main_window.configure(highlightbackground="#d9d9d9")
self.main_window.configure(highlightcolor="black")
self.main_canvas = tk.Canvas(self.main_window, bg = "yellow")
vsb = tk.Scrollbar(self.main_window, orient="vertical", command=self.main_canvas.yview)
hsb = tk.Scrollbar(self.main_window, orient="horizontal", command=self.main_canvas.xview)
hsb.pack(side = "bottom", fill = "x")
vsb.pack(side = "right", fill = "y")
self.main_canvas.pack(expand = True, fill = "both")
self.main_canvas.configure(yscrollcommand=vsb.set,xscrollcommand=hsb.set)
self.main_window.mainloop()
t = test()
from tkinter import *
from tkinter import scrolledtext
janela = Tk()
scroll_x = Scrollbar(janela, orient="horizontal")
text = scrolledtext.ScrolledText(janela, wrap=NONE)
text.config(xscrollcommand=scroll_x.set)
scroll_x.configure(command=text.xview)
text.pack(fill=X)
scroll_x.pack(fill=X)
janela.mainloop()

python GUI tkinter scrollbar not working for canvas

I am learning python GUI with Tkinter. i just created two listbox and populated those in a canvas so that i can configure canvas with scrollbar and those two listbox scroll togather when i scroll canvas. but something is not working.
Here is the structure:
canvas = Canvas(master)
scrollBar = Scrollbar(master)
movieListBox = Listbox(canvas)
statusListBox = Listbox(canvas)
canvas.config(yscrollcommand = scrollBar.set)
movieListBox.config(width = 55)
statusListBox.config(width = 8)
movieListBox.pack(fill = "y", side = "left")
statusListBox.pack(fill = "y", side = "right")
canvas.pack(side = "left", fill = "y", expand = "true")
scrollBar.config(command = canvas.yview)
scrollBar.pack(fill = "y", side = "left")
for i in range(500):
movieListBox.insert(i, "movie name")
statusListBox.insert(i, "downloading")
master.mainloop()
I'm pretty new to tkinter and python myself, but I did find something that works. This is from another question, (I didn't write the code) which was about having two listboxes of different lengths linked to the same scrollbar. If you copy their code (below) you'll see that it works fine for listboxes of equal length. Your question is pretty old, but I hope it helps someone. Cheers.
Where I found this:
Scrolling two listboxes of different lengths with one scrollbar
try:
# Python2
import Tkinter as tk
except ImportError:
# Python3
import tkinter as tk
class App(object):
def __init__(self,master):
scrollbar = tk.Scrollbar(master, orient='vertical')
self.lb1 = tk.Listbox(master, yscrollcommand=scrollbar.set)
self.lb2 = tk.Listbox(master, yscrollcommand=scrollbar.set)
scrollbar.config(command=self.yview)
scrollbar.pack(side='right', fill='y')
self.lb1.pack(side='left', fill='both', expand=True)
self.lb2.pack(side='left', fill='both', expand=True)
def yview(self, *args):
"""connect the yview action together"""
self.lb1.yview(*args)
self.lb2.yview(*args)
root = tk.Tk()
# use width x height + x_offset + y_offset (no spaces!)
root.geometry("320x180+130+180")
root.title("connect 2 listboxes to one scrollbar")
app = App(root)
# load the list boxes for the test
for n in range(64+26, 64, -1): #listbox 1
app.lb1.insert(0, chr(n)+'ell')
for n in range(70+30, 64, -1):
app.lb2.insert(0, chr(n)+'ell') #listbox 2
root.mainloop()

Scrollbar into a python tkinter discussion

from tkinter import *
window = Tk()
ia_answers= "test\n"
input_frame = LabelFrame(window, text="User :", borderwidth=4)
input_frame.pack(fill=BOTH, side=BOTTOM)
input_user = StringVar()
input_field = Entry(input_frame, text=input_user)
input_field.pack(fill=BOTH, side=BOTTOM)
def onFrameConfigure(canvas):
'''Reset the scroll region to encompass the inner frame'''
canvas.configure(scrollregion=canvas.bbox("all"))
canvas = Canvas(window, borderwidth=0, background="white")
ia_frame = LabelFrame(canvas, text="Discussion",borderwidth = 15, height = 100, width = 100)
ia_frame.pack(fill=BOTH, side=TOP)
scroll = Scrollbar(window, orient="vertical", command=canvas.yview)
canvas.configure(yscrollcommand=scroll.set)
scroll.pack(side=RIGHT, fill=Y)
canvas.pack(fill=BOTH, expand=True)
canvas.create_window((4,4), window=ia_frame, anchor="nw")
ia_frame.bind("<Configure>", lambda event, canvas=canvas:onFrameConfigure(canvas))
user_says = StringVar()
user_text = Label(ia_frame, textvariable=user_says, anchor = NE, justify = RIGHT, bg="white")
user_text.pack(fill=X)
ia_says = StringVar()
ia_text = Label(ia_frame, textvariable=ia_says, anchor = NW, justify = LEFT, bg="white")
ia_text.pack(fill=X)
user_texts = []
ia_texts = []
user_says_list = []
ia_says_list = []
def Enter_pressed(event):
"""Took the current string in the Entry field."""
input_get = input_field.get()
input_user.set("")
user_says1 = StringVar()
user_says1.set(input_get + "\n")
user_text1 = Label(ia_frame, textvariable=user_says1, anchor = NE, justify = RIGHT, bg="white")
user_text1.pack(fill=X)
user_texts.append(user_text1)
user_says_list.append(user_says1)
ia_says1 = StringVar()
ia_says1.set(ia_answers)
ia_text1 = Label(ia_frame, textvariable=ia_says1, anchor = NW, justify = LEFT, bg="white")
ia_text1.pack(fill=X)
ia_texts.append(ia_text1)
ia_says_list.append(ia_says1)
input_field.bind("<Return>", Enter_pressed)
window.mainloop()
Hi, I try to build a GUI with tkinter but I've got two problems, the LabelFrame/Canvas doesn't fill entirely the window and I can't get the scrollbar to automatically scroll down.
Can you help me with that, thank you very much.
Ilan Rossler.
You need to manually control the width of the inner frame since it is being managed by the canvas. You can change the width in a binding to the <Configure> event of the canvas (ie: when the canvas changes size, you must change the size of the frame).
You'll need to be able to reference the window object on the canvas, which means you need to save the id, or give it a tag.
Here's an example of giving it a tag:
canvas.create_window((4,4), window=ia_frame, anchor="nw", tags=("innerFrame",))
And here's how to change the width when the canvas changes size:
def onCanvasConfigure(event):
canvas = event.widget
canvas.itemconfigure("innerFrame", width=canvas.winfo_width() - 8)
canvas.bind("<Configure>", onCanvasConfigure)
To scroll down, call the yview command just like the scrollbar does. You need to make this happen after the window has had a chance to refresh.
For example, add this as the very last line in Enter_pressed:
def Enter_pressed(event):
...
canvas.after_idle(canvas.yview_moveto, 1.0)

Python tkinter grid layout problems

I'm creating a very simple UI using Tkinter and python, but I'm having trouble sizing GUI elements and using the grid format to place them correctly. Here's a first-order approximation of what I'm trying to have:
Here's the code I have so far. I keep getting close, but I don't think I really understand what I'm doing. Any help is much appreciated!
#User interface
root = Tk()
window_width = root.winfo_screenwidth()
window_height = root.winfo_screenheight()
root.geometry ("%dx%d"%(window_width,window_height))
menu_bar = Menu(root)
menu = Menu(menu_bar, tearoff=0)
menu.add_command(label="Open", command = open_file)
menu.add_command(label="Save", command = save)
menu.add_separator()
menu.add_command(label="Quit", command = exit)
menu_bar.add_cascade(label="File",menu=menu)
root.config(menu=menu_bar)
#textbox is the window in which the code is written
textbox = Text(root, width=50, height = window_height/20+4)
#canvas is where the car will go
canvas_frame= Frame(root, width = window_width/1.5, height = window_height-200)
canvas_frame.configure(borderwidth=1.5,background='black')
canvas = Canvas(canvas_frame, width = window_width/1.5, height = window_height-200)
#console to print to
console = Text(root, width = int(window_width/1.5), height = 10)
run_button = Button(root, text = "Run", command = lambda:generate_program(textbox.get(1.0,END)))
clear_button = Button(root, text = "Clear text", command = clear)
#add them to frame
textbox.grid(row=0, column=0, rowspan=20, columnspan=10)
run_button.grid(row=21,column=0)
clear_button.grid(row=21,column=1)
canvas_frame.grid(row=0,rowspan=10,column=21,columnspan=25)
canvas.grid(row=0, rowspan=1, column=21, columnspan=25)
console.grid(row = 1, rowspan=1, column = 21, columnspan=25)
root.mainloop()
In my opinion, this is layout can be much easier with the pack geometry manager. One of the problems is that you are trying to make the width and the height of each widget fit in its place with rowspan and columspan options. Also, since canvasis inside a frame, you have to think that it is like inside a new window, so a simple call to canvas.grid() would be enough.
However, with pack() you just have to put textbox, run_button and clear_button inside a new frame:
left_frame = Frame(root)
textbox = Text(left_frame, ...)
run_button = Button(left_frame, ...)
clear_button = Button(left_frame, ...)
canvas_frame= Frame(root, ...)
canvas_frame.configure(borderwidth=1.5,background='black')
canvas = Canvas(canvas_frame, ...)
console = Text(root, ...)
left_frame.pack(side=LEFT)
textbox.pack()
run_button.pack(side=LEFT)
clear_button.pack()
canvas_frame.pack()
canvas.pack()
console.pack()

Categories

Resources