Desktop GUIs

Graphical User Interfaces (GUIs) revolutionized how people use computers. Instead of typing commands, users could point and click, drag windows, and interact visually.

Today, GUI frameworks let us build rich, responsive desktop applications that look and feel native to the platform. In this lesson, we’ll explore:

  • The anatomy of desktop GUI frameworks
  • Tools for Windows, macOS, and Linux
  • Cross-platform options
  • A starter project to build your first windowed app

🖼️ What Is a Desktop GUI?

A desktop GUI is a program with windows, buttons, menus, and other visual elements. These apps:

  • Run on the user’s operating system
  • Use the system’s window manager
  • Follow the platform’s design conventions (look and feel)

GUI programming is event-driven: your code waits for input (clicks, drags, keypresses) and responds with updates.

🪟 Windows GUI Options

✅ WinForms (Windows Forms)

  • One of the oldest and most accessible GUI frameworks in .NET
  • Uses a drag-and-drop designer in Visual Studio
  • Code-behind model (e.g., Button1_Click handlers)
  • Great for beginners and quick tools

🔗 WinForms documentation

🧱 WPF/XAML (Windows Presentation Foundation)

  • More modern and flexible than WinForms
  • Uses XAML (a markup language like HTML) for UI layout
  • Embraces the MVVM pattern (Model-View-ViewModel)
  • Excellent for more complex or stylized apps

🔗 WPF overview

For a starter project, try building a calculator or a sticky notes app in WinForms.

🍎 macOS GUI Options

🍏 Cocoa (Objective-C) and SwiftUI

  • Cocoa was the traditional macOS API, using Objective-C and Interface Builder

  • SwiftUI is Apple’s modern declarative UI framework

    • Less boilerplate, more intuitive
    • Works on both macOS and iOS
    • Great documentation and live previews in Xcode

🔗 SwiftUI Tutorials

A great first SwiftUI project: a habit tracker or mood journal with simple inputs.

🐧 Linux GUI Options

Linux has many environments, but the two most popular are GNOME and KDE:

🔷 GTK (GNOME)

  • The GUI toolkit behind GNOME apps
  • C-based, but has bindings for Python, Rust, JavaScript, and more
  • Can be used with Glade, a GUI designer tool

🔗 GTK 4 Docs 🔗 Glade UI Designer

🟥 Qt (KDE)

  • The main toolkit for KDE apps
  • Written in C++, but has bindings for Python (PyQt, PySide)
  • Includes Qt Designer for UI layout
  • Known for great cross-platform support

🔗 Qt for Python 🔗 KDE Developer Resources

Try building a note-taking app or a stopwatch using PyQt or GTK with Python.

🔁 Cross-Platform GUI Options

If you want one codebase to run everywhere:

🎯 .NET MAUI (Multi-platform App UI)

  • Successor to Xamarin.Forms
  • Build native apps for Windows, macOS, iOS, and Android
  • Uses C# + XAML

🔗 .NET MAUI overview

📦 Electron

  • Build desktop apps with web tech (HTML, CSS, JS)
  • Used by apps like VS Code, Discord, Slack
  • Heavy on resources, but easy for web developers

🔗 Electron Docs

🎨 Flutter

  • Originally for mobile, now supports desktop
  • Uses Dart and a unified rendering engine
  • Highly customizable UIs

🔗 Flutter Desktop

🎈 Tauri

  • Lightweight alternative to Electron
  • Rust backend + web frontend
  • Good security and small app sizes

🔗 Tauri Overview

🛠️ Build a Simple GUI App

Let’s get hands-on! Pick a framework and build a small app:

📝 Example: Notes App

  • A text box to enter your note
  • A save button that adds it to a list
  • A clear or delete button

Choose your stack:

  • WinForms or WPF in C#
  • SwiftUI in Swift
  • GTK or Qt in Python
  • Electron or Tauri if you love web tech

💡 UI Design Tip

Each OS has its own expectations:

  • macOS users expect a clean, minimalist design with smooth animations
  • Windows users expect a title bar, ribbon, or system tray icons
  • Linux users might run your app under multiple themes or window managers

Respecting platform conventions helps your app feel natural.

🧪 Your Challenge

Build a basic desktop GUI app that:

  • Has at least two input elements (text box, button, checkbox, etc.)
  • Responds to a click or user action
  • Updates the UI in some way (displays a message, changes a value)

Bonus ideas:

  • Add file saving/loading
  • Change themes or styles
  • Try cross-compiling to a second OS

Next up: the world of the web. We’ll explore HTML, CSS, and JavaScript — and build our first browser-based interactive UI!