Build a Basic Form GUI using CustomTkinter
module in Python
CustomTkinter: It is an extension of the Tkinter module in python. It provides
additional UI elements compared to Tkinter and they can be customized in various
possible ways. For example, we can customize a button using CustomTkinter, we can
make customizations like adding an image, making the edges round, adding borders
around it, etc.
To install the customtkinter module in Python execute the below command in the
terminal:
pip install customtkinter
Designing the form
Design phase is an important phase in the cycle of development of an
application. To design the layout of our form we can use paint application or any
other online tool to design the page as given below.
1
Building the initial application
Here we are going to create a simple blank application page using
customtkinter module and setting its appearance as same as of system (Dark or
light mode). Defining a App class in which we have defined the __init__ function
and sets the title and its size.
# Import customtkinter module
import customtkinter as ctk
# Sets the appearance mode of the application
# "System" sets the appearance same as that of the system
ctk.set_appearance_mode("System")
# Sets the color of the widgets
# Supported themes: green, dark-blue, blue
ctk.set_default_color_theme("green")
# Create App class
class App([Link]):
# Layout of the GUI will be written in the init itself
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
# Sets the title of our window to "App"
[Link]("App")
# Dimensions of the window will be 200x200
[Link]("200x200")
if __name__ == "__main__":
app = App()
# Runs the app
[Link]()
2
Desiging the form using the customtkinter module in Python
Here we are going to build the form that we have design above. we are going to
use labels using CTkLabel() function, text field using CTkEntry() function, radio
button using CTkRadioButton() function, etc.
All the widgets are created and placed in the following manner
We create a widget by using the [Link]<widget_name>() (For example,
[Link]() creates a label)
And then we pass the arguments to it depending on the type of the widget.
.grid() is used to specify the position, alignment, padding, and other
dimensions of the widget in our window
Syntax of grid():
grid( grid_options )
Parameters:
row: Specifies the row at which the widget must be placed.
column: Specifies the column at which the widget must be placed.
rowspan: Specifies the height of the widget (number of rows the widget
spans).
columnspan: Specifies the length of the widget (number of columns the
widget spans).
padx, pady: Specifies the padding of the widget along x and y axes
respectively.
sticky: Specifies how the widget elongates with respect to the changes in
its corresponding row and column.
# Python program to create a basic GUI
# application using the customtkinter module
import customtkinter as ctk
import tkinter as tk
# Basic parameters and initializations
# Supported modes : Light, Dark, System
ctk.set_appearance_mode("System")
# Supported themes : green, dark-blue, blue
3
ctk.set_default_color_theme("green")
appWidth, appHeight = 600, 700
# App Class
class App([Link]):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
[Link]("GUI Application")
[Link](f"{appWidth}x{appHeight}")
# Name Label
[Link] = [Link](self,
text="Name")
[Link](row=0, column=0,
padx=20, pady=20,
sticky="ew")
# Name Entry Field
[Link] = [Link](self,
placeholder_text="Teja")
[Link](row=0, column=1,
columnspan=3,
padx=20,
pady=20,
sticky="ew")
# Age Label
[Link] = [Link](self,
4
text="Age")
[Link](row=1, column=0,
padx=20, pady=20,
sticky="ew")
# Age Entry Field
[Link] = [Link](self,
placeholder_text="18")
[Link](row=1, column=1,
columnspan=3, padx=20,
pady=20, sticky="ew")
# Gender Label
[Link] = [Link](self,
text="Gender")
[Link](row=2, column=0,
padx=20, pady=20,
sticky="ew")
# Gender Radio Buttons
[Link] = [Link](value="Prefer\
not to say")
[Link] = [Link](self,
text="Male",
variable=[Link],
5
value="He is")
[Link](row=2, column=1, padx=20,
pady=20,
sticky="ew")
[Link] = [Link](self,
text="Female",
variable=[Link],
value="She is")
[Link](row=2, column=2,
padx=20,
pady=20, sticky="ew")
[Link] = [Link](self,
text="Prefer not to say",
variable=[Link],
value="They are")
[Link](row=2, column=3,
padx=20,
pady=20,
sticky="ew")
# Choice Label
[Link] = [Link](self,
6
text="Choice")
[Link](row=3, column=0,
padx=20, pady=20,
sticky="ew")
# Choice Check boxes
[Link] = [Link](value="Choice 1")
self.choice1 = [Link](self, text="choice
1",
variable=[Link],
onvalue="choice1",
offvalue="c1")
[Link](row=3, column=1, padx=20,
pady=20, sticky="ew")
self.choice2 = [Link](self, text="choice
2",
variable=[Link],
onvalue="choice2",
offvalue="c2")
[Link](row=3, column=2, padx=20,
pady=20,
sticky="ew")
# Occupation Label
[Link] = [Link](self,
7
text="Occupation")
[Link](row=4, column=0,
padx=20,
pady=20,
sticky="ew")
# Occupation combo box
[Link] = [Link](self,
values=["Student",
"
Working Professional"])
[Link](row=4, column=1,
padx=20, pady=20,
columnspan=2, sticky="ew")
# Generate Button
[Link] = [Link](self,
text="Generate Results")
[Link](row=5, column=1,
columnspan=2,
padx=20, pady=20,
sticky="ew")
# Text Box
[Link] = [Link](self, width=200,
8
height=100)
[Link](row=6, column=0, columnspan=4,
padx=20, pady=20,
sticky="nsew")
if __name__ == "__main__":
app = App()
[Link]()
Complete application using customtkinter module in Python
In the previous step we have designed our form UI and now we are going to
add some more functionality of generate result and printing the all information
entered by user in the result block. For that we are going to create two function
given below.
generateResults(): This function is used to put the text into the textbox.
createText(): Based on the selected preferences and entered text, this
function generates a text variable that sums up all the entries and returns it.
# Python program to create a basic form
# GUI application using the customtkinter module
import customtkinter as ctk
import tkinter as tk
# Sets the appearance of the window
# Supported modes : Light, Dark, System
# "System" sets the appearance mode to
# the appearance mode of the system
ctk.set_appearance_mode("System")
9
# Sets the color of the widgets in the window
# Supported themes : green, dark-blue, blue
ctk.set_default_color_theme("green")
# Dimensions of the window
appWidth, appHeight = 600, 700
# App Class
class App([Link]):
# The layout of the window will be written
# in the init function itself
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
# Sets the title of the window to "App"
[Link]("GUI Application")
# Sets the dimensions of the window to 600x700
[Link](f"{appWidth}x{appHeight}")
# Name Label
[Link] = [Link](self,
text="Name")
[Link](row=0, column=0,
padx=20, pady=20,
sticky="ew")
# Name Entry Field
10
[Link] = [Link](self,
placeholder_text="Teja")
[Link](row=0, column=1,
columnspan=3, padx=20,
pady=20, sticky="ew")
# Age Label
[Link] = [Link](self, text="Age")
[Link](row=1, column=0,
padx=20, pady=20,
sticky="ew")
# Age Entry Field
[Link] = [Link](self,
placeholder_text="18")
[Link](row=1, column=1,
columnspan=3, padx=20,
pady=20, sticky="ew")
# Gender Label
[Link] = [Link](self,
text="Gender")
[Link](row=2, column=0,
padx=20, pady=20,
sticky="ew")
# Gender Radio Buttons
[Link] = [Link](value="Prefer \
not to say")
11
[Link] = [Link](self,
text="Male",
variable=[Link],
value="He is")
[Link](row=2, column=1,
padx=20, pady=20,
sticky="ew")
[Link] = [Link](self,
text="Female",
variable=[Link],
value="She is")
[Link](row=2, column=2,
padx=20, pady=20,
sticky="ew")
[Link] = [Link](self,
text="Prefer not to say",
variable=[Link],
value="They are")
[Link](row=2, column=3, padx=20,
pady=20, sticky="ew")
# Choice Label
[Link] = [Link](self,
text="Choice")
[Link](row=3, column=0,
padx=20, pady=20,
12
sticky="ew")
# Choice Check boxes
[Link] = [Link](value="Choice 1")
self.choice1 = [Link](self,
text="choice 1",
variable=[Link],
onvalue="choice1", offvalue="c1")
[Link](row=3, column=1,
padx=20, pady=20,
sticky="ew")
self.choice2 = [Link](self,
text="choice 2",
variable=[Link],
onvalue="choice2",
offvalue="c2")
[Link](row=3, column=2,
padx=20, pady=20,
sticky="ew")
# Occupation Label
[Link] = [Link](self,
text="Occupation")
[Link](row=4, column=0,
padx=20, pady=20,
sticky="ew")
13
# Occupation combo box
[Link] = [Link](self,
values=["Student",
"Working Professional"])
[Link](row=4, column=1,
padx=20, pady=20,
columnspan=2, sticky="ew")
# Generate Button
[Link] = [Link](self,
text="Generate
Results",
command=[Link])
[Link](row=5, column=1,
columnspan=2,
padx=20,
pady=20, sticky="ew")
# Text Box
[Link] = [Link](self,
width=200,
height=100)
[Link](row=6, column=0,
columnspan=4, padx=20,
pady=20, sticky="nsew")
# This function is used to insert the
14
# details entered by users into the textbox
def generateResults(self):
[Link]("0.0", "200.0")
text = [Link]()
[Link]("0.0", text)
# This function is used to get the selected
# options and text from the available entry
# fields and boxes and then generates
# a prompt using them
def createText(self):
checkboxValue = ""
# .get() is used to get the value of the checkboxes and entryfields
if self.choice1._check_state and self.choice2._check_state:
checkboxValue += [Link]() + " and " + [Link]()
elif self.choice1._check_state:
checkboxValue += [Link]()
elif self.choice2._check_state:
checkboxValue += [Link]()
else:
checkboxValue = "none of the available options"
# Constructing the text variable
text = f"{[Link]()} : \n{[Link]()} {[Link]()} years old
and prefers {checkboxValue}\n"
text += f"{[Link]()} currently a {[Link]()}"
15
return text
if __name__ == "__main__":
app = App()
# Used to run the application
[Link]()
16