Adding a Full Screen ScrollBar - Python Tkinter GUI Tutorial #96
HTML-код
- Опубликовано: 22 июл 2024
- In this video I'll show you how to add a scrollbar that scrolls your entire tkinter app.
Normally scrollbars are used for listboxes, but what if you just wanted one to run the whole length of your app? Is it possible?
Well...sort of.
We can use a scrollbar on a canvas...and we can hack a canvas to hold a frame, and we can add all of our app stuff into that frame...and that's what I'll show you how to do in this video!
▶️ Watch Entire Tkinter Playlist ✅ Subscribe To My RUclips Channel:
bit.ly/2UFLKgj bit.ly/2IGzvOR
▶️ See More At: ✅ Join My Facebook Group:
Codemy.com bit.ly/2GFmOBz
▶️ Learn to Code at Codemy.com ✅ Buy a Codemy T-Shirt!
Take $30 off with coupon code: youtube1 bit.ly/2VC9WUN
▶️ Get The Code
bit.ly/3fLFQ8p
Sir can we replace button with label here?
Sir i am not able to get the scroll bar even after writing the same code
Thanks..
@@aafiyamemon9535 I got the scroll bar .
@@codeKeshav Woah can u provide me that code plz...
Love the videos! You are always so happy and positive while teaching. Can’t thank you enough!
Your videos are amazing
Don't stop posting it
even though you don't have a lot views
There is people that appreciate your work.
Thank You
Thank you, I will
@@Codemycom YAY
🙂@@Budgie27-v8i
Thanks!! It's sad your channel isn't that popular, you're the best youtube python teacher I've found
Wow, thanks!
same!
agree
SO HELPFUL thank you so much!! spent days looking for an explanation as to how this works and youve pretty much cleared it up for me.. i'll be back!!
Glad you enjoyed it!
So great videos about Python and tkinter! Short and comprehensive, right on point! I like your style, thumbs up 👍💪
Thanks!
Great tutorial.
I searched this guide from long time.
Many thanks for all the videos about Tkinter .
You are an excellent teacher
You're very welcome!
This is exactly what I needed right now. Great tutorial!
Glad it helped!
Damn. Two hours looking at stackoverflow questions couldn't do what 10 minutes watching your video did to help me make this work. Thanks!!!
Happy to help!
I can't thank you enough. Within one week of watching your videos, I was able to make very useful programs. Thanks John!!
Great to hear!
Changed the for loop buttons to text labels and changed colour to match canvas that way hiding them and only display the necessary widgets - works great : thanks !!
INTERESTING!!, FIRST ATTEMPT ON Wednesday, done successfully, Thank you for this nice Tutorial John
Nice
I've learned a lot from you John, i wish i could thank you enough
Thanks for watching!
This man is so great. I always wanted to make my own software and now im doing so. Thank you!
Very happy to hear it!
thank you so much. been looking for this over youtube.
glad you liked it!
Excellent very helpful video for those struggling to get scrolling to work. Thank-you.
welcome!
You make the best vodeos! You every time help me so mutch!! THANKS!! Keep going.
Glad you like them! Tell your friends ;-)
i dont know how i can say this, by you made me a code, now i write logical pogrames, but all i learnt this from you just for free, thank you sir!!!!!!!!!!!!!!!!!!!!!!!😊😊
*coder*
Welcome!@@cyberbashir5416
My friend, the code worked perfectly for my case! Thank you soooo much!
Awesome!
I created scrollbar, it was slightly wrong, I rewatched video and now that's perfect, thank you so much
happy to help!
Thank you. I learned a lot on your tutorials.
Glad to hear that!
Thank you very much for this video, it's just what I needed !
Happy to hear it!
This was what I was looking for. Thank you!
Glad I could help!
Hello John,
Thank you so much for the video. It was very very helpful. However, I have a quick question if you don't mind taking some time to answer it. So after adding the second frame to the window in the canvas and executing the code, you get the result what you have shown. I currently have multiple treeview widgets bound to root window frames which stretch in the horizontal direction upon maximizing the root window to fill the screen. However, when I try adding canvas the way you did and binding these treeview widgets to the second frame, these widgets do not expand anymore when I maximize the root window. Could you please help me on this issue?
I love you! OMG this video was VERY USEFUL! THANK YOU SO MUCH!!!
Glad it helped!
Subscribed! Just what I needed. Thank you.
Glad to hear it!
This was very helpful, thanks!
you. are. a. LIFESAVER! i cant thank you enough for this video
srsly, why cant this be easier?
Welcome! And it is pretty easy when you know how...
Hey there! when I add the scroll bar using this method to my project, I put all my stuff into the Second Frame as you said, but it was left aligned and when I used another screen that was bigger than 1080p, I noticed the misalignment difference.
Also instead of scrolling down, this scrollbar for some reason scrolls up when I try to scroll down.
Definitely its something that I am doing wrong, but can't figure out what.
The left alignment happens to me too
Man you did me a huge favor with this
Happy to help!
I'm trying to create a GUI for my Python program, I chose to use tkinter, without knowing it is so counter intuitive, hard to understand and bad documented. Your videos are being very helpful, you are a life saver
Happy to hear it!
Amazing video. Thank you!
Hello Sir, I tried this code and it worked. However, when I apply it to the code I have written few days ago, I wasn't able to get it to work.
My code has some frames in it and those frames have some labels and images. So I changed placed the frames into the second frame. Doing this however does not work Does using place instead of pack and grid for the frames I have affect the result. Just some additional information, I use place because I find relx, rely, relwidth, and relheight very useful in layouting a program.
Any help will be appreciated
Thank you !
Now it's clear to my mind
Most welcome
Love this video Yo !
Great video, teacher!
Thanks!
How can i make the scroll bar configured to the mouse scroll ?
I see no answers anywhere on youtube for this and not much on google for what i want to do with a scale widget, all i know is it involves event.delta /120 , i'd be interested to know if you found out the best way to make it work, I like this channel but think its abit too advanced for a free tutorial , i want to bind it to the scale widget as a zoom feature for an image viewer
@@Dale90ART Check Momo's comment below. It worked well for me
@@Rodrigo-me6nq Thanks g, just putting it here too in case anyone else doesn't see in the future:
If anyone wants to use the mouse wheel to scroll, place this code after binding the canvas and scroll bar:
def _on_mouse_wheel(event):
my_canvas.yview_scroll(-1 * int((event.delta / 120)), "units")
my_canvas.bind_all("", _on_mouse_wheel)
You can lower the 120 to increase scroll speed.
@@Momo-bb2fn thank you so much :)
@@frozenmolasses5932 you’re very welcome :)
Awesome ! It added life to my program. ☺️
Nice!
You deserve all the best!
thanks
If you dont want to type copy this
class scrolbar:
def _on_mouse_wheel(self,event):
self.canvas.yview_scroll(-1 * int((event.delta / 120)), "units")
def __init__(self,Master,bg="orange red"):
self.master = Master
self.bg = bg
self.canvas = Canvas(self.master,bg=self.bg)
self.canvas.pack(side=LEFT,fill=BOTH,expand=TRUE)
self.scroller = ttk.Scrollbar(self.master,orient=VERTICAL,command=self.canvas.yview)
self.scroller.pack(side=RIGHT,fill=Y)
self.canvas.configure(yscrollcommand=self.scroller.set)
self.canvas.bind('',lambda e: self.canvas.configure(scrollregion=self.canvas.bbox("all")))
self.frame = Frame(self.canvas,bg=self.bg,padx=10,pady=10)
self.canvas.create_window((0,0),window=self.frame,anchor=NW)
self.frame.bind_all("", self._on_mouse_wheel)
Thank you, this was so helpful!!
Glad it was helpful!
Well done, this helped me a lot
Glad it helped!
I love your videos!
Thanks!
I owe you a beer at least, your videos are the best!
Thanks!
Muchas gracias por tu esfuerzo, espero algún día encontrar videos de tanta ayuda en mi idioma.
thank you so much, finally a good explain for that.
Glad it helped!
I have 1 little problem with this code. When I create list of widgets on all window and there is a little widgets - so basically they do not need scrolling, its still scrolling. So I have 3 label widgets that I want present as list scrolling over the empty screen down and up. Is there a way to avoid it? Make it scroll ONLY if it's exceed the screen damention?
Thanks John, much appreciated!
You're welcome!
Sir,how to relatively change the origin x,y of a canvas after being scrolled??i'm stucked in a problem
WOW!!! It really helped me a lot. I solved the problem that was not solved. [from: a Korean]
Nice
I have another question that to maximize the window I am using
window = Tk()
window.state('zoomed')
But issue is the scroll bar. When the window opens there is no scroll bar but when I click the maximize button in top right corner then the scroll bar appears and also works fine. I think there would be the issue of focus. I need to give focus to the scroll bar but I don't know how can give it. If I remove the zoomed state then scroll bar also works fine but I need to maximize it to full screen with top and task bar present. That is why I am using state zoom. Please help me in this regard. Thank you
How can I centre the buttons in both window's views minimized and maximized?
Thank you! It works.
Thank you so much!! I'm however struggling to add both vertical and horizontal scrollbar at the same time. How to do that?
You are the best teacher John! I recently bought your entire Codemy course, and I'm loving it. I have a question though, and I haven't been able to find an answer anywhere. I have managed to add a scrollbar to my app. However since a new scrollable background is a frame, that means all labels and text will have an ugly gray outline around them. I can't change that, as I'm using an image as a background. On the other hand, Canvas allows us to use images as background. Is there a way to make Canvas itself scrollable? And if so, how to make the background image stretch downwards? I hope that my question is clear. Thanks!!
Can I add stuff like labels etc to that? I have been trying to apply this code to my programm but it doesnt display anything.
Very Interactive video and teaching 😍😍
Glad you liked it
Sir i tried in your code in my project.
but scroolbar area is not upadting for the widget added at the runtime.
but if i resize the window it gets updated.
can you sugest a way to update the scrollbar area every time the new widget is added
Thanks. this solved my problem :)
Welcome
Excellent, thank you very much!
Welcome!
Ok in theory, then the true point about it, it's to include frame within and make them fit the size of the window and keep update stuff added within this canvas, so you stop just before things go wild but useful. ty anyway, nice video.
Is there a way to expand the inner frame to fill canvas width? I tried packing inner frame with fill x and expand 1 but it doesn't work
Dude, you rock!
ha, thanks!
t tave app that will show data from API url calls. The app is 2 side by side frames. Left frame is details to run the api calls and the right frame (output frame) has the canvas displayed. I'm assuming my next step is to add the label for displaying the result and then scroll the canvas?? I don't have to create a new frame??
hey after adding a scrollbar successfully I am unable to add image as a background any suggestions
How could I put the scrollbar using place() option cause all my rest widgets have been placed using that
class ScrollableFrame:
"""
# How to use class
from tkinter import *
obj = ScrollableFrame(master,height=300 # Total required height of canvas,width=400 # Total width of master)
objframe = obj.frame
# use objframe as the main window to make widget
"""
def __init__ (self,master,width,height,mousescroll=0):
self.mousescroll = mousescroll
self.master = master
self.height = height
self.width = width
self.main_frame = Frame(self.master)
self.main_frame.pack(fill=BOTH,expand=1)
self.scrollbar = Scrollbar(self.main_frame, orient=VERTICAL)
self.scrollbar.pack(side=RIGHT,fill=Y)
self.canvas = Canvas(self.main_frame,yscrollcommand=self.scrollbar.set)
self.canvas.pack(expand=True,fill=BOTH)
self.scrollbar.config(command=self.canvas.yview)
self.canvas.bind('', lambda e: self.canvas.configure(scrollregion = self.canvas.bbox("all")))
self.frame = Frame(self.canvas,width=self.width,height=self.height)
self.frame.pack(expand=True,fill=BOTH)
self.canvas.create_window((0,0), window=self.frame, anchor="nw")
self.frame.bind("", self.entered)
self.frame.bind("", self.left)
def _on_mouse_wheel(self,event):
self.canvas.yview_scroll(-1 * int((event.delta / 120)), "units")
def entered(self,event):
if self.mousescroll:
self.canvas.bind_all("", self._on_mouse_wheel)
def left(self,event):
if self.mousescroll:
self.canvas.unbind_all("")
You sir, are the best.
Wow, thanks!
In same code if we set the range upto 1000 in for loop then the buttons display till 711 button only is there any solution for this?
I used this scrollbar and it works well, except that the scrollbar always orients itself at the bottom of the screen. Is there a way to have the scrollbar always start at the top of the screen?
This was a nice tutorial....YO!!
Thanks!
Smash that like button guys n gals! its free! great python tkinter tutorial, Codemy. Thanks
hi sir its really nice to see your tuterials and your smile make evrey thing is easy to do , ive question
how can i make an auto scroll txt let say that we hat txt stream and data keep flow how can i fouces to see the last line while update ... thx
where can i get your code which you have used in this video.
amazing tutorial, it all works in my project. however, is there a way to have the scrolll bar not soo far right of the screen, i would like to have it closer to my widgets. again amazing tutorial thankyou! :)
I use grid to place everything on the screen. My app has 3 columns with widgets and many rows. When I scroll, it lags by erasing them.
sir how to join background image with full-screen scrollbar when joining background image with full-screen scrollbar background image was going upper help me sir
yes the code worked perfectley but the second frame is not the size of the canvas and thats why i am not able to label text in the right side, any way ?
Hi John, same code i tried for 2000 box it didnt capture all the boxes when i scrolled down, can u pls help on that. Thanks..
I successfully created a scrollbar for my program, but before adding the scrollbar i was using the .pack(fill=tk.X) to make my widgets expand horizontally once i added the scrollbar my widgets no longer expand to the size of the frame. Any ideas on how to fix this issue.
I have the same problem :(
Once again, thanks!
its working thanks buddy
welcome
no one will ever know how much i appreciate this gentleman for all the knowledge he shared in this one youtube channel for a "reasonable" prices, and the vibes, i love it.
but now you know...
how to do the same with labels(horizontal label ) in loop in a frame(frame will show 3 labels at a time and to see rest we have to scroll) with scroll bar(vertical)?---not tree view(I will use tree view in admin part)
Hi! I was wondering, if we add a new widget during run-time, woul the scrollbar adjust to be able to scroll all the way down to that new widget?
give it a try and see :-p
Thanks! Really helpfull :D
Glad it helped!
video, great, how do you make numbers like the one that accompanies expand=1 look purple in sublime?
It does it automatically by default. Just save the file as a .py file
Wow.. amazing it worked to me finally..
but how can i scroll up and down only by the mouse without selecting and moving the scrollbar itsself?
this is great, thank you so much
Very welcome!
sir kindly tell me the way to use place method in instead of pack or grid.
#it's urgent
I'm trying to add the scroll bar for my frame which only has labels. For the labels, I've used the .place method to align them in the frame, but for some reason this causes them to not show up when adding the scroll bar. I double checked and can confirm they show up when I place them in the frame with the .grid method but I'd rather use .place as it lets me better align labels of different length - Any reason why I'm having issues with .place here?
Sir please make a video on Treeview widget.
I am in 9th grade and I learnt a lot from you. Thanks.
I plan on doing that soon
Great video, everything worked perfectly!
I am using images for each of my buttons to make them look a bit more customized, but when scrolling they become a little distorted and smear a bit. Does anyone have any solutions to this?
It's just the frame updating, it has to run a loop every time. Try to use smaller res images, lighter file formats or SVGs
I did all these instructions, and it is working. But when I delete some widgets, the scrollbar does not resize automatically.... how can I do it?
It works, and I get the parts. Yet, there's something I don't quite understand about this. I couldn't implement it in sort of a free form way, I had to follow pretty close. I guess there's a chance I just tripped on something syntactic somewhere, or something like that. You're right, though, it's a little bit convoluted.
I get a lot of none types, which I think means I'm not passing things quite correctly. Arguments and events have to be in order in terms of how the functions are defined in tkinter - I don't exactly want to learn all of python, but I appreciate that those things are generally accessible when I need them.
It gets easier with practice.
how can we change color of scrollbar?? can u show a method ...pls help
Awesome !, thanks a lot
welcome!
Thanks! But, how do I make both the scrolls, left to right and up to down?
I cover that
thank you for the great video any ideas what should i do to make it add new buttons at run time ? i tried to do this but its not working i expect it to add one more button when i click any keyboard button
def onKeyPress(event):
global second_frame
print("key clicked")
Button(second_frame, text='test').grid(row=10, column=0, pady=10, padx=10)
root.bind('', onKeyPress)
root.mainloop()
You haven't packed or gridded the second frame.
Thanks dude
Sir, one question: Since there is no Canvas in the ttk module, how can I make the style of Canvas (from tk) the same as the one I set in ttk?
Thank you!