scrollbar in Top level window created for a canvas is not working and how do I get region of canvas. where canvas size varies with number of buttons in it
I have created frame in tk(root) and one widget in a frame creates Top level window , which has multiple Buttons in a Frame.Number of Button varies with list. That Frame(which has buttons in it) exists in a canvas. My problem is that after putting scroll widget canvas do not moves
from tkinter import *
root = Tk()
root.geometry("500x200")
my_app= Frame(root)
my_app.pack()
my_window = Toplevel(my_app, bg='brown')
my_window.geometry("500x200+300+500")
top_window = Frame(my_window, bd=2, relief=SUNKEN)
top_window.grid_columnconfigure(0, weight=1)
yscrollbar = Scrollbar(top_window)
yscrollbar.grid(row=0, column=1, sticky=N+S)
canvas = Canvas(top_window, bd=0, yscrollcommand=yscrollbar.set)
canvas.config(scrollregion=(0, 0, 500, 1000))
canvas.grid(row=0, column=0, sticky=N+S+E+W)
yscrollbar.config( command = canvas.yview)
top_window.pack()
my_f = Frame(canvas)
def ins_ind(m):
print(m)
results =
["one","two","three","four","five","six","seven","eight","nine","ten"]
ins_list=[]
for ind, result in enumerate(results):
ins=str(result)
ins_list.append(ind)
ins_list[ind] = Button(my_f, text = ins, font='Times 12 bold',
bg='sandy brown',anchor=E, fg="black", command = lambda m=ins:
ins_ind(m) )
ins_list[ind].pack()
my_f.pack()
root.mainloop()
Scroll bar do no moves
For the buttons to move when you scroll the canvas you must put the buttons on the canvas.
Your code puts the buttons on the frame my_f. To put the buttons on the canvas you should use: canvas.create_window(x, y, window=button).
Related
I've made a canvas with two scrollbar and two buttons. But the scrollbar doesn't interact with the buttons inside the canvas.
What I want to make, is whenever I scrolls (for example, scroll down), all buttons in the canvas moves to the opposite direction (in this case, move up), but currently they won't move at all.
ws = Tk()
ws.title('PythonGuides')
frame = Frame(
ws,
width=500,
height=400
)
frame.pack(expand=True, fill=BOTH)
canvas = Canvas(
frame,
bg='#4A7A8C',
width=500,
height=400,
scrollregion=(0, 0, 700, 700)
)
vertibar = Scrollbar(
frame,
orient=VERTICAL
)
vertibar.pack(side=RIGHT, fill=Y)
vertibar.config(command=canvas.yview)
horibar = Scrollbar(
frame,
orient=HORIZONTAL
)
horibar.pack(side=BOTTOM, fill=X)
horibar.config(command=canvas.xview)
canvas.config(width=500, height=400)
canvas.config(
xscrollcommand=horibar.set,
yscrollcommand=vertibar.set
)
example=tkinter.Button(canvas, text="1")
example.grid(row=3, column=5)
example2 = tkinter.Button(canvas, text="2")
example2.grid(row=6, column=7)
canvas.pack(expand=True, side=LEFT, fill=BOTH)
ws.mainloop()
You cannot scroll items of canvas if they are put into the canvas using .grid()/.pack()/.place().
Use .create_window() instead:
...
example = tkinter.Button(canvas, text="1")
canvas.create_window(10, 10, window=example, anchor="nw")
example2 = tkinter.Button(canvas, text="2")
canvas.create_window(50, 50, window=example2, anchor="nw")
...
I'm trying to do a scrollable application with two buttons. Pressing one of those buttons should be put a new button in the Frame, and scroll the widgets inside the frame.
My question is how to put the two buttons in the frame?
when I try to put in the same Frame only I can see one button and only a small part of the other.
How to solve this?
from tkinter import * # from x import * is bad practice
global y
y=0
def _configure_interior(event):
print("hola")
size = (interior.winfo_reqwidth(), interior.winfo_reqheight())
canvas.config(scrollregion="0 0 %s %s" % size)
def newbutton():
buttons=Button(interior, text="Button ")
buttons.pack()
#b2.place(y=50)
root =Tk()
#configuring the Scrollbars
vscrollbar = Scrollbar(root, orient=VERTICAL)
vscrollbar.pack(fill=Y, side=RIGHT)
hscrollbar = Scrollbar(root, orient=HORIZONTAL)
hscrollbar.pack(fill=X, side=BOTTOM)
#setting canvas with scrollbar
canvas = Canvas(root,height=500, width=500, bg="blue",
yscrollcommand=vscrollbar.set,xscrollcommand=hscrollbar.set)
canvas.propagate(0)
vscrollbar.config(command=canvas.yview)
hscrollbar.config(command=canvas.xview)
canvas.pack()
#making a interior scrolleable frame
interior = Frame(canvas,bg='black',height=600,width=600)
interior.pack(side="top", fill="both", expand=True)
#adding some widgets to the Frame
b=Button(interior, text="Button 2",command=newbutton)
b.pack()
b2=Button(interior, text="Button 2",command=newbutton)
b2.pack()
b2.place(x=50,y=50)
interior_id = canvas.create_window(30,30, window=interior,
anchor=NW)
interior.bind('<Configure>', _configure_interior)
root.mainloop()
You have also used pack() to place the interior frame on the canvas, which does not work. I've commentet that line out in the code below. Also I've commented out the b2.place() as you should not use more tham one geometry manager in a frame.
#making a interior scrolleable frame
interior = Frame(canvas,bg='black',height=600,width=600)
#interior.pack(side="top", fill="both", expand=True)
interior_id = canvas.create_window(30,30, window=interior,
anchor=NW)
#adding some widgets to the Frame
b=Button(interior, text="Button 2",command=newbutton)
b.pack()
b2=Button(interior, text="Button 2",command=newbutton)
b2.pack()
#b2.place(x=50,y=50)
The new buttons are now packed into interior.
I want to switch the frame, but not able to do it
1st Page(frame) should have red background color and "Hello" button and Frame size should have 900x650 as window size. When press "Hello" button it should swap to 2nd frame
2nd page (frame) should have green background color and "Hello" button and Frame size should have 900x650 as window size. When press "Hello" button it should swap to 1st frame
import Tkinter as tk
def raise_frame(frame):
print "Inside raise frame"
frame.tkraise()
root = tk.Tk()
root.geometry("900x650+220+20")
root.title("Testing")
frame1 = tk.Frame(root, width=900, height=650, background="red")
frame2 = tk.Frame(root, width=900, height=650, background="green")
B1= tk.Button(frame1, text="Hello", width =10, height=2, command = lambda:raise_frame(frame2)).place (x=200, y=200)
B2= tk.Button(frame2, text="Hello", width =10, height=2, command = lambda:raise_frame(frame1)).place (x=400, y=400)
frame1.pack( )
frame2.pack( )
root.mainloop()
Since you are using pack(), the second frame is placed below the first frame. You can check that by dragging the bottom part of the window. You'll see that there are 2 frames created with the red on the top, and the green on the bottom.
You can use grid() to place the frames on top of each other.
So, replace the lines
frame1.pack()
frame2.pack()
with
frame1.grid(row=0, column=0)
frame2.grid(row=0, column=0)
I would like to arrange the Labels in the canvas one after another. But placement is not coming out as desired.
Below is the function that inserts the labels in the canvas. But the ones in the for loop overlaps. Reason - some labels are larger in size than the other. Hence, I assume that largest size be 80 and do the placements respectively. I would like to change this type of approach. Rather I want the labels to be placed relatively one after the other.
def calculate(*args):
try:
ttk.Label(canvas, text="Result:").place(x=20, y=20)
ttk.Label(canvas, text="Topic:").place(x=20, y=80)
ttk.Label(canvas, textvariable=topic).place(x=200, y=80)
ttk.Label(canvas, text="Environment:").place(x=20, y=120)
ttk.Label(canvas, textvariable=environment).place(x=200, y=120)
ttk.Label(canvas, text="Event Results:").place(x=20, y=160)
inputValue=TextArea.get("1.0","end-1c")
len_max=0
result={}
for s in inputValue.splitlines():
data = MainInstance.searchWithPayload(s)
result[s]=data
if len(s+data) > len_max:
len_max = len(s+data)
i = 190
for key in result.keys():
print(key)
print(result[key])
ttk.Label(canvas, text=key+"\n\n"+result[key], wraplength=800).place(x=20,y = i)
i = i + 80
except ValueError:
pass
Below is the code that integrates the canvas widget. And the calculate button calls the calculate function.
ttk.Button(page2, text="Exit",command=page1.quit).grid(column=2, row=8)
ttk.Button(page2, text="Calculate", command=calculate).grid(column=3, row=8)
canvas = Canvas(root, width=900, height=universal_height)
canvas.grid(column=1, row=0)
root.mainloop()
Actually, there are two parts of the question:
How can I relatively place the label to stop the overlapping?
I tried adding the scroll to the canvas. But the application does not respond and does not pop up.
Code for adding the scrollbar:
canvas=Canvas(root,bg='#FFFFFF',width=300,height=300,scrollregion=
(0,0,500,500))
hbar=Scrollbar(root,orient=HORIZONTAL)
hbar.pack(side=BOTTOM,fill=X)
hbar.config(command=canvas.xview)
vbar=Scrollbar(root,orient=VERTICAL)
vbar.pack(side=RIGHT,fill=Y)
vbar.config(command=canvas.yview)
canvas.config(width=300,height=300)
canvas.config(xscrollcommand=hbar.set, yscrollcommand=vbar.set)
canvas.pack(side=LEFT,expand=True,fill=BOTH)
This is the output that I am getting, wherein the first two labels are getting overlapped.
If you want to scroll the widgets that you put inside the canvas, you need to use canvas.create_window(x, y, window=label) instead of label.place(...).
I suggest you to create a frame, grid all you labels inside it so that you won't have overlapping issues and put the frame inside the canvas using create_window to be able to scroll it:
import tkinter as tk
from tkinter import ttk
def on_resize(event):
"""Resize canvas scrollregion when the canvas is resized."""
canvas.configure(scrollregion=canvas.bbox('all'))
root = tk.Tk()
root.geometry('100x100')
root.columnconfigure(0, weight=1)
root.rowconfigure(0, weight=1)
canvas = tk.Canvas(root)
frame = ttk.Frame(canvas)
# create and grid the labels
for i in range(3):
for j in range(3):
ttk.Label(frame, text="Label %i-%i" % (i, j)).grid(row=i, column=j, padx=10, pady=10)
# put the frame in the canvas
canvas.create_window(0, 0, anchor='nw', window=frame)
# add the scrollbars
vbar = ttk.Scrollbar(root, orient='vertical', command=canvas.yview)
hbar = ttk.Scrollbar(root, orient='horizontal', command=canvas.xview)
canvas.configure(xscrollcommand=hbar.set,
yscrollcommand=vbar.set,
scrollregion=canvas.bbox('all'))
canvas.grid(row=0, column=0, sticky='eswn')
vbar.grid(row=0, column=1, sticky='ns')
hbar.grid(row=1, column=0, sticky='ew')
canvas.bind('<Configure>', on_resize)
root.mainloop()
Is there a way using Tkinter to have buttons so that they are always placed a certain number of pixels from the edge of the window, even when the window is resized? I've tried using anchors but that didn't seem to move the placement in the window that much.
You can anchor buttons or any other widget to the sides of a window by starting with a Frame, and configuring its rows and columns to have a weight of 1 in order for it to fill the parent window.
import Tkinter as tk
import ttk
root = tk.Tk()
frame = ttk.Frame(root)
frame.pack(fill=tk.BOTH, expand=True)
frame.columnconfigure(index=0, weight=1)
frame.columnconfigure(index=2, weight=1)
frame.rowconfigure(index=0, weight=1)
frame.rowconfigure(index=2, weight=1)
Then, for each button you want to use sticky to anchor it to the respective side, and use padx or pady to add some padding (in pixels) between the button and the window.
top_padding = 5
top = ttk.Button(frame, text="Top")
top.grid(row=0, column=1, sticky=tk.N, pady=(top_padding, 0))
left_padding = 5
left = ttk.Button(frame, text="Left")
left.grid(row=1, column=0, sticky=tk.W, padx=(left_padding, 0))
right_padding = 5
right = ttk.Button(frame, text="Right")
right.grid(row=1, column=2, sticky=tk.E, padx=(0, right_padding))
bottom_padding = 5
bottom = ttk.Button(frame, text="Bottom")
bottom.grid(row=2, column=1, sticky=tk.S, pady=(0, bottom_padding))
root.mainloop()
have you tried using the padx function?
it works like this:
button=Button(place,text="something something", padx=10)
it provides with extra horizontal padding between widgets, aditionally, you could use frames with padx and an anchor so the text is fixated to a position