Table of Contents

View Deep Dive

View is the base class for all visible UI elements in Terminal.Gui. View provides core functionality for layout, drawing, input handling, navigation, and scrolling. All interactive controls, windows, and dialogs derive from View.

See the Views Overview for a catalog of all built-in View subclasses.

Table of Contents

View Hierarchy

Terminology

  • View - The base class for all visible UI elements
  • SubView - A View that is contained in another View and rendered as part of the containing View's content area. SubViews are added via Add()
  • SuperView - The View that contains SubViews. Each View has a SuperView property that references its container
  • Child View - A view that holds a reference to another view in a parent/child relationship (used sparingly; generally SubView/SuperView is preferred)
  • Parent View - A view that holds a reference to another view but is NOT a SuperView (used sparingly)

Key Properties

  • SubViews - Read-only list of all SubViews added to this View
  • SuperView - The View's container (null if the View has no container)
  • Id - Unique identifier for the View (should be unique among siblings)
  • Data - Arbitrary data attached to the View
  • App - The application context this View belongs to
  • Driver - The driver used for rendering (derived from App). This is a shortcut to App.Driver for convenience.

View Composition

Views are composed of several nested layers that define how they are positioned, drawn, and scrolled:

View Composition Diagram

classDiagram
    class View {
        +Frame: Rectangle
        +Margin: Adornment - outermost
        +Border: Adornment - border lines and Title
        +Padding: Adornment - innermost - Scrollbars
        +Viewport: Rectangle describing portal into ContentArea
        +ContentArea: Rectangle with Location always 0,0
        +GetContentSize(): Size
        +SetContentSize(Size)
    }

    class Adornment {
        +Thickness: Thickness
    }

    class Thickness {
        +Top: int
        +Right: int
        +Bottom: int
        +Left: int
    }

    class Rectangle {
        +Location: Point
        +Size: Size
    }

    View --> Adornment : has
    Adornment --> Thickness : has
    View --> Rectangle : has

    note for View "Frame defines location and size relative to SuperView"
    note for Adornment "Separates Frame from Viewport"
    note for Rectangle "Defines location and size"

The diagram above shows the structure of a View's composition:

  1. Frame: The outermost rectangle defining the View's location and size
  2. Margin: Separates the View from other SubViews
  3. Border: Contains visual border and title
  4. Padding: Offsets the Viewport from the Border
  5. Viewport: The visible portion of the Content Area
  6. Content Area: Where the View's content is drawn (shown larger than Viewport to illustrate scrolling)

Each layer is defined by a Thickness that specifies the width of each side (top, right, bottom, left). The Content Area is shown as a separate container that the Viewport "looks into" - this illustrates how scrolling works. In this example, the Viewport is positioned at (5,5) relative to the Content Area, showing how scrolling works.

The Layers

  1. Frame - The outermost rectangle defining the View's location and size relative to the SuperView's content area
  2. Margin - Adornment that provides spacing between the View and other SubViews
  3. Border - Adornment that draws the visual border and title
  4. Padding - Adornment that provides spacing between the border and the viewport
  5. Viewport - Rectangle describing the visible portion of the content area
  6. Content Area - The total area where content can be drawn (defined by GetContentSize())

See the Layout Deep Dive for complete details on View composition and layout.

Core Concepts

Frame vs. Viewport

  • Frame - The View's location and size in SuperView-relative coordinates. Frame includes all adornments (Margin, Border, Padding)
  • Viewport - The visible "window" into the View's content, located inside the adornments. Viewport coordinates are always relative to (0,0) of the content area
// Frame is SuperView-relative
view.Frame = new Rectangle (10, 5, 50, 20);

// Viewport is content-relative (the visible portal)
view.Viewport = new Rectangle (0, 0, 45, 15); // Adjusted for adornments

Content Area and Scrolling

The Content Area is where the View's content is drawn. By default, the content area size matches the Viewport size. To enable scrolling:

  1. Call SetContentSize() with a size larger than the Viewport
  2. Change Viewport.Location to scroll the content

See the Scrolling Deep Dive for complete details.

Adornments

Adornments are special Views that surround the content:

  • Margin - Transparent spacing outside the Border
  • Border - Visual frame with LineStyle, title, and arrangement UI
  • Padding - Spacing inside the Border, outside the Viewport

Each adornment has a Thickness that defines the width of each side (Top, Right, Bottom, Left).

See the Layout Deep Dive for complete details on adornments.

View Lifecycle

Initialization

Views implement ISupportInitializeNotification:

  1. Constructor - Creates the View and sets up default state
  2. BeginInit() - Signals initialization is starting
  3. EndInit() - Signals initialization is complete; raises Initialized event
  4. IsInitialized - Property indicating if initialization is complete

During initialization, App is set to reference the application context, enabling views to access application services like the driver and current session.

Disposal

Views are IDisposable:

  • Call Dispose() to clean up resources
  • The Disposing event is raised when disposal begins
  • Automatically disposes SubViews, adornments, and scroll bars

Subsystems

View is organized as a partial class across multiple files, each handling a specific subsystem:

Commands

See the Command Deep Dive.

  • View.AddCommand - Declares commands the View supports
  • View.InvokeCommand - Invokes a command
  • Command enum - Standard set of commands (Accept, Activate, HotKey, etc.)
  • CommandsToBubbleUp - Opt-in list of commands that bubble from SubViews to this View
  • View.DispatchDown - Dispatches a command downward to a SubView with bubbling suppressed (inverse of TryBubbleToSuperView)
  • DefaultAcceptView - The SubView that receives Accept when no other SubView handles it

Input Handling

Keyboard

See the Keyboard Deep Dive.

  • KeyBindings - Maps keys to Commands
  • HotKey - The hot key for the View
  • HotKeySpecifier - Character used to denote hot keys in text (default: '_')
  • Events: KeyDown, InvokingKeyBindings

Mouse

See the Mouse Deep Dive.

  • MouseBindings - Maps mouse events to Commands
  • MouseHoldRepeat - Enables continuous button press events
  • View.Highlight event - Event for visual feedback on mouse hover/click
  • View.HighlightStyle - Visual style when highlighted
  • Events: MouseEnter, MouseLeave, MouseEvent

Layout and Arrangement

See the Layout Deep Dive and Arrangement Deep Dive.

Position and Size

  • X - Horizontal position using Pos
  • Y - Vertical position using Pos
  • Width - Width using Dim
  • Height - Height using Dim

Layout Features

  • Dim.Auto() - Automatic sizing based on content
  • Pos.AnchorEnd() - Anchor to right/bottom edges
  • Pos.Align - Align views relative to each other
  • Pos.Center - Center within SuperView
  • Dim.Fill - Fill available space

Arrangement

  • Arrangement - Controls if View is movable/resizable
  • ViewArrangement - Flags: Fixed, Movable, Resizable, Overlapped

Events

  • LayoutStarted - Before layout begins
  • LayoutComplete - After layout completes
  • FrameChanged - When Frame changes
  • ViewportChanged - When Viewport changes

Drawing

See the Drawing Deep Dive.

Color and Style

See the Scheme Deep Dive for details on color theming.

Drawing Methods

Warning

Move() sets the Draw Cursor (where next character renders), NOT the Terminal Cursor (visible cursor indicator). To position the Terminal Cursor, use the View.Cursor property. See Cursor Management for details.

Drawing Events

  • DrawingContent - Before content is drawn
  • DrawingContentComplete - After content is drawn
  • DrawingAdornments - Before adornments are drawn
  • DrawingAdornmentsComplete - After adornments are drawn

Invalidation

See the Navigation Deep Dive.

Events:

Scrolling

See the Scrolling Deep Dive.

  • Viewport - Visible portion of the content area
  • GetContentSize() - Returns size of scrollable content
  • SetContentSize() - Sets size of scrollable content
  • ScrollHorizontal() - Scrolls content horizontally
  • ScrollVertical() - Scrolls content vertically
  • VerticalScrollBar - Built-in vertical scrollbar
  • HorizontalScrollBar - Built-in horizontal scrollbar
  • ViewportSettings - ViewportSettingsFlags controlling scroll behavior

Text

  • Text - The View's text content
  • Title - The View's title (shown in Border)
  • TextFormatter - Handles text formatting and alignment
  • TextDirection - Text direction (LeftRight, RightToLeft, TopToBottom)
  • TextAlignment - Text alignment (Left, Centered, Right, Justified)
  • VerticalTextAlignment - Vertical alignment (Top, Middle, Bottom, Justified)

View Lifecycle

1. Creation

View view = new ()
{
    X = Pos.Center (),
    Y = Pos.Center (),
    Width = Dim.Percent (50),
    Height = Dim.Fill ()
};

2. Initialization

When a View is added to a SuperView or when Application.Run is called:

  1. BeginInit() is called
  2. EndInit() is called
  3. IsInitialized becomes true
  4. Initialized event is raised

3. Layout

Layout happens automatically when needed:

  1. View.SetNeedsLayout marks View as needing layout
  2. View.Layout calculates position and size
  3. LayoutStarted event is raised
  4. Frame and Viewport are calculated based on X, Y, Width, Height
  5. SubViews are laid out
  6. LayoutComplete event is raised

4. Drawing

Drawing happens automatically when needed:

  1. View.SetNeedsDraw marks View as needing redraw
  2. View.Draw renders the View
  3. DrawingContent event is raised
  4. View.OnDrawingContent is called (override to draw custom content)
  5. DrawingContentComplete event is raised
  6. Adornments are drawn
  7. SubViews are drawn

5. Input Processing

Input is processed in this order:

  1. Keyboard: Key → KeyBindings → Command → Command Handlers → Events
  2. Mouse: MouseEvent → MouseBindings → Command → Command Handlers → Events

6. Disposal

view.Dispose ();
  • Raises View.Disposing event
  • Disposes adornments, scrollbars, SubViews
  • Cleans up event handlers and resources

Subsystems

Commands

See the Command Deep Dive for complete details.

Views use a command pattern for handling input:

// Add a command the view supports
view.AddCommand (Command.Accept, () =>
{
    // Handle the Accept command
    return true;
});

// Bind a key to the command
view.KeyBindings.Add (Key.Enter, Command.Accept);

// Bind a mouse action to the command
view.MouseBindings.Add (MouseFlags.LeftButtonClicked, Command.Activate);

// Enable command bubbling from SubViews to this View
view.CommandsToBubbleUp = [Command.Accept, Command.Activate];

// Set the default view that receives Accept when no other SubView handles it
// (typically a Button with IsDefault = true, found automatically via IAcceptTarget)
view.DefaultAcceptView = okButton;

Input

Keyboard

See the Keyboard Deep Dive for complete details.

The keyboard subsystem processes key presses through:

  1. View.KeyDown event (cancellable)
  2. View.OnKeyDown virtual method
  3. KeyBindings - Converts keys to commands
  4. Command handlers (registered via View.AddCommand)

Mouse

See the Mouse Deep Dive for complete details.

The mouse subsystem processes mouse events through:

  1. View.MouseEvent event (low-level)
  2. View.OnMouseEvent virtual method
  3. View.MouseEnter / View.MouseLeave events
  4. View.MouseBindings - Converts mouse actions to commands
  5. Command handlers

Layout

See the Layout Deep Dive for complete details.

Layout is declarative using Pos and Dim:

Label label = new () { Text = "Name:" };
TextField textField = new ()
{
    X = Pos.Right (label) + 1,
    Y = Pos.Top (label),
    Width = Dim.Fill ()
};

The layout system automatically:

  • Calculates Frame based on X, Y, Width, Height
  • Handles Adornment thickness
  • Calculates Viewport
  • Lays out SubViews recursively

Drawing

See the Drawing Deep Dive for complete details.

Views draw themselves using viewport-relative coordinates:

protected override bool OnDrawingContent ()
{
    // Draw at viewport coordinates (0,0)
    Move (0, 0);
    SetAttribute (new Attribute (Color.White, Color.Blue));
    AddStr ("Hello, Terminal.Gui!");

    return true;
}

Key drawing concepts:

See the Navigation Deep Dive for complete details.

Navigation controls keyboard focus movement:

Scrolling

See the Scrolling Deep Dive for complete details.

Scrolling is built into every View:

// Set content size larger than viewport
view.SetContentSize(new Size(100, 100));

// Scroll the content
view.Viewport = view.Viewport with { Location = new Point(10, 10) };

// Or use helper methods
view.ScrollVertical(5);
view.ScrollHorizontal(3);

// Enable scrollbars
view.ViewportSettings |= ViewportSettingsFlags.HasVerticalScrollBar;
view.ViewportSettings |= ViewportSettingsFlags.HasHorizontalScrollBar;

Common View Patterns

Creating a Custom View

public class MyCustomView : View
{
    public MyCustomView ()
    {
        // Set up default size
        Width = Dim.Auto ();
        Height = Dim.Auto ();

        // Can receive focus
        CanFocus = true;

        // Add supported commands
        AddCommand (Command.Accept, HandleAccept);

        // Configure key bindings
        KeyBindings.Add (Key.Enter, Command.Accept);
    }

    protected override bool OnDrawingContent ()
    {
        // Draw custom content using viewport coordinates
        Move (0, 0);
        SetAttributeForRole (VisualRole.Normal);
        AddStr ("My custom content");

        return true; // Handled
    }

    private bool HandleAccept ()
    {
        // Handle the Accept command
        // Raise events, update state, etc.
        return true; // Handled
    }
}

Adding SubViews

View container = new ()
{
    Width = Dim.Fill (),
    Height = Dim.Fill ()
};

Button leftButton = new () { Text = "OK", X = 2, Y = 2 };
Button middleButton = new () { Text = "Cancel", X = Pos.Right (leftButton) + 2, Y = 2 };

container.Add (leftButton, middleButton);

Using Adornments

View view = new ()
{
    BorderStyle = LineStyle.Double,
    Title = "My View"
};

// Configure border
view.Border.Thickness = new Thickness (1);
view.Border.Settings = BorderSettings.Title;

// Add padding
view.Padding.Thickness = new Thickness (1);

// Add margin
view.Margin.Thickness = new Thickness (2);

Implementing Scrolling

View view = new ()
{
    Width = 40,
    Height = 20
};

// Set content larger than viewport
view.SetContentSize (new Size (100, 100));

// Enable scrollbars with automatic visibility
view.ViewportSettings |= ViewportSettingsFlags.HasVerticalScrollBar;
view.ViewportSettings |= ViewportSettingsFlags.HasHorizontalScrollBar;

// Add key bindings for scrolling
view.KeyBindings.Add (Key.CursorUp, Command.ScrollUp);
view.KeyBindings.Add (Key.CursorDown, Command.ScrollDown);
view.KeyBindings.Add (Key.CursorLeft, Command.ScrollLeft);
view.KeyBindings.Add (Key.CursorRight, Command.ScrollRight);

// Add command handlers
view.AddCommand (Command.ScrollUp, () => { view.ScrollVertical (-1); return true; });
view.AddCommand (Command.ScrollDown, () => { view.ScrollVertical (1); return true; });

Runnable Views

Views can implement IRunnable to run as independent, blocking sessions with typed results. This decouples runnability from inheritance, allowing any View to participate in session management.

IRunnable Architecture

The IRunnable pattern provides:

  • Interface-Based: Implement IRunnable<TResult> instead of inheriting from Runnable
  • Type-Safe Results: Generic TResult parameter for compile-time type safety
  • Fluent API: Chain Init(), Run(), and Shutdown() for concise code
  • Automatic Disposal: Framework manages lifecycle of created runnables
  • CWP Lifecycle Events: IsRunningChanging/Changed, IsModalChanging/Changed

Creating a Runnable View

Derive from Runnable or implement IRunnable:

public class ColorPickerDialog : Runnable<Color?>
{
    private ColorPicker16 _colorPicker;

    public ColorPickerDialog ()
    {
        Title = "Select a Color";

        _colorPicker = new ColorPicker16 { X = Pos.Center (), Y = 2 };

        Button okButton = new () { Text = "OK", IsDefault = true };

        okButton.Accepting += (_, e) =>
        {
            Result = _colorPicker.SelectedColor;
            Application.RequestStop ();
        };

        Add (_colorPicker, okButton);
    }
}

Running with Fluent API

The fluent API enables elegant, concise code with automatic disposal:

// Framework creates, runs, and disposes the runnable automatically
Color? result = Application.Create ()
                           .Init ()
                           .Run<ColorPickerDialog> ()
                           .Shutdown () as Color?;

if (result is { })
{
    Console.WriteLine($"Activated: {result}");
}

Running with Explicit Control

For more control over the lifecycle:

IApplication app = Application.Create ();
app.Init ();

ColorPickerDialog dialog = new ();
app.Run (dialog);

// Extract result after Run returns
Color? result = dialog.Result;

// Caller is responsible for disposal
dialog.Dispose ();

app.Shutdown ();

Disposal Semantics

"Whoever creates it, owns it":

  • Run<TRunnable>(): Framework creates → Framework disposes (in Shutdown())
  • Run(IRunnable): Caller creates → Caller disposes

Result Extraction

Extract the result in OnIsRunningChanging when stopping:

protected override bool OnIsRunningChanging (bool oldIsRunning, bool newIsRunning)
{
    if (!newIsRunning)  // Stopping - extract result before disposal
    {
        Result = _colorPicker.SelectedColor;

        // Optionally cancel stop (e.g., prompt to save)
        if (HasUnsavedChanges ())
        {
            return true;  // Cancel stop
        }
    }

    return base.OnIsRunningChanging (oldIsRunning, newIsRunning);
}

Lifecycle Properties

  • IsRunning - True when on the RunnableSessionStack
  • IsModal - True when at the top of the stack (receiving all input)
  • Result - The typed result value (set before stopping)

Lifecycle Events (CWP-Compliant)

  • IsRunningChanging - Cancellable event before added/removed from stack
  • IsRunningChanged - Non-cancellable event after stack change
  • IsModalChanged - Non-cancellable event after modal state change

Views can run modally (exclusively capturing all input until closed). See Runnable for the legacy pattern.

Note: New code should use IRunnable<TResult> pattern (see above) for better type safety and lifecycle management.

Running a View Modally (Legacy)

Dialog dialog = new ()
{
    Title = "Confirmation",
    Width = Dim.Percent (50),
    Height = Dim.Percent (50)
};

// Add content...
Label label = new () { Text = "Are you sure?", X = Pos.Center (), Y = 1 };
dialog.Add (label);

// Run modally - blocks until closed
Application.Run (dialog);

// Dialog has been closed
dialog.Dispose ();
  • Runnable - Base class for modal views, can fill entire screen
  • Window - Overlapped container with border and title
  • Dialog - Modal Window, centered with button support
  • Wizard - Multi-step modal dialog

Wizard Example

Wizards let users step through multiple pages:

Wizard wizard = new () { Title = "Setup Wizard" };

WizardStep step1 = new () { Title = "Welcome" };
step1.Add (new Label { Text = "Welcome to the wizard!", X = 1, Y = 1 });

WizardStep step2 = new () { Title = "Configuration" };
step2.Add (new TextField { X = 1, Y = 1, Width = 30 });

wizard.AddStep (step1);
wizard.AddStep (step2);

Application.Run (wizard);

Advanced Topics

View Diagnostics

View.Diagnostics - ViewDiagnosticFlags for debugging:

  • Ruler - Shows a ruler around the View
  • DrawIndicator - Shows an animated indicator when drawing
  • FramePadding - Highlights the Frame with color

View States

  • Enabled - Whether the View is enabled
  • Visible - Whether the View is visible
  • CanFocus - Whether the View can receive focus
  • HasFocus - Whether the View currently has focus

Shadow Effects

ShadowStyle - ShadowStyle for drop shadows:

view.ShadowStyle = ShadowStyle.Transparent;

See Also

Edit this page