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

> Discover the UI components code for Windows Terminal within the microsoft/terminal repository. Explore XAML WPF controls and C++/WinRT for rendering.

- Repository: [Microsoft/terminal](https://github.com/microsoft/terminal)
- Tags: deep-dive
- Published: 2026-02-26

---

**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`](https://github.com/microsoft/terminal/blob/main/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`](https://github.com/microsoft/terminal/blob/main/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`](https://github.com/microsoft/terminal/blob/main/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`](https://github.com/microsoft/terminal/blob/main/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`](https://github.com/microsoft/terminal/blob/main/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.

```xml
<!-- 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>

```

```csharp
// 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`](https://github.com/microsoft/terminal/blob/main/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`](https://github.com/microsoft/terminal/blob/main/.xaml.cs) or `.cpp` files implementing behavior.
- **`TerminalControl.xaml`** and **[`TerminalControl.xaml.cs`](https://github.com/microsoft/terminal/blob/main/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`](https://github.com/microsoft/terminal/blob/main/TermControl.cpp)** and **[`Terminal.cpp`](https://github.com/microsoft/terminal/blob/main/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`](https://github.com/microsoft/terminal/blob/main/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`](https://github.com/microsoft/terminal/blob/main/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.