Tkinter Beginner - Creating Frames and Styling

all right guys welcome to thinking through code and we continue with our basic concepts for tk enter gui applications on this video i'm gonna show you a preliminary video before we get into real geometry management using grid uh we're basically just gonna create a frame and style a frame this is gonna be very useful because we need something to illustrate how to use geometry management or else there is no clear indication and this is also uh really good for you to learn how to already kind of put your foot in the door in learning how to style an application as it is because the method is going to be used also for other widgets like buttons labels and entry widgets so let's get started perfect so now that we're right into it basically we know exactly what we need to import in order to create a gui from tk inter uh we got tk right here tk enter sdk and from tiki enter we are we actually imported the module ttk we also created our g our gui window or with a root over here and we made it so that it's non-resizable so if we run this application we see that we simply just have the default size application i didn't specify a size so it's giving it its default window size and our application is running everything's okay right so we're going to create a frame we're going to create a mainframe that is going to contain everything inside of our of our gui application so mainframe is going to be equal to we're going to use the ttk mod module the dot operator and we're going to call the the class that is frame okay so inside of tk enter ttk you see that there's a class that is under the name of frame you click on that well actually write it and you have the parentheses there so in this class when we call it we just created an object of it all right so in order to use it we need to specify the parent widget so it's basically tk enter when you're going to call a class you're you're going to specify w the first thing you usually put as an argument for a class is where is its parent and how i showed you guys that tkinter has parent and child widgets so one is related to the other the first parent for our mainframe is obviously gonna be our window right here right so the parent we're gonna put root and then after that you can specify the width i'm gonna put 400 and the height we're gonna make a perfectly square frame okay now if we run this application bam what do we notice oh something's a little bit off here right we still get the same default size that uh our root has so now that we packed we we pretty much put the the main frame inside of it we should have 400 by 400 but that's not what we're getting here um the reason why is that you did in fact create an object of the frame class but you didn't place it inside of your way inside of your window right so that's why you need a geometry manager method and the one that i totally recommend you guys should use and i'm going to explain it to you guys how to use it on on this video is the grid so mainframe dot grid and then we're gonna close our main window right now we're gonna rerun it and what do we see we have our mainframe of 400 by 400 right so what we did right now is basically it's it's how i explained it on your on our previous video there is geometry managers like grid pack and place grid being the best one by the way because if you have a lot of things that are implied on your on your gui application sometimes i've tried pack and place before and it could be get a little bit of a mix up grid is the the most user friendly one and the one that i totally recommend and then you have your your frames right which are actually helpful in geometry management but don't forget they're just a widget on their own it's a widget that can contain other widgets inside of it so like i said you create a frame but you haven't placed it yet as soon as you place you run this line of code and you call your geometry manager that's when it truly shows and it is placed on your window moving on i want to show you guys before we actually get into the grid geometry management method i want to show you guys how we can style your frames uh this is going to make it so much easier for us to understand because it is actually far more visual so i'm going to show you guys how to use the styling method okay guys so when we run our app right now what do we get we get a 400 by 400 window we already know that it's because we have a frame in there and we place the frame there in there to be 400 by 400 that we know but anyone could have done that by simply just setting the geometry of root like a min size or by calling the geometry method right so in order for this to be much more illustrate illustrative and really show you guys a visual example we're going to add a styling element to our frames that we're going to add in here to do so it's written in the documentation as well you need to create a style object so you call the class that is under the name of style under the ttk module and then you configure a style by giving it a name and associating it to the class that you're going to use your widget on so number one we're going to create the style object so s is going to be equal to ttk we're going to call our module dot operator and then style that's done and then we can s configure we're going to give it a name mine is going to be mainframe because i'm going to use it for the name for the name mainframe d frame because my class is on the frame class and then for background i'm going to give it blue in order to apply this style this style we use the style argument so style is going to be co2 we're going to give it the name that we pretty much gave when we created the style configuration [Music] we're gonna run it and there we have it we have a blue frame finally now this is actually showing this isn't the default window obviously this shows now that we've done some some coding inside of it and we actually did input a frame now just to display another purpose we can have many configurations of the same class so s configure so you could have as many configuration as many configurations as you want right like i said you could have many frames you could have many buttons and if you want them to have different specific colors it really is up to you you just have to name them differently so i'm going to create another one so mainframe two associated to the class d frame [Music] and then for our background color i'm going to use a hexadecimal code and i'm going to go into colorhaunt.com and i really advise you guys to go here because this is basically professional professionals that associated these colors that will look good in either a website or a gui application so i'm gonna go let's say for example i really like this green color so i'm gonna go with this green color i copy the hexadecimal color and then i can use it here so we're going to paste it there we go and by the way don't forget the number sign over here and then by simply calling the second frame mainframe 2 which is this configuration we're not no longer going to use this one but this one and we're going to display that by the fact that we change colors that's it it's as simple as that and this is going to be so much so much easier for us to actually display how the grid works because if we're moving things around in our window but we can't see them because they're all the same color then it just doesn't make sense so this is how you basically style your frame oh and by the way in order to make it raised for example relief we're going to put raised if we rerun our application you see this tiny border right here showing us as if it's popping out and it's raised it's not properly shown weight and in order to do so how about we're gonna comment out the resizable and then rerun our application if we make this bigger there you have it your frame is kind of raised a little bit and you can show it a lot better now and this is basically so many features of the styling application that you can use right so that's it and you can there's so many guys you can use sunken you could use solid it's really up to you and how you wanted it to look so that's the main frame that we just created and we just styled and now we reached the end of our video uh by the way i'm still keeping it a little bit shorter i don't want to just add grid into this video as well i want you guys to pretty much focus on just one to two topics max per video so on this one it was just going to be frames and styling we're going to get into the grid no don't worry about it i'm going to teach you about geometry management but this one was really supposed to just show a little bit more of an illustration that is going to help us out so as always guys if you like this video don't forget to click on the likes the subscribe the notification button if you do not like it or if you have any criticism from me feel free to leave a comment guys i'm always i'm all ears for you and have a good one

Channel: Thinking Through Code

Views: 3,295

Keywords: #Python #Tkinter #Programming #Coding #GUI

Id: 7OTRTs2W4sE

Length: 9min 41sec (581 seconds)

Published: Sat Apr 30 2022