Python Tkinter Menu Widget | Create Menu Bar in Tkinter | Menus & Submenus in Tkinter GUI App

what is going on guys this is Fabio and on this channel I help you become a better programmer so subscribe if you're interested in this video you learn how to create structure and style the menu bar and all the menus in your python TK inag applications to make it similar to the one of Visual Studio code as you can see this is Visual Studio code so you've got go back tweet editor etc etc and this is what we are going to get so the same thing here go switch editor etc etc of course with fewer entries because I didn't want to waste the whole video writing things okay so as you can see you've got the same things but not all of them I'm also going to show you the differences between Linux and windows and how to make things look good for both operating systems unfortunately I don't have mac so you'll have to experiment yourself and see in the source code that you can get using the link in the description box down below I wrote the code that will check the operating system of the user and change things accordingly which is kind of cool because it's all automatic so if you want to get the complete source code and support the channel as well check out the link in the description box down below so let's close this and let's start writing our code okay so we can start by importing TK Inta as TK then I'm going to structure things using the class okay if you don't know how to use a class I actually made a series where I try to explain everything you need to know about classes so I'll leave the link in the description box down below if you want to check that out so here I'm going to inherit from the frame okay the frame widget then I'm going to do something like self root and then root is equal to the root and now here I'm going to write a few variables containing colors that we're going to use later on when we style the menu you may be wondering why I'm doing this here of course because I don't want to hardc code the values so that if you actually want want to change the colors of the menus etc etc you can just do that directly here and all the various menus will have the right color okay without having to to do that one by one of course you can do the same thing for other things like borders font Etc but those are things that are less frequently changed so I'm not going to add them here so I'm going to start with the background menu bar and this is going to be like that then self. forr menu bar and this is going to be black then self active background menu bar and this is going to be all right self. active foreground menu bar and this is going to be black as well these are the colors that you can see in Visual Studio code at least here on Linux okay so they should be the same colors five like that then self foreground menus actually here it's menus not just menu okay and this is going to be black as well self active background is going to be like that and then so active foreground menus is going to be block as well and then background application this is just the background that you can see in here so this background here basically and these are all the colors that you can see here okay so this this uh sort of light blue etc etc then down here I'm going to call Super in it like that and then here root and then background Shelf dot background application and then as usual I'm going to do something like main frame self okay just to make things more understandable this is not necessary this thing here is not necessary because basically I actually do that so we actually see main frame instead of just self but that is not something that need to do you can do that if that makes sense for you then true then s main frame dot column configure zero weight one and then same thing for the row configure like that perfect so let's actually go down here and add a little bit of code to actually see the application okay so root is going to be TK TK like that and then Ro title as we're going to sort of make let's call it a sort of copy of the menu of USD code I'm just going to use root title Visual Studio code geometry let's start by that okay and then we could do something like visual video code my app like there and then here of course root and then root dot main Loop to actually see the application so let's try to run it and see if we get something so python TK inter menu bar okay so this is what we actually get perfect okay so now we can go back here and instead of putting everything inside of here inside of the init method we're going to call a method that we're going to create in a second okay so we can do something like create menu bar self and we actually going to call it here so self create menu bar like that and here we can actually create the menu bar so to create the menu bar at the top of the window we need to create a menu widget and then add it as the value of the menu option to the root window so let me show you so self menu bar it's going to be a menu pass self root as the parent then self. root. config and we can do something like menu self. menu bar like this or you could do something like this self. root then menu and then self do menu bar okay you could do something like that I actually like this one so let's actually use that and comment this out so now that we have our menu bar we can populate it with the various elements we can add different things different type of elements like normal commands sub menus check Boxes Etc Etc I'm just going to show you normal commands and sub menus which are the most used but keep in mind that you've got also check Boxes Etc Etc so a normal command is just a button that you click on the menu and does something and you can add it using add command so something like this self menu bar add command label let's call it command if we run now the application as you can see you've got this command here okay but it does nothing because of course we didn't specify anything to do but let's actually create a quick function so we could do something like here def my function like that and then print command something like that and then here as the command we use my function as you can see I didn't write that with the parenthesis because I don't want this to be run straight away but I want this to be run just when we click the command the command button so now if we run the application and we actually do something like this when we click command and as you can see you get this all right perfect let's clear that this is basically how you specify commands to the command elements in the menu so now though since we're trying to recreate the visual studio code menu I don't have commands Okay so here if I click any of those I actually get a sub menu so to add a button that opens another menu you need to use add Cascade so let's actually remove all of that perfect by the way remember that you can get the source code of this and my other videos using the link in the description box down below so go and check that out if you're interested so add Cascade expects a menu object since we're literally adding another menu okay that will be opened when we click on the button so to do that we're going to do something like self file menu is going to be TK menu self menu bar because these are menus that are ch of the menu bar which is a menu itself so the menu bar is the parent basically and then all the other menus are the children so we're going to do something like edit selection view go run terminal help and we're going just to change the titles edit menu and then we're going to have selection menu and then view menu go menu run menu terminal menu and then help menu and now that we've got the menus we can actually add those to the menu bar because otherwise we wouldn't see them so we're going to do that using add Cascade s menu bar art Cascade we need to specify the menu so the first menu is going to be self. file menu and then the label is going to be file okay and then let's do the same thing so I don't know if they are enough but anyway so edit menu selection menu view menu go menu run menu terminal menu help menu all right and of course here it's important edit selection view go run terminal help all right so let's actually run it all right so now we've got this menu here and if you click on them as you can see you get this thing here this weird thing here and this thing here is basically used to detou the menu the sub men from the window so if you click here as you can see you get this which is the edit menu this is not the used anymore so we could actually remove that by doing something like this so here in the menu you could do something like T off PS or you could just specify like false like that okay but since we need to do that for all the menus of the ification we can do that directly inside the init method and we could do something like this so up here maybe here we could do something like self root then option add cheer off and then TK false like this and now as you can see you don't get that anymore so basically this turns off the tear off option for all the elements that of course have that option which is kind of cool so now that we've got these menus we can actually add a few elements to them I'm actually just going to add elements to the Go menu okay so this one because that contains interesting things like as you can see here you've got something that is not active etc etc you've got submenu another submenu etc etc so and then you've got all the shortcuts and then after we've done there we'll see how to style everything and the differences between Linux which is the operating system that I'm using and windows so now as I said we need to add elements to this menu and we could do this here okay inside the create menu bar but I actually like to structure things a little bit different so I'd rather divide the whole thing into different methods so one method for the Go menu one method me for the file menu edit menu etc etc so basically I'm going to do something like this so down here I'm going to call self add go menu items which is something that I'm going to create now so here I'm going to do something like death add go menu items self and here we need to add the elements in the Go menu so we can do something like self go menu add command because in this case you don't have a sub menu for the back back like that and here of course you need to add the command as we did earlier so for example here you could have like command and then my function okay something like that of course I don't have that so I'm not going to actually write them but of course for each button you should have a command perfect and also did you notice that here you've got these shortcuts you can actually do that using the accelerator option so here we can add something like accelerator and then Bol left arrow and as you can see if we run that now you've got this back and then the accelerator it's really important to know that the accelerator is just simple text okay it doesn't mean that if if you press that combination the command is executed you still need to bind an event to that combination of keys so in this case the accelerator is just to show the user that this is the combination to use but then you still need to bind this combination to a specific command so this is just a visual thing if that makes sense then we've got the forward okay the forward button and did you notice that here the forward is not active so as you can see this is not active and you can change that by doing something like that so first of all this is the right arrow you can do something like State disabled and actually as this is quite long we could do something like this so we could do something like this and then this and maybe we could do same thing for this one okay something like that to make things a little bit shorter by the way don't forget to like the video if you're enjoying it and also subscribe to the channel as well for more videos like this one so let's actually run it and see okay so as you can see you've got the back button that is active and this is not active of course everything looks a little bit old style etc etc because we need to style it properly but I'm going to do that later on okay first I want to finish the structure and then we'll worry about the style let's go back here so in this case the forward button is disabled and you should be able to actually activate it when the conditions allow it and luckily there are a lot of methods that you can use to add remove elements from the menu change options etc etc I'm not going through all of them but I want just to show you a few so let's go back here so for example there is the self go menu delete and then here you can use the index okay you can have more than one but in this case let's say that we want to remove the forward button so if if you do something like that as you can see now you don't have the forward button anymore and you can use this whenever you want let's say that you do something your program does something and then you need to delete for example the forward button then you can do something like this then you can also insert a command or a new menu using insert command command or you can use insert Cascade checkbox Etc this is zero index as you could see earlier because if I do something like zero that means the first element and then I'm going to do something like label and then new and then I don't know you can have whatever you want so in this case I'm going to insert the new command as the first element and as you can see now you've got new back forward okay very cool and then there is also one to change the options of an item and in this case let's say that you want to enable the forward button you could do something like like entry configure one because that is forward and then you can do something like State TK active all right so let's see if that works as you can see now this is active so whenever you want to activate the forward button or disable something else you can use something like this and you can do that whenever you want so let's actually remove that that was just to show you so now we can add a few other elements so we've got the self go menu like that and then add command again and the label in this case is going to be last edit loation like that and then the accelerator is going to be shift space like that which is this one as you can see shift back space okay accelerator and then we can add a separator add separator and then we've got another menu which is the switch editor so as you can see here you've got switch editor which is another menu which opens another menu and how can we actually do that first of all we of course need to create a new menu because the switch editor is basically another menu so we can do something like self go switch so menu okay these are names that are pretty clear because you want to be clear when you have a lot of menus and stuff so for example here I know that go is the menu and then switch edit Etc then you can have whatever you want these are just names that I came up with and that made sense to me so now that you've got the new menu we can actually add it to the go go menu using add Cascade of course because add Cascade is basically to add new menu so the new menu is going to be self. go switch to menu and then the label going to be switch editor and of course now we can add the elements to this new Switch editor menu we could create another class menu but I think that we can keep everything in here of course do what makes more sense to you so here we need to add things to the menu so we just have commands so it's pretty easy so label is going to be next so like that here we've got the and here we've got the next used editor here as you can see I didn't write the accelerators because I've already explained you how to use them okay so I write them and in the middle here we actually have something like this add separator like that we actually have more because as you can see here you've got all of those and all of those but it doesn't make sense to to waste a lot of time to actually write all of them if you want to feel free to do that so let's actually run it and see what we've got so go menu you've got this forward switch editor next editor previous editor and the next used editor okay so the this structure is basically here so before we style it let's recap a little bit this is the main menu bar which is a menu and this is part of the window then we created other menus so all of those menus and we added them to the main menu using add Cascade then all of those don't have any children and we actually added some children to the Go menu and basically this is the go menu with all the content this is a command this is a command this is a command this is another menu so we created another menu this switch editor menu and we added to the Go menu using add Cascade and then we added those things here to the switch editor so basically you've got one menu then the second menu and then the third menu okay and then all of those menus they don't have anything because we actually didn't create them of course in a real application those should have things like this like file edit Etc perfect so now let's see how to style things let's actually go up here the create menu Bar Method so when it comes to styling you need to understand that when you style a specific menu object like in this case this is a menu object file menu Ed menu okay as you can see those are menu objects then you're styling the menu as a whole so the border around the menu the background color will be used for all the elements the foreground color will be used for all the elements and then the active color etc etc and then you can actually style each element differently but let's do things one step at a time so for example here as you know I am on Linux but I will show you the differences between Linux and windows and I'll show you clips of the application on windows so don't worry because I'm going to show you the differences what you can or you cannot do etc etc so for example when it comes to the menu bar on Windows you can do much so when it comes to this part here on Windows you can change the color you can change the font size Etc you cannot do anything and you should see now a little clip that shows you how things are on Windows on Linux on the other hand we can actually have more fun so let's try to change a few things here and there so first of all here we can do something like this okay so self root then the background column is going to be self dot background menu bar it's actually like that okay then the foreground which is black so it's standard but if you want to change that you can do that up above then the active background is going to be self do active BG menu bar and then the active foreground is going to be self do active foreground menu bar of course let's actually see what we've got Okay so you've got this if we actually change that so you can see that better because it's really subtle like that now you can see that the color actually changes okay perfect let's go back to this then you've got the border border which is similar to The Border width I didn't see any differences to be honest but maybe there are but I'm not sure I didn't see them so I'm just going to show you with the Border width let's try 15 so you you can see as you can see you've got this border width around as I said earlier this doesn't work on Windows I don't want that so just zero then relief you could do something like flat actually I'm going to show you with the 15 border width and Rel flat as you can see you've got this around but when you go over the elements you don't see the whole thing but just in the middle so it doesn't look good at all so I'm just going to stick to zero and then this is not necessary the active border with zero and what is this I'm going to show you so 15 and I'm going to show you what that does basically when you click on a button you get that it doesn't look good at all just we're going to stick to zero all right and then the font is going to be which is a classic one and then 10 as you can see now that this is a little bit bigger okay the font size on Windows this is not something that you can change but here you can change it so I'm just going to use 10 which is similar to as you can see the font size in there in Visual Studio code so as I said this style okay the menu bar here TK menu and all the style here targets basically the whole menu so as you can see the active background is for all of those the active foreground is for all of those Etc but what if we wanted to actually Target a specific item like for example I want this button to be red and this one to be green and whatever and we need to do that inside the adart Cascade method so we could do something like this so down here at Cascade we can do something like this let's actually style the first one so here for example you don't have all the options so for example you don't have the Border etc etc but you have the colors and as I said since we are still in the menu bar so we are basically styling how the menu bar looks at the top of the window on Windows these things don't work okay but be with me so here we're targeting the first element of the menu bar so if we do something like active background and we do something like red and we open that as you can see now all of those are the same but if you go over file it becomes red so you can change a few things here and there the foreground background active back ground Etc and you can basically change them singularly which is pretty cool and besides the color there is also another cool thing that you see sometimes which is the underline to show you what letter actually activates the specific menu let me show you what I mean so underline zero which is the first here you'll see that now as you can see here you've got the F with the underline and when you add the underline then you can press alt plus the lettera with the underline to open the right menu okay so in this case alt plus F will open the file menu all the other menus are not enabled because you need to add the underline especially here on Linux on Windows the underline doesn't work meaning it's not shown even if you add the underline option but I've noticed that even if you don't add the underline option you can still open the menus by pressing alt plus the first letter of the menu so basically alt plus F opens the file menu old plus e opens the edit menu and so on and so forth this works by default so you don't need to do anything basically on Linux you have to add the underline option to enable this feat up menu by menu on Windows it works on all of them without doing anything so let's actually just remove that I just wanted to show you that perfect so basically by adding the options to the menu so the menu here to the menu this menu this menu Etc you are basically adding all the options to the items that are inside that menu however by adding them here in the ad Cascade add command Etc then you can change the look of only that specific item you can also use state to disable the elements so as I shown you earlier State DEC disbled etc etc and there are also other things that you can do but these are the most used so let's go back actually to this because there was something that I actually wanted just to show you but this is not necessary anymore perfect so now we can actually style the Go menu so here we've styled this menu and we can style this menu because it doesn't look great at all quite old style so as I said if you want to style the menu as a whole we need to do that here inside the menu here as we are not inside the this menu bar here but we are inside this secondary menu then on Windows you can actually do a little bit more you still have the differences but I'll show you those as well so first of all let's do something like this so background is going to be self. BG menus the foreground is going to be self. foreground menu not menu bar then active background is going to be self do active PG menus and then active forr is going to be self do active FD menus and this is what we actually get so let's see you get something like this which is already looking a little bit better and now you should also see what it looks like on Windows as well so you should see that now on the screen okay so font 10 to make that it beit the font it beit larger and this actually works on Windows as well I've actually noticed that on Windows in the menu bar the font is nine I think and you cannot change it here on the other hand you can change it but if you want that to be consistent you shouldn't write the font at all so you should just delete that but if you want the font to be a little bit larger in the submenus because luckily in the submenus you can actually make that larger then you can do that like this on the screen now you should see how it looks on window window with font 10 and as you can see that looks a little bit larger in the sub menu I'm going to leave it like there I quite like it a little bit larger okay at least where I can but feel free to leave the default font size if you want then as you can see here you've got really little padding around the menus so I'm going to add a little border to increase the padding so we could do something like this so border for four this should do the same thing but I'm just setting both to four so that's fine and let's see what we've got so now as you can see you've got this could be of Border but I don't like that that way so I'm just going to use do remember that we used relief and then TI flat to make it better perfect so let's see now okay so much better now you can see that you've got it to be of ping around I actually want to show you one thing so as you can see let's actually increase the border to 10 like that so as you can see when you've got the border and you have over the menu items the border is not active as you can see you just get this thing here in the middle the like blue background doesn't stretch to cover the whole line but just in the middle it's not that cool in my opinion so I'm just going to leave it four so as you can see it's really subtle you just have a little bit of Border but it looks quite good but too much is not that great on Windows though border and Border width work really in a weird way basically the more you increase the Border or the Border width the less pting you have on the left um I don't know why but it just works like that so I'm going to show you a few clips and I'm going to tell you the border and the border with so you can actually see what I'm talking about so now I'm using border zero as you can see on the screen now border five 10 15 20 25 and 30 I think that 25 and 30 are sort of the same but I just wanted to show you all of them so did you actually see the difference at the top in the bottom nothing changed but on the left the pading decreased as I increased the value of the bordom until we reached around 2530 and then no pting at all and then from that point on you could have border let's say 100 and you wouldn't see anything different which is quite wa but that's how it works so I've actually decided to to keep the border of Four that works on Linux and it looks good on Windows as well so this is what it looks like on Linux and you already saw them and also this is what it looks like on Windows you you see now on the screen so let's go back to Linux and let's talk about active border another option that works completely different on windows so on Linux if you add the active border width so active border with let's actually exaggerate and use 20 okay that means that as you can see when you go over the elements you get something like this which is awful in my opinion so on Linux that is going to be zero for sure so as you can see now you don't have that line around the buttons and it looks so much better on Windows though the active border width Works sort of like the Border here on Linux so it creates a sort of padding around and the cool thing is that the active background color covers the whole button so it doesn't behave as it does here on Linux that if you've got the Border then you have the light blue in the middle and then you have the border that is sort of white on Windows you actually get the whole button covered by the active color which is kind of cool but there is a problem with accelerator because with a lot of active border width the label and the accelerator might overlap so now on the screen should see the version with the active border width zero then you've got five then you've got 10 and as you can see the color covers the whole button okay even the border which is cool but let's see with 15 okay so as you can see there is this little overlap so to prevent this from happening I found a little solution basically you can add a few spaces after the longest label so down here after the longest label which is last edit location you can add a few spaces here here okay something like that and this basically adds a little space between the label and the shortcut and keeps everything aligned so you should now see that on the screen and it looks a lot better but of course active border width 15 looks a little bit too much so let's go back to four okay so if you're using Windows you should have four here and then the border is four as well and also down here you don't need all of those spaces because we've got less border so you could just have three so on Windows three spaces here and the active border width four on Linux the active border width needs to be zero because it doesn't look good at all and the here you can actually just leave them there because it makes a little bit of space here on Linux as well which is not that bad so you could leave it there perfect in the source code that you can get your using the link in the description I actually check the operating system and change things accordingly so that you just have one file and depending on the operating system of the user the program uses the right options unfortunately I don't have Mark as I said so you need to try this yourself so being the Go menu a menu itself you can Target its elements one by one as we did earlier and in this case it works on Windows as well because this menu is a sub menu and not the main window menu bar so for example the back here could be something like act active background red and then the last eding location could be something like active background and then blue something like that and as you can see now if you go here the back is red and then last is blue and you can now see in the little clip the colors change on Windows as well as you can see now so let's actually go back here I don't want these colors but it was just to show you actually let's make things a little bit better better like that perfect so now we can actually finish a little menu by styling the switch editor menu and you could do something like this so we could do something in the TK menu like this go switch edit a menu and then we could do something like background it's going to be self background menus like this then foreground this is sort of the same as the other menus because of course we are trying to keep everything sort of standard actually foreground menus and then the active background self. active BG menus then active foreground self. active foreground menus and then font same thing 10 then you've got border let's actually do something like this okay border four border width four and and then relief flat and then active border zero here on Linux this needs to be zero but on Windows this should be four okay perfect so let's actually keep zero and see what we get and as you can see this is what we get on Linux okay with you've got the separat the commands and then this is another menu and then another menu or the style and let's actually see what we've got on windows so so now on the screen you should see the final product on Windows which looks quite cool in my opinion remember that you can get the complete source code and support the channel using the link down in the description let me know if you enjoyed the video with a like And subscribe for more videos like this now on the screen you should see another video about Python and TK in so go and check that out and I'll see you in the next one bye

Channel: Fabio Musanni - Programming Channel

Views: 1,538

Keywords: python, python3, programming, coding, learn python, python tutorial, python for beginners, tkinter menu widget, menus in tkinter python, python window menu, add_cascade tkinter python, add_command python tkinter, tkinter submenu, menu bar tkinter python, how to create menu bar in tkinter, tkinter menu bar example, tkinter menu windows 10, tkinter menu linux, tkinter menu options, python programming

Id: 7Z2J7NdsCRc

Length: 39min 50sec (2390 seconds)

Published: Wed Mar 06 2024