What is DragTK for?

Python is one of the most widely taught programming languages in schools — but it doesn't come with a visual design tool. If you've ever used Visual Basic or similar tools, you'll know how useful it is to be able to see your app taking shape as you build it.

DragTK fills that gap. You drag widgets (buttons, labels, text boxes and more) onto a canvas, arrange them how you want, and DragTK writes the Tkinter Python code automatically. You can then add your own logic in the code editor, and run the app directly from within DragTK.

What you'll need

Before you start, make sure you have the following installed on your computer:

How the lessons are structured

The Learn section is split into two parts:

Widget Reference — a lesson for each type of widget you can add to your app, covering how to place it in DragTK and how to work with it in code. Start with Button and Label if you're new, then work through the rest as you need them.

Example Projects — guided walkthroughs that build complete apps from start to finish, using multiple widgets together. These are a great next step once you're comfortable with the basics.

Overview

When you open DragTK, you'll see the main window divided into several areas. Here's what each one does:

The Widget Panel

On the left side of the screen is the widget panel. This lists all the widgets you can add to your app — buttons, labels, entry fields, and more. Click any widget to add it to the canvas.

The Canvas

The large area in the centre of the screen is the canvas. This represents your app's window. Widgets you add appear here, and you can drag them around to position them wherever you want.

The Properties Panel

On the right side is the properties panel. Here, you can switch between the widget properties, canvas properties, and global widget properties tabs.

Widget Properties

When you click on a widget in the canvas, its properties appear here — things like text, font, colour, and size. Make your changes and click Apply to update the widget.

This is also where you set the widget's ID — the name used to reference it in your Python code. It's worth giving widgets meaningful names like button_submit or label_result rather than the default button1.

Canvas Properties

In the canvas properties tab, you can change certain settings relating to the canvas. The canvas represents your app window. You can change the title, width, height, background colour, and scale mode for your app. You can also toggle grid snapping on and off. By default, grid snapping is on and when on widgets on the canvas move by 10px to help you align your widgets more easily.

Global Widget Properties

The global widget properties panel lets you update the properties of all widgets of a specific type on your canvas. For example, if you have added 10 labels to your project, and decide later you want to change the font style of all labels - instead of manually selecting and changing the font style of each label, you can use global properties to update the font style of all labels at once.

The Code Tab

At the top of the center panel you'll see two tabs — Canvas and Code. Clicking Code switches to the code editor, where you can see and edit the Python that DragTK has generated from your canvas layout.

This is where you add your own logic — what happens when a button is clicked, how to calculate a result, what to display to the user.

Running your app

When you're ready to test, click the Run button in the toolbar. DragTK saves your project and launches it as a real Python application. Your app window will open and you can interact with it just as a user would.

Step 1 — Add a button

Open DragTK. You'll start with an empty canvas. In the widget panel on the left, click Button. A button will appear on the canvas.

Drag the button to position it somewhere near the top of the canvas. Don't worry about being precise — you can always move it later.

Step 2 — Add a label

Now click Label in the widget panel. A label will appear on the canvas. Drag it below the button.

Step 3 — Name your widgets

Click on the button to select it. In the properties panel on the right, find the ID field and change it to button_greet. Click Apply.

Now click on the label and change its ID to label_output. Click Apply.

Step 4 — Write the button code

Click the Code tab at the top. Scroll down until you find the Buttons section — you'll see a function called on_button_greet_click with pass inside it.

Delete pass and replace it with this:

Step 5 — Run it

Click the Run button in the toolbar. You will be prompted to save the app first. Once saved, your app window will open. Click the button — the label should update to say Hello from DragTK!

That's it — you've built and run your first Python GUI app. From here, explore the widget lessons to learn what each component can do, or jump straight into one of the example projects.

What is a Button?

Adding a Button in DragTK

Writing code for a button click

Adding a button to the canvas also adds a function to your code. Here's how to find it and add your own logic.

Enabling and disabling a button

Sometimes you want to prevent a button from being clicked until certain conditions are met — for example, not allowing a submit button to be clicked if the user hasn't filled in a field. You can control this with .config(state=).

Common properties

These can be set in the Properties panel or updated at any time in code using .config().

Try it yourself

What is a Label?

Adding a Label in DragTK

Updating a label's text from code

The most common thing you'll do with a label is update its text when something happens — a button is clicked, a calculation is done, a result is ready to show. You do this with .config().

Reading a label's current text

Sometimes you need to read what a label is currently displaying — for example, to check a value or use it in a calculation. Use .cget("text") to do this.

A practical example — if your label is displaying a number (like a score), you can read it, convert it, add to it, and write it back:

Common properties

These can be set in the Properties panel or updated at any time in code using .config().

Try it yourself

What is an Entry?

Adding an Entry in DragTK

Reading what the user typed

Once the user has typed something, you read it in your code using .get(). This is almost always done inside a button command — the user types something, then clicks a button to trigger the action.

Clearing an entry

After reading the user's input it's good practice to clear the entry so it's ready for the next input. Use .delete() to do this.

Add this line after your .get() call so the field clears once the input has been read:

Common properties

These can be set in the Properties panel or updated at any time in code using .config().

Try it yourself

What is a Combobox?

Adding a Combobox in DragTK

Setting the list of options

When DragTK adds a combobox to your canvas it automatically creates a function in the code that defines what items appear in the dropdown. Switch to the Code tab and scroll to the Combobox Option Loader Functions section — you'll find something like this:

Replace the placeholder strings with your actual options. Each item in the list is a string, separated by commas:

Reading the user's selection

Just like an Entry, you read the currently selected value using .get(). This is typically done inside a button command — the user picks an option, then clicks a button to confirm.

Setting a default selected value

By default the combobox shows nothing until the user picks something. You can set a starting value so something is always selected when the app opens. If you want to initialise things like this in your app, use the on_load function found in the --- Widget Handlers --- section:

Common properties

These can be set in the Properties panel or updated at any time in code using .config().

Try it yourself

What is a Checkbutton?

Adding a Checkbutton in DragTK

Understanding the auto-generated variable

When DragTK adds a checkbutton to your canvas, it automatically creates a BooleanVar — a special Tkinter variable that tracks whether the checkbutton is ticked or not. You'll see it referenced in the generated code like this:

The variable is named after your checkbutton's ID with _var added to the end. So if your checkbutton ID is checkbutton_cheese, the variable tracking its state is checkbutton_cheese_var. This is the variable you'll use in your own code to find out whether the box is ticked.

Reading whether a checkbutton is ticked

To find out if a checkbutton is ticked, call .get() on its variable. This returns True if ticked and False if not — which you can use directly in an if statement.

    label_output.config(text="Extra cheese: Yes")
else:
    label_output.config(text="Extra cheese: No")

Checking multiple checkbuttons

When you have several checkbuttons, check each one's variable in turn and build up your result. Here's an example with three toppings:

toppings = []
          
if checkbutton_cheese_var.get():
    toppings.append("Extra cheese")
if checkbutton_pepperoni_var.get():
    toppings.append("Pepperoni")
if checkbutton_mushrooms_var.get():
    toppings.append("Mushrooms")
    
if toppings:
    label_output.config(text="Toppings: " + ", ".join(toppings))
else:
    label_output.config(text="No toppings selected")

Common properties

These can be set in the Properties panel or updated in code using .config().

Try it yourself

What is a Radiobutton?

Adding Radiobuttons in DragTK

Setting each button's value

Each radiobutton belongs to a radiogroup, for example delivery_group. All radiobuttons in a group have a value. The selected radiobutton will determine the value stored in delivery_group when you later check what option a user has selected from the group.

In DragTK, whatever you set as the text property will also be the value of the radiobutton. In simple terms, make sure that each radiobutton you add to a group has unique text. By default, every new radiobutton has its text set to "Radiobutton". You must ensure each radiobutton has a unique value for its text or the radiobutton group will not function as expected.

Reading the selected option

To find out which radiobutton is currently selected, call .get() on the group variable. This returns the value of whichever button is selected — which is why setting unique values in the previous step matters.

selected = delivery_group.get()

if selected == "Standard":
    label_output.config(text="Standard delivery: 3-5 days")
elif selected == "Express":
    label_output.config(text="Express delivery: next day")
else:
    label_output.config(text="Please select a delivery option")
    
    

Setting a default selection

You can pre-select a radiobutton when the app opens by calling .set() on the group variable. Pass in the value of whichever button you want selected by default:

Common properties

Try it yourself

What is a Text Area?

Adding a Text Area in DragTK

Reading content from a Text Area

Reading from a Text Area works differently to an Entry. Instead of just .get(), you need to pass two positions — where to start reading and where to stop. To read everything the user has typed, use .get(1.0, tk.END).

Writing content to a Text Area

You can insert text into a Text Area from your code using .insert(). This is useful for pre-filling the area with placeholder text, or displaying a longer result that wouldn't fit in a label.

To insert text at the end of whatever is already there, use tk.END as the position instead:

Clearing a Text Area

To erase everything in a Text Area, use .delete() with the same start and end positions as .get():

A common pattern is to read the content, do something with it, then clear the area ready for the next input:

Common properties

These can be set in the Properties panel or in code.

Try it yourself

This challenge asks you to create an app which saves text to a file. The following example code reads from a textarea called textarea_notes, saves the content of it to a file called note.txt (which will save itself in the same folder as the DragTK app), and then update the label to state the file was saved and clear the textarea on screen.

What is a Listbox?

Adding a Listbox in DragTK

Setting the starting items

When DragTK adds a listbox, it generates an option loader function in your code that defines the default items shown when the app first opens. Switch to the Code tab and find it — it will look like this:

def load_listbox_items_options():
    # Return the list of items for listbox_items
    return ['Item 1', 'Item 2', 'Item 3']

Replace the placeholder strings with your own starting items:

def load_listbox_items_options():
    return ['Milk', 'Bread', 'Eggs']

Reading the selected item

When the user clicks an item in the listbox, that item becomes selected. To read which item is selected you need two steps — first get the index of the selection, then use that index to get the text of the item.

selection = listbox_items.curselection()
          
if selection:
    selected_item = listbox_items.get(selection[0])
    label_output.config(text="Selected: " + selected_item)
else:
    label_output.config(text="Nothing selected")

Adding items at runtime

You can add new items to a listbox while the app is running using .insert(). A natural way to do this is to pop up a dialog asking the user what they want to add, then insert their response into the list.

new_item = simpledialog.askstring("Add Item", "Enter a new item:")
          
if new_item:
    listbox_items.insert(tk.END, new_item)

Deleting the selected item

To remove an item, first check something is selected, then use .delete() with the selected index:

selection = listbox_items.curselection()
          
if selection:
    listbox_items.delete(selection[0])
else:
    messagebox.showwarning("Nothing selected", "Please select an item to delete.")

Common properties

Try it yourself

What is a Treeview?

Adding a Treeview in DragTK

Setting columns and data

When DragTK adds a Treeview it generates a data function in the Treeview Functions section of your code. This function returns two things — a tuple of column headings and a list of row tuples. The rest of the generated code calls this function automatically to build the table when the app starts.

def get_treeview_students_data():
    headers = ("Heading1", "Heading2", "Heading3")
    sample_data = [
        ("C1 Item1", "C2 Item1", "C3 Item1"),
        ("C1 Item2", "C2 Item2", "C3 Item2"),
    ]
    return headers, sample_data

Update the headers tuple and sample data to match your own columns and starting values:

def get_treeview_students_data():
    headers = ("Name", "Subject", "Grade")
    sample_data = [
        ("Alice", "Maths", "A"),
        ("Bob", "Science", "B"),
        ("Charlie", "English", "A"),
    ]
    return headers, sample_data

Reading the selected row

When the user clicks a row, you can read its values using .selection() to get the selected item ID, then .item() to retrieve the values from it.

selected = treeview_students.selection()
          
if selected:
    row_values = treeview_students.item(selected[0], 'values')
    label_output.config(text="Selected: " + " | ".join(row_values))
else:
    label_output.config(text="No row selected")

Adding a row to the Treeview

You can insert a new row into the treeview at runtime using .insert(). A clean way to do this is to collect the values using simpledialog.askstring() — one prompt per column — then insert them as a tuple.

name = simpledialog.askstring("Add Row", "Enter name:")
subject = simpledialog.askstring("Add Row", "Enter subject:")
grade   = simpledialog.askstring("Add Row", "Enter grade:")
        
# Make sure the user did not leave name, subject, or grade blank before inserting
if name and subject and grade:
    treeview_students.insert('', tk.END, values=(name, subject, grade))

Deleting the selected row

To remove a row, read the current selection and call .delete() with the selected item ID. This is similar to deleting from a Listbox, but instead of using an index number you pass the item ID directly.

selected = treeview_students.selection()
            
if selected:
    treeview_students.delete(selected[0])
else:
    messagebox.showwarning("Nothing selected", "Please select a row to delete.")

Loading data from a CSV file

Rather than hardcoding data into the function, you can read it from a CSV file. This is useful when working with larger datasets, or when you want the data to come from a file that can be updated independently of the app.

Suppose you have a file called students.csv in the same folder as your project, containing:

Replace your data function with this to read from the file instead:

def get_treeview_students_data():
    file = open("students.csv", "r")
    lines = file.readlines()
    file.close()
    
    headers = tuple(lines[0].strip().split(","))
    rows = []
    for line in lines[1:]:
        values = line.strip().split(",")
        if values:
            rows.append(tuple(values))
    
    return headers, rows

Saving changes back to the CSV file

If the user adds or removes rows while the app is running, you can write the current treeview contents back to the CSV file so the changes are saved for next time the app opens.

First, add a Save button to your canvas. In its command function, loop through every row currently in the treeview, collect the values, and write them back to the file:

# Get the column headings
headers = treeview_students["columns"]
    
# Collect all rows currently in the treeview
rows = []
for item_id in treeview_students.get_children():
    values = treeview_students.item(item_id, 'values')
    rows.append(values)
    
# Write headers and rows back to the file
file = open("students.csv", "w")
file.write(",".join(headers) + "\n")
for row in rows:
    file.write(",".join(row) + "\n")
file.close()
    
messagebox.showinfo("Saved", "Data saved to students.csv")

Common properties

Try it yourself

What is the Image widget?

Adding an Image in DragTK

Understanding the generated code

When you add an image, DragTK generates code that loads the file from its location on your computer and displays it. Switch to the Code tab to see it — it will look something like this:

try:
    my_image_photo_orig = tk.PhotoImage(file="C:/Users/you/Pictures/logo.png")
    my_image_photo = my_image_photo_orig.subsample(
        max(1, my_image_photo_orig.width() // 150),
        max(1, my_image_photo_orig.height() // 100))
    my_image = tk.Label(root, image=my_image_photo)
except Exception as e:
    my_image = tk.Label(root, text="Image load failed.\n\nHas the image\npath changed?\n\nPath: C:/Users/you/Pictures/logo.png")

There are two important things to notice here:

1. The file path is absolute. The full location of the image on your computer is hardcoded into the generated code — for example C:/Users/you/Pictures/logo.png. This means the app knows exactly where to find the image when it runs.

2. The code is wrapped in a try/except. If the image file can't be loaded — for any reason — the app won't crash. Instead it shows a label with an error message explaining what went wrong.

The image file path — what can go wrong

Because the file path is stored as an absolute location, the image will only load correctly as long as the file stays in the same place. If you move, rename, or delete the image file, the app will show the error message instead of the image when it runs.

Swapping an image from code

Because the image widget is a Label under the hood, you can swap the displayed image at runtime from a button command — useful for things like showing different diagrams, cycling through pictures, or updating a logo based on a user's selection.

To swap the image, load a new PhotoImage and update the label using .config():

new_photo = tk.PhotoImage(file="C:/Users/you/Pictures/logo2.png")
my_image.config(image=new_photo)
my_image.image = new_photo

Common properties

The image widget is a Label — so the same properties apply. The most relevant ones when working with images are:

Try it yourself

About this project

In this project you will build a simple app with a single button. Step by step, the app will ask the user questions using dialog boxes, store their answers in variables, and then display a personalised message using a messagebox.

Along the way you'll learn two fundamental programming concepts — variables and sequence — that underpin almost every program ever written.

Step 1 — Set up the canvas

Open DragTK and start a new project. Add a single Button to the canvas. Set its text to Start and give it the ID button_start. Click Apply.

Step 2 — Show a welcome message

Switch to the Code tab and find the button_start_command function. Delete pass and add the following line:

messagebox.showinfo("Welcome", "Hello! Let's get to know each other.")

Run the project and click the button. A messagebox should appear with your welcome message. This is the first step in the sequence — the program greets the user before asking them anything.

Step 3 — Ask for the user's name

Now add a dialog box that asks the user to type their name. The answer gets stored in a variable called name. Add this line below the messagebox line:

name = simpledialog.askstring("Your Name", "What is your name?")

Run the project and click the button. First the welcome message appears, then after you click OK the dialog box appears asking for a name. This is sequence in action — one step happens, completes, then the next begins.

Step 4 — Ask for the user's age

Add a second dialog below the first to ask for the user's age. This time we use askinteger which only accepts whole numbers:

age = simpledialog.askinteger("Your Age", "How old are you?")

Step 5 — Use the variables in a message

Now add a final messagebox that uses both variables to display a personalised message. Add these lines below the age dialog:

message = "Nice to meet you, " + name + "!"
message += "\nYou are " + str(age) + " years old."
messagebox.showinfo("Hello!", message)

The complete button command

Here is the full sequence of code inside the button command — read through it line by line and think about what happens at each step:

def button_start_command():
    messagebox.showinfo("Welcome", "Hello! Let's get to know each other.")

    name = simpledialog.askstring("Your Name", "What is your name?")
    age = simpledialog.askinteger("Your Age", "How old are you?")

    message = "Nice to meet you, " + name + "!"
    message += "\nYou are " + str(age) + " years old."
    messagebox.showinfo("Hello!", message)

Other messagebox and dialog types

There are several other messagebox and dialog types worth knowing about:

Here is an example using askyesno() — notice it returns True or False which you can use directly in an if statement:

answer = messagebox.askyesno("Question", "Do you like Python?")

if answer:
    messagebox.showinfo("Great!", "Python is brilliant.")
else:
    messagebox.showinfo("Oh no!", "Give it time — it grows on you!")

Extension challenges

About this project

In this project you will build a working calculator app. The focus is on designing a clean UI with a grid of buttons and understanding how each button click builds up an expression in an Entry field — which is then evaluated and the result displayed when the user clicks equals.

This project is a great exercise in layout and repetition — you'll add a lot of buttons, and by the end you'll have a good feel for positioning widgets on a canvas.

Step 1 — Design the layout

Start a new project in DragTK. The finished calculator needs the following widgets — take a moment to plan where they'll sit before adding them:

Step 2 — Program the digit buttons

Each digit button does one simple thing — it appends that digit to whatever is already in the entry field. Switch to the Code tab and add the following inside each digit button's command function.

Here is button 1 as an example — the pattern is identical for every other digit, just change the character being inserted:

def on_button1_click():
    entry_calculation.insert(tk.END, "1")

def on_button2_click():
    entry_calculation.insert(tk.END, "2")

def on_button3_click():
    entry_calculation.insert(tk.END, "3")

Repeat this for buttons 4 through 9 and button 0, inserting the matching digit string each time.

Step 3 — Program the operator buttons

The operator buttons work in exactly the same way as the digit buttons — they just insert a different character. Add the following to each operator button's command:

def on_button_plus_click():
    entry_calculation.insert(tk.END, "+")

def on_button_subtract_click():
    entry_calculation.insert(tk.END, "-")

def on_button_multiply_click():
    entry_calculation.insert(tk.END, "*")

def on_button_divide_click():
    entry_calculation.insert(tk.END, "/")

Step 4 — Program the Clear button

The Clear button wipes the entry completely so the user can start a new calculation:

def on_button_clear_click():
    entry_calculation.delete(0, tk.END)

Step 5 — Program the equals button

This is the most interesting button. When clicked it needs to read the expression from the entry, calculate the result, and display it. We use Python's built-in eval() function to do the maths:

def on_button_equals_click():
    try:
        result = eval(entry_calculation.get())
        entry_calculation.delete(0, tk.END)
        entry_calculation.insert(0, result)
    except:
        entry_calculation.delete(0, tk.END)
        entry_calculation.insert(0, "Error")

Step 6 — Run and test

Run the project and try the following to check everything works correctly:

The complete button functions

Here is all the code needed in the button functions section for reference:

def on_button1_click():
        entry_calculation.insert(tk.END, "1")

def on_button2_click():
    entry_calculation.insert(tk.END, "2")

def on_button3_click():
    entry_calculation.insert(tk.END, "3")

def on_button4_click():
    entry_calculation.insert(tk.END, "4")

def on_button5_click():
    entry_calculation.insert(tk.END, "5")

def on_button6_click():
    entry_calculation.insert(tk.END, "6")

def on_button7_click():
    entry_calculation.insert(tk.END, "7")

def on_button8_click():
    entry_calculation.insert(tk.END, "8")

def on_button9_click():
    entry_calculation.insert(tk.END, "9")

def on_button0_click():
    entry_calculation.insert(tk.END, "0")

def on_button_plus_click():
    entry_calculation.insert(tk.END, "+")

def on_button_subtract_click():
    entry_calculation.insert(tk.END, "-")

def on_button_multiply_click():
    entry_calculation.insert(tk.END, "*")

def on_button_divide_click():
    entry_calculation.insert(tk.END, "/")

def on_button_clear_click():
    entry_calculation.delete(0, tk.END)

def on_button_equals_click():
    try:
        result = eval(entry_calculation.get())
        entry_calculation.delete(0, tk.END)
        entry_calculation.insert(0, result)
    except:
        entry_calculation.delete(0, tk.END)
        entry_calculation.insert(0, "Error")

Extension challenges