Files
Terminal.Gui/Examples/UICatalog
Tig 0a9f4b8ef1 Fixes #4492, #4480 - Transparent shadows cause underlying wide glyph rendering issues (#4490)
* WIP - experiments in fixing shadow rendering issues based on #4465

Previously, shadow size was fixed at 1x1. This change introduces ShadowWidth and ShadowHeight properties to both Margin and View, allowing variable shadow dimensions. The Margin class now manages its own shadow sizing, enforcing valid values based on ShadowStyle (e.g., Opaque and Transparent require a minimum of 1, and Opaque only allows 1). Margin.Thickness is dynamically adjusted to account for shadow size, with original values preserved and restored as needed.

ShadowView rendering is updated to correctly handle wide graphemes (such as emojis) in the shadow area, preventing rendering errors. The View class exposes ShadowWidth and ShadowHeight, synchronizing with Margin. Extensive new unit tests verify correct behavior for shadow sizing, style changes, thickness adjustments, and rendering, including edge cases and visual output.

Additional minor bug fixes and refactoring are included, such as proper management of Margin's cached clip region and correcting a loop order bug in ShadowView. The codebase is also modernized with recent C# features.

* more merge

* added border tests

* Experiment...

* Incorporated latest wideglyphs

* Comment tweaks

* Add Adornments and ViewportSettings editors to WideGlyphs

Introduce AdornmentsEditor and ViewportSettingsEditor with custom border styles and positioning, enhancing UI editing capabilities. Also update arrangeableViewAtEven to use Color.Black and Color.Green, and adjust a commented border style from Dashed to Dotted.

* Fix scenario editors and tweak scenarios.

Enhance ShadowStyles with a second shadow window (transparent style) and a button event handler that shows a message box. In WideGlyphs, add AdornmentsEditor and ViewportSettingsEditor for view property editing, apply custom color schemes to arrangeable views, and update superView with a transparent shadow and increased shadow width. These changes improve interactivity and visualization in the demo scenarios.

* Fix scenario editors and tweak scenarios.

Enhance ShadowStyles with a second shadow window (transparent style) and a button event handler that shows a message box. In WideGlyphs, add AdornmentsEditor and ViewportSettingsEditor for view property editing, apply custom color schemes to arrangeable views, and update superView with a transparent shadow and increased shadow width. These changes improve interactivity and visualization in the demo scenarios.

* Make replacement char themeable via Glyphs.ReplacementChar

Adds Glyphs.ReplacementChar as a configurable replacement character, replacing all uses of Rune.ReplacementChar. The default is now a space (' ') and can be set via config.json. Updates all rendering, string decoding, and buffer invalidation logic to use the new property, ensuring consistency and themeability. Updates tests and comments accordingly. Also includes minor UI tweaks in WideGlyphs.cs and .DotSettings updates.

* merging

* merge errors

* merged

* merged

* Refactor shadow properties to Margin; update tests

ShadowWidth and ShadowHeight are now managed solely in the Margin class, with related properties and validation logic removed from View. All code and tests now use view.Margin.ShadowWidth/ShadowHeight. Tests and documentation were updated accordingly, and wide glyph handling in test output was improved for consistency.

* Simplify ShadowSize; remove it from View as it's infreqnetly used. Make it a Size to reduce API surface area.

Replace ShadowWidth/ShadowHeight with a single ShadowSize property (of type Size) in the Margin class and related code. Update all usages, validation logic, and tests to use ShadowSize.Width and ShadowSize.Height. Introduce TryValidateShadowSize for unified validation. Modernize code with C# features and improve clarity and maintainability by treating shadow dimensions as a single unit.

* reveted

* Fix wide glyph attribute handling for second column

Ensure the attribute for the second column of wide glyphs is set correctly when within the clip region, addressing issues #4258 and #4492. Add comprehensive unit tests to verify correct attribute assignment and output rendering, including scenarios with transparent shadows. Remove obsolete test code for clarity. This improves color/style consistency for wide glyphs, especially in overlapping UI situations.

* added url
2025-12-16 14:23:32 -07:00
..

Terminal.Gui UI Catalog

UI Catalog is a comprehensive sample library for Terminal.Gui. It attempts to satisfy the following goals:

  1. Be an easy-to-use showcase for Terminal.Gui concepts and features.
  2. Provide sample code that illustrates how to properly implement said concepts & features.
  3. Make it easy for contributors to add additional samples in a structured way.

screenshot

Motivation

The original demo.cs sample app for Terminal.Gui is neither good to showcase, nor does it explain different concepts. In addition, because it is built on a single source file, it has proven to cause friction when multiple contributors are simultaneously working on different aspects of Terminal.Gui. See Issue #368 for more background.

API Reference

How To Use

Build and run UI Catalog by typing dotnet run from the UI Catalog folder or by using the Terminal.Gui Visual Studio solution.

Program.cs is the main UI Catalog app and provides a UI for selecting and running Scenarios. Each *Scenario is implemented as a class derived from Scenario and Program.cs uses reflection to dynamically build the UI.

Scenarios are tagged with categories using the [ScenarioCategory] attribute. The left pane of the main screen lists the categories. Clicking on a category shows all the scenarios in that category.

Scenarios can be run either from the UICatalog.exe app UI or by being specified on the command line:

UICatalog.exe <Scenario Name>

e.g.

UICatalog.exe Buttons

Hitting ENTER on a selected Scenario or double-clicking on a Scenario runs that scenario as though it were a stand-alone Terminal.Gui app.

When a Scenario is run, it runs as though it were a standalone Terminal.Gui app. However, scaffolding is provided (in the Scenario base class) that (optionally) takes care of Terminal.Gui initialization.

Contributing by Adding Scenarios

To add a new Scenario simply:

  1. Create a new .cs file in the Scenarios directory that derives from Scenario.
  2. Add a [ScenarioMetaData] attribute to the class specifying the scenario's name and description.
  3. Add one or more [ScenarioCategory] attributes to the class specifying which categories the sceanrio belongs to. If you don't specify a category the sceanrio will show up in "All".
  4. Implement the Setup override which will be called when a user selects the scenario to run.
  5. Optionally, implement the Init and/or Run overrides to provide a custom implementation.

The sample below is provided in the .\UICatalog\Scenarios directory as a generic sample that can be copied and re-named:


namespace UICatalog {
	[ScenarioMetadata (Name: "Generic", Description: "Generic sample - A template for creating new Scenarios")]
	[ScenarioCategory ("Controls")]
	class MyScenario : Scenario {
		public override void Setup ()
		{
			// Put your scenario code here, e.g.
			Win.Add (new Button () { 
Text = "Press me!", 
				X = Pos.Center (),
				Y = Pos.Center (),
				Clicked = () => MessageBox.Query (20, 7, "Hi", "Neat?", "Yes", "No")
			});
		}
	}
}

Scenario provides Win, a Window object that provides a canvas for the Scenario to operate.

The default Window shows the Scenario name and supports exiting the Scenario through the Esc key.

screenshot

To build a more advanced scenario, where control of the Runnable and Window is needed (e.g. for scenarios using MenuBar or StatusBar), simply use Application.Top per normal Terminal.Gui programming, as seen in the Notepad scenario.

For complete control, the Init and Run overrides can be implemented. The base.Init creates Win. The base.Run simply calls Application.Run(Application.Top).

Contribution Guidelines

  • Provide a terse, descriptive Name for Scenarios. Keep them short.
  • Provide a clear Description.
  • Comment Scenario code to describe to others why it's a useful Scenario.
  • Annotate Scenarios with [ScenarioCategory] attributes. Minimize the number of new categories created.
  • Use the Bug Repo Category for Scenarios that reproduce bugs.
    • Include the Github Issue # in the Description.
    • Once the bug has been fixed in develop submit another PR to remove the Scenario (or modify it to provide a good regression test/sample).
  • Tag bugs or suggestions for UI Catalog as Terminal.Gui Github Issues with "UICatalog: ".