Scrollable Frames!! - Tkinter CustomTkinter 8

what's going on guys John aler here from tk.com and in this video we're going to look at scrollable frames for custom kter and python all right guys like I said in this video we're going to look at scrollable frames for custom kter but before we get started if you like this video want to see more like I be sure to smash like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and be sure to grab your totally free PDF copy of my kter widget quick reference guide book this thing is awesome over 150 pages with all the ker widget attributes grab your free copy today just head over to tk.com widget dbook in your email address and I'll send that right out to you and while you're there think about membership ink.com you get all my courses all my future courses for one low price use coupon code YouTube to get 30% off membership if you're interested okay in this video like I said we're going to look at scrolling frames in custom kter now with regular ker you have to add a scroll bar to a frame and sort of hack it together in order to make it work Custom tkinter is much different we have an actual widget called the scrollable frame widget it comes with a scroll bar you could have it vertical up and down like this or horizontal left to right we'll look at both of those in this video and you can customize this thing a whole bunch of different ways change the colors the look and feel and all that good stuff so let's head over to rodum using the Sublime Text Editor in the get bash terminal as always and as always you can find a link to the code in the pin comment section below as well as a link to the playlist with all the other custom kter videos in this series so check that out if you haven't so far so I've got a file I'm calling it ctk scroll it's our basic custom kter code that we always have so let's come down here and let's just create a scrollable frame so I'm going to call it mycore frame and we're going to set that equal to a customer. ctk scrollable frame widget notice the c and the T are capitalized and the s in scrollable and the F in frame are all capitalized and we want to put this in root and for now we're just going to sort of leave it the way it is so let's go myor frame do pack pack this guy on the screen and let's give this a pad y of 40 to push it down the screen a little bit so okay that's pretty simple now we need to put something in this thing so that it shows up on the screen I'm just going to put a bunch of buttons in there and to do that I'm going to use a little for Loop so let's go for Loop for buttons and this is just sort of nonsense code but let's go for X in range of 20 so let's put like 20 of these things on the screen and then I'm just going to put a custom tkinter.ttk button now we don't want to put this in root like we normally would we want to put it in the frame so anytime you want to put any anything in this Frame to have it scrollable you put it in my frame like this because that's what we called our frame there we go and let's have the text say this is a button woohoo right and then normally I don't pack these on the same line but since this is a for Loop and it's a little weird let's just go ahead and pack it on the same line and let's give it a pad y of like 10 to put a little bit of space between each of these buttons now like I said normally I say absolutely never ever pack the thing on the same line that you defining it but like I said in this case these aren't real buttons we're just doing this very quickly so there's a bunch of stuff on the screen so let's go ahead and save this and run it just to make sure that worked so let's head back over to our terminal I'm in my CT ker.com directory and let's run Python ctk scroll. piy and when we do we see we've got this Frame it's slightly different colored than the regular background of our app which is pretty cool looks modern and and neat it's got this little scroll bar button here we can scroll down and there's a bunch of buttons here they don't do anything something to put on the screen so that there's you know it's scrollable and very cool so that's really kind of all there is to it this works just like that very easy you can also change this from vertical up and down to horizontal left and right so let's just go ahead and do that real quick and to do that we come over to our frame and let's change the orientation to horizontal now I'm not even sure if this is going to work because our buttons don't really really stretch that far across but at least you'll be able to see see now the button thing is down here it doesn't actually scroll because like I said we've only got you know our buttons are only so big I mean I guess we could change that if we wanted to um let's go uh font equals helvetica and like size 100 or something make these giant head back over here run this guy again okay so now we're but are huge and we can scroll from left to right right so okay that's cool so let's change that back because that's obnoxious all of that and I'm going to change this back to Vertical just so that it's you know normal up and down and if we save this and run it just to make sure real quick that that's looking correct yeah we're back to vertical and vertical is the default you don't have to put orientation equal equal vertical as we just saw when we first created this thing if you don't put the orientation it just defaults to Vertical all right so that's the scroll bar that's really all there is to it now we can customize this to look all kinds of different ways there's all kinds of things we could do we can make it look absurdly ugly like I always do because I'm very bad at design so let's go ahead and do that the first thing you want to look at is the width and the height so we can change the width and height of this thing so let's say I don't know say 300 by let's give it a height of like 200 if we save this and run it now our frame is wider and maybe probably about the same height but you can change it to height and width anything you want and these are basically in pixels so that's cool we can also give this a text label so that's label uncore text and so let's say hello world and this is kind of weird you don't see this in a regular frame in tkinter so if we save this and run it we see now at the top there's this label it says hello world looks kind of like a little button very interesting and it's not scrollable it stays in place so very interesting and we can change the colors here we'll look at that in a little bit well hey let's look at it right now why not so let's come down here and underneath here let's go what do we want to change let's change the label uncore FG color and let's set that equal to what say blue something like that we'll wait and do the totally obnoxious things later blue is not that obnoxious of a color oh that is actually kind of obnoxious looking so I changed the foreground color of that label to Blue all right that's something I guess uh what else could we do we can change the label text color so let's go label uncore textor color and we can set that equal to Yellow this is going to be obnoxious looking I hope I hope right U you can't really tell but that's definitely yellow hello world is slightly yellow it's kind of hard to see but okay that's cool uh what else can we do we can change the font of that text so that's going to be label uncore font so we can change it to let's say helvetica and the font size of say 18 something like that make it nice and bigger there we go nice and big nice and bigger whatever so now hello world is a little bit bigger we can also change the anchor where this text is you can see by default it's Center and that looks good to me but if you wanted to change that for some crazy reason you could just go label uncore anchor and we can set that equal to for instance West now here let me just copy and paste in your options here these are the basic hter directional options so northsouth east and west and then like northeast southeast northeast southeast northwest Southwest that sort of thing just the basic you know west north east and south and then of course Cent so we've got it at w which is going to be what left I guess uh so if we save this and run it all right now it's over here yeah whatever I'm going to go ahead and change that back to Center just because it's going to bother me otherwise I don't know why uh but it's centered by default and we've already looked at that so all right that's pretty much all you can do with the label stuff but what else can we do with the actual frame well we can change the Border if we want so let's go border underscore width and let's set that to like three or something by default there was no border it just sort of the frame itself was a different color and now we've got this sort of chunky border but it's not great because the scroll bar doesn't get a border and there's not really anything we can do to fix that so that looks kind of goofy I don't know you could do it if you want I maybe there's some way to hack around that but I haven't really discovered it we can change the color of this border while we're at it I mean hey it looks goofy so let's just lean into it let's go border undor color and let's set that equal to Green now you can use your colors like green like I did here or you can use your hex color codes I don't know what the hex color code is for green let's say 3 8 n 7 1 one two I don't know whatever you could use those hex color codes if you want we're just going to stick with the word green so head back over here run this guy again and now our horrible looking border is green so all right whatever so that's the Border thing what else can we do to the frame itself well we can start changing some colors in the frame so let's start out with the foreground uncore color and let's set that to Red this is going to start to get crazy oh yeah right yeah that's that's obnoxious so now the frame itself is red okay we can change this scroll thing here not just the little button here that we drag up and down but the background of the scroll itself so let's try that let's start with let's let's give us some space here so let's go scroll bar underscore FG color and let's set that equal to Yellow I gu yes save this and run it and here we go now again this doesn't look great because it's you know kind of Blocky and weird I know you can do that if you want you can also change the button itself you can see it's sort of uh gray or silver or whatever color that is we can change that let's go scroll underscore button uncore color and let's set that equal to what say pink solid color right all right oh yeah that's that's not great so it's pink when you hover it changes to a different color so let's change that as well we can modify that by calling the scroll bar uncore button uncore hover uncore color getting ridiculous and let's set that equal to Blue maybe I don't know save this and run it so now when we hover boom it turns blue oh that's actually pretty nice looking I don't know uh so okay what else can we do well it's pretty much it color-wise we can change the actual frame itself we can change the corner radius you can see it's mostly Square here but we can make it really square if we want pull up our coat here where we go there we go by changing the corner underscore radius and you can do this with most widgets in custom kter so if we set that to say one that's going to make it very angular very squarish you can see it's just ch ch very 90 degree Square we can change it to make it round too uh we could change it to say 50 and the the bigger the number the more round it's going to be right so if we come back over here that's kind of cool looking right but now notice all of our stuff has sort of disappeared I don't know what's going on there uh let's see maybe we change this to like 20 or something there we go everything bought back I don't know what the deal is maybe the roundness covered the scroll or something I don't know but you'll notice everything is quite a bit pushed down now when we rounded this corner radius so sort of keep that in mind and of course you don't have to have a label up here at the top it says hello world you don't have to have that you don't have to do any of this stuff this is I'm just doing it to make a point of what you can do but yeah pretty cool and a lot more customization than a regular frame and kter the scroll thing is just awesome because if you've done scroll bars in regular kter you have to create a scroll widget and then like append it to a frame widget and then set all these thing it's just a hassle it's always been a hassle it works but it's it's really kind of a pain this is so much nicer and uh really just that easy so that's all for this video if you liked it be sure to smash like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and be sure to grab your totally free PDF copy of my kter widget quick reference guide book thing is awesome over 150 pages with all the kter widget attributes grab your free copy today just head over to tk.com widget dbook enter your email address and I'll send that right out to you and while you're there think about membership ink.com you get all my courses all my future courses for one low price use coupon code YouTube to get 30% off membership if you're interested my name is John Elder from tk.com and I'll see you in the next video

Channel: Tkinter․com

Views: 16,431

Keywords: customtkinter scrollable frames, scrollable frames customtkinter, customtkinter scroll frames, customtkinter scrollableFrames, tkinter.com, john elder, john elder tkinter, john elder customtkinter, john elder customtkinter tutorial, customtkinter tutorial, tkinter scrollbar

Id: Envp9yHb2Ho

Length: 14min 8sec (848 seconds)

Published: Tue Oct 03 2023