Where to Find the UI Components Code for Windows Terminal: A Complete Guide

The UI components code for Windows Terminal resides entirely within the src/cascadia directory of the microsoft/terminal repository, combining XAML-based WPF controls for chrome and interactions with a thin C++/WinRT bridge for high-performance text rendering.

The Windows Terminal architecture deliberately separates visual presentation from backend rendering to deliver a modern, customizable terminal experience. Whether you are skinning the title bar, embedding the terminal in a custom application, or debugging focus issues, understanding exactly where to find the UI components code for Windows Terminal eliminates guesswork when navigating the codebase.

Main WPF Host Control Location

The reusable TerminalControl hosts both the terminal renderer and scrollbar. This is the foundational UI component that other surfaces embed.

• src/cascadia/WpfTerminalControl/TerminalControl.xaml – Defines the XAML layout containing a Grid that hosts the native rendering surface and a ScrollBar.
• src/cascadia/WpfTerminalControl/TerminalControl.xaml.cs – Implements the code-behind logic for focus management, scrolling events (TerminalScrolled, UserScrolled), theme application, and the public Connection property that accepts an ITerminalConnection implementation.

Terminal Chrome and Window Layout

The full-window UI—title bar, tab row, and main surface—lives under src/cascadia/TerminalApp. These files describe the chrome that wraps the terminal control instance.

• src/cascadia/TerminalApp/TerminalPage.xaml – The root page that composes the terminal surface, tab row, and settings flyout.
• src/cascadia/TerminalApp/TitlebarControl.xaml – Custom title bar UI when running with extended client frames.
• src/cascadia/TerminalApp/TabRowControl.xaml – The tab strip container handling drag-and-drop and new-tab buttons.

Settings and Configuration UI

Profile editing, color scheme selection, and appearance customization are implemented as separate XAML pages inside src/cascadia/TerminalSettingsEditor.

• src/cascadia/TerminalSettingsEditor/Profiles_Base.xaml – Base layout for profile configuration screens.
• src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml – UI for editing and previewing terminal color palettes.
• src/cascadia/TerminalSettingsEditor/Appearances.xaml – Controls for font face, cursor style, and background opacity.

Search and Command Palette Components

Interactive overlays for buffer search and command invocation reside alongside the main app UI.

• src/cascadia/TerminalApp/SearchBoxControl.xaml – The find-in-buffer search interface.
• src/cascadia/TerminalApp/CommandPalette.xaml – The palette for invoking actions, switching tabs, and running recent commands.

Native Rendering Bridge

While the chrome is XAML, the actual text surface is a native DirectWrite/Direct2D renderer exposed through a C++/WinRT interop layer.

• src/cascadia/TerminalControl/TermControl.cpp – The C++ implementation of the native side that draws glyphs and forwards mouse or keyboard events to the terminal core.
• src/cascadia/TerminalCore/Terminal.cpp – The core terminal implementation that maintains the buffer state and VT100 parser, invoked by TermControl during render passes.

How the UI Components Connect

Understanding the data flow between these files clarifies which layer handles specific responsibilities.

1. Application startup – src/cascadia/TerminalApp/App.cpp creates the WinRT window and injects a TerminalControl instance into the visual tree defined by TerminalPage.xaml.

2. Control composition – TerminalControl.xaml hosts a TerminalContainer (native control) plus a WPF ScrollBar. Its code-behind wires mouse-wheel handling and exposes the Connection property that the app sets to a ConptyConnection or other backend.

3. Rendering pipeline – TerminalContainer forwards VT100 output to TermControl (C++), which draws characters using DirectWrite. When the render size changes, TerminalControl notifies TermControl via Resize/TriggerResize.

4. Chrome interaction – The title bar, tabs, and command palette communicate with application logic through the AppLogic class (src/cascadia/TerminalApp/AppLogic.cpp), which coordinates state between UI and terminal sessions.

Practical Example: Embedding the Terminal Control

You can reuse TerminalControl in your own WPF application by referencing the microsoft/terminal package and wiring the connection in your code-behind.

<!-- MainWindow.xaml -->
<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:term="clr-namespace:Microsoft.Terminal.Wpf"
        Title="My Terminal Host" Height="600" Width="800">
    <term:TerminalControl x:Name="Terminal" AutoResize="True"/>
</Window>

// MainWindow.xaml.cs
using Microsoft.Terminal.Wpf;
using Microsoft.Terminal.Connection;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        // Create a conpty backend and attach it to the control
        var connection = new ConptyConnection();
        Terminal.Connection = connection;

        // Apply a custom theme
        var theme = new TerminalTheme
        {
            DefaultBackground = 0x000000,
            DefaultForeground = 0xCCCCCC
        };
        Terminal.SetTheme(theme, "Cascadia Mono", 12);
    }
}

This pattern uses the public API surface defined in TerminalControl.xaml.cs, allowing any WPF host to embed a full terminal instance with minimal boilerplate.

Summary

• All Windows Terminal UI components are located under src/cascadia, with XAML files defining layout and .xaml.cs or .cpp files implementing behavior.
• TerminalControl.xaml and TerminalControl.xaml.cs form the reusable host control that combines a native text surface with WPF chrome.
• Window-level chrome (tabs, title bar, settings) lives in src/cascadia/TerminalApp, while the settings editor has its own folder at src/cascadia/TerminalSettingsEditor.
• Native rendering is handled by TermControl.cpp and Terminal.cpp, bridging XAML events to DirectWrite/Direct2D drawing.
• The ITerminalConnection abstraction allows the UI to remain agnostic of the backend, whether ConPTY, SSH, or other transports.

Frequently Asked Questions

Where is the main terminal UI defined in the Windows Terminal repository?

The primary UI definition is src/cascadia/TerminalApp/TerminalPage.xaml, which composes the root window layout including the tab row and terminal surface. The reusable control that actually hosts the text buffer is defined separately in src/cascadia/WpfTerminalControl/TerminalControl.xaml.

What code handles the actual text rendering in Windows Terminal?

The high-performance rendering layer is implemented in C++ at src/cascadia/TerminalControl/TermControl.cpp, which draws glyphs using DirectWrite and Direct2D. It receives VT100 sequences from the backend and forwards input events upward, while src/cascadia/TerminalCore/Terminal.cpp maintains the buffer state and parsing logic.

How do I find the code for the Windows Terminal settings UI?

Settings pages are located in src/cascadia/TerminalSettingsEditor. Key files include Profiles_Base.xaml for profile configuration, ColorSchemes.xaml for color editing, and Appearances.xaml for visual styling controls. Each XAML file has a corresponding .cpp or .h file implementing the data binding logic.

Can I embed Windows Terminal UI components in my own WPF application?

Yes. The TerminalControl class in src/cascadia/WpfTerminalControl is designed for reuse. Reference the control in your XAML, set its Connection property to an ITerminalConnection implementation (such as ConptyConnection), and call SetTheme to customize fonts and colors. The control handles resizing, scrolling, and input forwarding automatically.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}