Python Tkinter Grid Geometry Manager Part 1

hello guys thinking through code over here and finally gonna talk about the grid geometry manager after all those videos about frames and theory we're gonna get right into it and show you two basic concepts on this video i made it into part one i'm gonna make another part twos because there's a lot to cover with grid geometry manager and there's a lot of things that can happen with it so without further ado let's get right to it so grid is very simple it's just the grid from what you can see in front of you on the screen you're going to have your columns numbered on the top from 0 in the far left 1 2 3 and so forth all the way to the far right and then your rows are actually going to be on the left and they're gonna be starting at zero on the top and then going bigger and bigger as you go down so things stack up on each other so when you place something say for example when you're going to first place something into your gui application most likely you're going to play place it in the grid where you have your column 0 and your row 0 as displayed right in front of you so when you decide to place something to the right you're going to obviously place it into the column one if you want to place something below the element that you placed on zero zero you're gonna place it on row one column zero and that's how you're going to place things on your on your gui application now the size of it all is going to depend on many other factors that i want to explain on further videos so you're going to be able to expand some columns and rows depending on how you want your gui application to look at so here's the first element we're going to talk about we're simply going to talk about how we've been calling grid without any arguments inside of it or any row configurations or column configurations we're going to get right to it with a practical example okay so we go into our practical side of the video from what you see i deleted the previous lines of code i want you guys to gain more practice and to code as i do remember programming is all about practice the more projects you do the better you'll be i also divided my window into the styling widgets and grid configuration sections that's in order to be more organized i think it's a good habit to have because in the industry if you want to make someone review your code or edit your code it's better for them to be well oriented and it's also easier for you and if you write code a month ago you want to get back to it and you want to be able to properly understand it so we're going to create our mainframe as always we call the ttk module and within it we're going to use our frame class our parent widget is going to be a root our main window we're gonna give it a width of 250 and a height of 250 so it's going to be a perfect square and like i previously explained guys you can create as many widgets as you want but as long as you don't place them in your window they're not going to appear so we're going to call our grid method when we run our code we actually see that we have a 250 by 250 square which is obviously we know that that's our frame that's a clear indication there to make it easier though we're going to add a styling element we're going to give it a color and to do so you already know we need to create an object from the style class so ttk module dot operator and we call our style class okay so now that we have our object we need to configure our style and associate it to our mainframe so s configure the name that we're going to give it is mainframe t frame because we're dealing with a frame and the background color is going to be we're going to go on color hunt and you know what i really like this dark color so we're going to take it we take the hexadecimal code paste it in there and don't forget to add your hashtag and then last step obviously we need to give it a style argument so style argument is going to be mainframe dot t frame the configuration that we just created if we run this there we have it we have a perfect square with the with the color that we just associated to it so now we're we're guaranteed that our frame is you is there and it's popping there right um this is very important to show to show you guys that when you simply call grid the automatic thing the default thing that tk enter will do is that it's going to place it into the column 0 and to the row 0 of your gui application so right here we're on column zero and row zero because we simply call grid we didn't configure anything and uh to properly show that we're gonna actually create another frame so we're gonna create frame two sdk frame also put it on the same parent widget onto our main window we're going to give it a smaller width so 100 and our height is also going to be 100 so another perfect square is just going to be a little bit smaller and also another style so s configure once again give it a name frame two associated to the t frame class [Music] and for in order for it to show let's give it a color um you know what let's the next one in line that one right there i think it's a like a coffee cream type of color i'm not not really good with colors guys so we add the style arguments frame 2 [Music] t and what do we do we're gonna place it into our gui application with the grid method and when we run this we realize that it's right below it and this is another default of simply just calling grid right our first frame our mainframe we called it in the same parent widget if they're called in the same parent widget and you just call grid without any configurations without saying that this is in row one or column two or column zero they're simply all going to show up in the first column which is column 0. so they're all on the first column but they're going to stack up on each other so this is row 1 right here and this is row 2. actually sorry this is row 0 and this is row 1 because in computer science we start at zero and not at one so first row second row the more you call with grid they're only gonna stack amongst each other our second topic of this video is how columns and rows are going to compress themselves in order to take the size of what they're containing this might be easy to understand when you say it out loud but it can actually lead to some confusion when people decide to put different things in a container they realize that some sizes are changing and don't really understand why we're going to portray this in our next example so this concept was actually properly displayed in the simple gui application we just ran whenever our gui showed up i made it a little bit bigger by the way our second frame now it's a bit 200 by 200 we see that our column zero is going to take the space of our first frame so our 250 by 250 our column realized that okay we're at a width of 250 so my width is going to be 250 and whatever smaller in after that is simply going to be centered in the column so from what you can see our row also took the height of 250 and our roll our second row over here took the height of a hundred so main thing to understand here is that your rows and columns do not have a set height to them they're simply gonna compress themselves in order to take the size of what they're containing and also for the other rows and columns the other rows and columns don't have anything in them so what's their height and size it's zero that's why you don't see anything there unless i expand this you can really see that the window can really take a lot more inside of it but that's not what we're gonna set our gui application to be for right we're actually gonna give it something specific so like like i said your column here took the space of whatever is inside of it and in order to properly show that also we can actually change the main parent for our frame our second frame instead of putting our frame on our main window how about we put it on our main frame so if we put the parent mainframe here and we put our second frame into our mainframe instead of putting it in the window when we run our application we notice something very strange what happened here is that since we're on the row zero and column zero of our mainframe those columns took the space of what's in them and this is something that people get confused sometimes when they're like how come i put something in in my frame and then i could not see it and obviously this is gonna happen more with frames now with buttons or labels but this happens a lot and people get confused and it's simply because of this specific concept the columns and rows of my mainframe are taking the space that is of what they're containing so they're simply compressing themselves to show that we're having our second frame here and we don't see our mainframe and in order to fix these type of situations you could add a pad and this is padding so we're going to put a padding in the x direction of 10 pixels and we're going to put a padding in the y direction of 10 pixels and if we rerun our application there we have it we see that our mainframe is still there simply that the concept of our columns and rows taking the space of what they're containing what was exactly what was hiding it so or your mainframe is still there so this is just something very little nitty gritty detail that i want people to just be aware of because people do get confused it's very possible that you know they create a frame they put they put a button inside of it and they don't they don't see the frame anymore and it's because of that concept so that's it for our first video about grid geometry management grid is very easy to use and when you first call it like as it is without any arguments these are the type of things you're gonna face we're gonna create a second video in order to show the more complex side of grid geometry and this is also in order to keep the video short and to only show certain things per video so that you guys can absorb the most out of it and to make everything clear and concise like i said coding and programming can be a lot to handle sometimes and you really need to practice it but really taking baby steps can help you a lot so as i usually say guys if you like this video click the like button subscribe and put the bell for notifications if you have any comments for me i am more than willing to take them have a good one

Channel: Thinking Through Code

Views: 3,562

Keywords: #python #Tkinter #programming #coding

Id: reJ8kTqQsTY

Length: 11min 3sec (663 seconds)

Published: Mon May 02 2022