Converting a complex tkinter app to use customtkinter

to understand custom tkinder a little bit better I want to convert a ttk app to a custom tkinter app the app I want to convert is the more complex layout app I created earlier if I run this we get this app here I want to convert all of this to the custom tkinder style this isn't going to be very difficult and it's not going to take very long because of that I want this to be an exercise right away I want you guys to convert the app to use custom tkinter it really shouldn't be too hard so pause the video now so pause the video now and try to figure this one out to make sure we are not using any default decantera functionality I am going to comment out the import for tkinter and ttk instead I want to import custom tkinter as ctk if I run this now we are going to get a lot of error messages we have to go through this thing one by one and fix things starting down here I want to change the title from class based app to class-based app with ctk with that we have to look at the app itself so the main app for this one I don't want to have tk.tk instead I want to have ctk dot ctk that is actually all we need inside of the app because this one doesn't actually do very much next up I want to work on the menu for this one we are inheriting from a frame this I want to change to ctk and then ctk frame inside of the init method for this one we just have basic stuff so this can stay as it is although inside of create widgets we have to make a couple of changes first of all the buttons are very easy to update instead of ttk I want to have ctk and then ctk button for the menu slider we cannot use scale anymore this one doesn't exist in custom tkinter instead what we are using for this one is called a ctk slider which means I want ctk and ctk slider after that we have toggle frame this is going to be a frame so ctk dot ctk frame inside of there we have a menu toggle one and menu toggle 2. check button doesn't exist in custom tkinder but we do have a checkbox and that's basically the same thing I want to get rid of those and use ctk and then ctk check box and that should be all we need finally we have an entry widget this one does exist in custom tkinder so I want to have ctk Dot ctk and entry the rest is just layout all of this can stay as it is because it works with custom tkinder like it would work with TDK I can minimize the menu we should be done with this one and that's the most amount of work inside of main we have one frame this I want to change to ctk and then ctk frame the rest in here can stay identical finally we have the entry in here as always I want to change the TDK frame to ctk frame inside of this one we are using a label this we can change very easily to ctk dot ctk label the same for the button this should be ctk dot ctk button with that we should be nearly done although if I run this now we get one error message and that is that Orient inside of the menu doesn't exist the reason for that if I open the documentation a ctk slider we don't have Orient instead we have orientation a very easy thing to change instead of Orient we want to have orientation let's try this now next up we have a typo There's No ctk Label I once again made a typo let me minimize the menu the error message happened inside of entry in here this should be ctk lowercase k let's try this now there's one more error message and that is that custom decanter for label doesn't have background although if I remove this one it should be working now there we go although well it's not ideal yet we do have a couple of things that we want to work on most importantly the sliders aren't great yet but that is very easily fixable all we have to do if I minimize the app and to entry inside of the menu when we are placing the sliders that happens down here I want to remove the East and West now if I run this the sliders are looking much better and let me increase the size a tiny bit here this is all coming together much better although right now the sliders do look quite a bit thin if you want to make them a bit wider you can do that quite easily all you have to do is go to the sliders and in here set a width let's go with 15 possibly a bit too thin I guess 20 is better yeah this one looks much nicer if I maximize the entire thing it still works next up for the buttons I want to have a tiny bit of padding which means when I'm placing the button using the grid method all I really have to do is to add pad X of 4 and Pad y of 4. with that we have a bit of padding and we are starting to run a bit out of space but I hope you see the potential of custom tkinder because all of this is starting to look much better than default tkinter most importantly it is really easy to change all of the elements you see here can be customized and if you have a bit of experience you can actually create pretty sophisticated guis with that that actually look modern

Channel: Atlas

Views: 15,403

Keywords:

Id: U23M379YId8

Length: 6min 26sec (386 seconds)

Published: Sun Jan 01 2023