Combo Boxes in CustomTkinter - Tkinter CustomTkinter 5

what's going on guys John Alder here from teachenter.com and in this video we're going to look at combo boxes for custom kinter and python all right guys like I said in this video we're going to look at combo boxes for custom kinter but before we get started if you like this video I want to see more like 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 kinter widget quick reference guidebook this thing is awesome over 150 pages with all the counter widget attributes grab your free copy today just head over to techinter.com forward slash widget dashbook enter your email address and I'll send that right out to you and what your other think about membership in tkinter.com get all my kinter courses on my future courses for one low price use coupon code YouTube to get 30 off membership if you're interested okay like I said in this video we're gonna look at the combo box for custom kinter and it's just this box thing that you see here we can click on a thing click the button and boom it says red if we want to change it to Blue and click the button so I'm going to show you how to use a button I'll also show you how to just click on red and it turns red we'll also look at just programmatically setting a combo box item like clicking this button and boom it's yellow so look at all those things and more in this video we'll also show you all the different ways to customize the look and feel of this there's a lot of different things you could do with that in custom kinter and we'll hit all those things in this video so let's head over to our code I'm using the Sublime Text Editor and the get batch terminal as always and as always you can find a link to the code in the pin comment section below as well as link to the playlist with all the other videos in this custom kinter Series so check that out if you haven't so far so I've got our basic custom kinter starter code that we always have I'm calling this file ctk underscore combo box and let's just come down here and start out by creating a quick label at the top so I'm going to call this my label this is going to be a custom tkenter dot ctk label we want to put it in a root we want the text to say pick a color like that and while we're at it let's set the font a little bigger just so it's easier to read I'll set this to helvetica and then like size 18 something like that all right that looks good so then let's my underscore label dot pack this guy I'm going to give this a pad y of 40 to really push it down the screen so now let's create our combo box I'm going to call this minor Square combo and this is just going to equal a custom tikenter.ctk combo box and notice the c and the B and combo box are both capitalized a little weird and of course the C and the T and ctk are capitalized so we want to put this in a root and we want to give this a values of some variable I'm going to call this colors so let's come up here and create a python list of the options that we want in our combo box I'm just going to pick red green and let's say blue so of course you can have as many items as you want you can have text you can have numbers you can have other lists whatever and we designate these by setting the values to that variable now you can also just take this and paste it right in here as well but if you have a lot of options that's obviously going to get clunky it's just a better idea to separate this out into its own little python list on its own line so here let's uh set the options for our combo box and here let's create combo box let's come down here in my underscore combo dot pack and let's give this a pad why like 20 push down the screen a little bit I'm going to save this and let's run it just to make sure that looks okay let's head back over to our terminal I'm in my cetkinter.com directory and let's run python ctk underscore combobox.pi and oops colors is not defined what did we misspell colors there we go all right so let's try this again go to the screen run this guy all right so here we've got pick a color and we've got our drop down box now when we click on these things nothing actually happens so how do we make it to where when we just click on this thing without even using a button something happens well to do that I'm going to change this padding to zero because there's already 40 of padding around the label so all right so anyway to make the combo box do something when you click on it we can give this a command and I'm going to call this color underscore picker or something like that and this is a function so we have to now create this function so let's come up here to the top and let's define color underscore picker now we need to pass in something I'm going to call this Choice when you run a command straight from the combo box it's going to pass in an event so we've talked about events in other videos an event is like it sounds it's an event when you click on something when you drag the mouse when you you know hit a button a certain way double click single click that's an event and by default this combo box is going to throw off an event whenever you click on it so we need to sort of designate that in this function here so here let's create another label down here let's create output label and I'm just going to call this output underscore label this is going to be a custom decanter.ctk label as put it in root and for now let's have the text equal nothing and let's also give this a font of like helvetica like size 18 to make it nice and big and then let's output underscore label dot pack this guy give it a pad y like 20 push down screen so we've got this output label we can now do something with it so whenever we click on something in the combo box let's output whatever we've clicked on so to do that we come up here to our function tab over and let's output underscore label dot configure and let's set the text equal to something well what do we want to set it to we want to set it to that choice remember that's the event that got passed in so just by clicking on this thing down here it's going to pass in whatever you've clicked on and that's we're calling it choice because we're making a choice in the drop down box and here we can just print out that choice so let's go ahead and save this head back over here run this guy see if that worked so here we see pick a color and if I click green it outputs green if I click blue it outputs blue so now we can get really fancy and actually change the color of that to the output that we selected and to do that we just come over to our label and we set the text underscore color to that same choice so let's go ahead and save this I don't know it's just kind of a silly thing but it's kind of fun so now when we click green boom it outputs actual green color blue and red very cool you may want this you may want a drop down box that whenever you click on it something happens but likely not because usually you're going to have some form that you're filling out name address ZIP code email address phone number uh State and then you're gonna have a drop down with all the states when you select your state you don't want the form to submit right you want to then finish filling out the form click a button and then hit submits so how do we do that well that's a little bit different because here it passed the event right in when we use a button it won't pass that event so we're gonna have to account for that so here I'm going to let's see let's change this to just like this and well let's just take this all out so you take out your command from the combo box itself and now underneath here let's create a button and we call this minor scroll button it's going to equal a ctk button we want to put it in root we want the text to equal pick a color and here we want to give this a command equal and let's create a different function for this I'm going to call this color underscore picker two right just to designate this differently here so we also want to very quickly go my underscore button dot pack put this on the screen let's give it a pad y like 20 push it down screen a little bit now let's come up here and create that function and you'll notice this time we're not passing in an event because we're just running a button we're not actually passing an event like we are when we click on the drop down box right so how do we get whatever has been selected well let me grab this guy and just print it out again but instead of this being choice this is going to be whatever our my combo box is my combo dot get and this is a function so we can copy this and also put it right here so this my underscore combo.get will get whatever you have selected in the drop down box and it's my combo because that's what we called our combo box my underscore combo so here if we save this and go ahead and run it whoops oh you know what typo let's see okay here is supposed to be custom um decanter dot ctk button why didn't you tell me uh it's the Tuesday after a three-day weekend so it's the Monday Tuesday video all kinds of Errors though it's just like green you'll notice when we pick Green this time nothing happens because we haven't clicked the button yet now when we click the button boom it says green blue click the button blue very cool now we can also just programmatically select something like here we've you know dropped down and clicked red to select something we can select something programmatically as well so to do that let's head back over here and let's create another button let's call this the yellow button and I'm going to call this yellow underscore button this is going to be a custom tkenter.ctk button we want to put it in root we want the text to equal pick yellow and let's give this a command of color underscore picker underscore yellow and we don't have this function yet we'll create it in just a second before we do that let's yellow underscore button dot pack this guy give it a pad y of 20 push down screen a little bit all right and then let's come up here and Define our Color Picker function and I'm just going to copy this whole thing again and paste it in there we still want to get something but this time instead of getting whatever we've selected we want to set something as already having been selected right so to do that let's say uh set the combo box option let's go my underscore combo dot set and then just pass in whatever we want so we want yellow now you'll remember up here or down here I suppose we don't have yellow in this option so we're setting it to something that's not even an option but we can do that so let's go ahead and save this head back over here run this guy again and if we pick yellow boom it outputs yellow and you'll notice up here it says yellow even though that wasn't even an option and in fact when we click on the drop down yellow still isn't in the option because we haven't actually added it as an option we just set it as yellow right so when we click green it turns back to green we can then pop it back to Yellow so pretty cool that's the basic functionality of the combo box very easy to use very cool now for the rest of the video let's talk about customizing this making it look different this looks a little clunky to my mind this kind of bold order here we can change all of these things we could change the size the color the font the hover stuff here we can make it round instead of square all the things like we talked about in the last video for the check box we can do basically for the combo box so let's head over here and let's come down here to our combo box and let's start out by changing of course the height and the width so we do that just with height and width and let's set this to 200 by 50 or something like that whatever come back over here run this guy and whoa that is terrible I think we did that the opposite way I wanted to do it let's go yeah the height let's set the height to 50 and the width to 200 that's probably a better idea it's Tuesday Monday what can I say and now we have a nice big combo box now you notice the font sizes haven't changed even though the box is bigger those sizes haven't changed so we could change those if we wanted to we could just come here and go font equals and set this to like helvetica and change the size to like 18 something like that save this guy or run it now the text here is bigger but the drop down text isn't any bigger we can change the drop down text size as well and that's just going to be drop down underscore font and we can set that equal to anything we want I'm just gonna copy and paste this guy here save this head back over here run it again now our regular font is 18 and our drop down font is 18 and this box is sort of resized appropriately so that's cool what else can we do well we can change the sort of the look of the thing instead of making it a box we can make it sort of a circular elliptical looking sort of thing by changing the corner underscore radius and we can set that equal to 50. the bigger the number the more rounded it's going to be so we go ahead and save this and back over here run this guy again now we've got a nice rounded drop down box that's kind of cool the actual drop down is still Square you can't really change that I don't think wouldn't it be cool if you could though let's try drop down underscore Corner underscore radius there's no way this is going to work but wouldn't it be cool if it did let's run this guy at now okay well we can always dream all right what else can we do well we could change the border with well let's go border underscore with and set this equal to 100 make it really big and horrible looking actually first let's clear the screen and whoa that is just way too much as of course it would be let's change this to I don't know 20. how about that that is not great but you but you get the idea the border with I would probably change that back down to I don't know let's just go two see how that looks save this and run it all right much nicer what else can we do well we can change the Border underscore color set that equal to let's say red as always with all the colors you can use your hex color code so you know whatever red is I don't know offhand or you could just use the word red so go ahead and save this head back over here run this guy now our border is red but our button is not so that's a little wonky we can change the button color if we want and to do that we call Button underscore color let's put it as red as well so it you know kind of looks the same as the Border I think that's probably a good idea very nice right so now we've got a red border and a red button when we hover over this changes to Gray we might want to change that hover color to do that we just call the button underscore hover underscore color and let's set that equal to green or something just horrific you know my Golden Rule make things as ugly as possible in these videos so now when we hover over this it's green that's cool well we can change the drop down underscore hover underscore color let's set that equal to Green as well save this guy come back over here run it so when we click this it drops down and it's still gray or silver or whatever color that is but when we hover boom each item is this hover color what else we got we're just getting started we can also change the drop down underscore FG underscore color now even though this is foreground color it's actually the background color but they just call it foreground color so save this and run it so now when we drop down it's blue foreground or background pretty heinous right all right so that's how you do that we can change the drop down text color we can go drop down underscore text underscore color set that equal to I don't know Orange it's pretty ugly I think so now when we click this guy red green and blue are in orange colored all right we can change the font of this guy here too while we're at it let's just go text underscore color set that equal to purple all right because why not go and save this head back over here run it again whoa that's not even readable you'll notice this is purple and also a little carrot Mark in the button here that's also purple that's just just terrible let's go ahead and change that just because it makes my teeth hurt let's just change this to Silver right okay what else can we do we can always set the hover to false if we don't like all this hover nonsense come back over here run this guy now when I hover over this it doesn't change colors but it does change color right here if you didn't want this to change color hover-wise here you could just set the hover color to whatever the foreground color is and then you wouldn't even notice it was changing colors that's one little hack to get rid of that hoverness if possible so that's cool I kind of like the ability to hover so I'm going to set this equal to True which is the default finally we can also justify this guy so the text so if we want this to say justify right if we save this it's going to be the text on the actual button itself you'll see now it's over here on the right which is fairly terrible looking we could also change this to left if we want save this and run it it looks sort of centered but this is actually the left because since we've changed the radius it's kind of tinkered with the the side here but that's left we can also do I think default is just Center so we'll go ahead and change this to Center save this run this guy just to make sure that looks okay and there we go Center cool now this I'll mention but this is always the same with all widgets you can change the state to disabled if you want or normal is the default save this guy if we run this then the whole thing's just not going to work at all it's just disabled you can see you can't even read anything you can't click on it I'm clicking on it right now nothing's happening you can still click this to oh no you can't once it's to stay disabled you can't set it look at that we learned something new today right same thing with pick a color you can't do anything when it's disabled we're getting all kinds of angry errors in our terminal so I would set this to normal and you're good to go so that's the combo box very cool lots of customization really easy to use and that's really all there is to it so that's all for this video if you liked 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 kinter widget quick reference guidebook this thing is awesome over 150 pages with all the counter widget attributes get your free copy today just head over to tkentry.com forward slash widget dashbook enter your email address and I'll send that right out to you and while you're there think about membership in tkinter.com you get all my kinter courses all my future courses for on low price use coupon code YouTube to get 30 off membership if you're interested my name is John Elder from teakinter.com and I'll see you in the next video

Channel: Tkinter․com

Views: 12,907

Keywords: customtkinter combobox, customtkinter combo box, custom tkinter combobox, custom tkinter combo box, customtkinter combobox options, tkinter.com, john elder, john elder tkinter, john elder customtkinter, john elder customtkinter tutorial, customtkinter tutorial, custom tkinter tutorial

Id: xgSJWPE4DVc

Length: 20min 59sec (1259 seconds)

Published: Tue Sep 12 2023