Repository files navigation

CrtTextBox is an Avalonia C# project that enhances a standard TextBox control with a custom SKSL shader, giving it the appearance of a retro CRT screen. This effect adds a nostalgic touch to your UI with features like fish-eye distortion, scan lines, vignette, screen jitter, background noise, and a scrolling electron bar.

It makes use of a customShaderControl control, allowing any SKSL shader code to be applied to a source Avalonia UI control.TheCrtTextBox example demonstrate how to use it with aTextBox, but any other source control can be used.

• Retro CRT Look: The shader applies various effects to create a convincing retro CRT display, including:

  • Fish-eye distortion
  • Scan lines
  • Vignette effect
  • Screen jitter
  • Background noise
  • Scrolling electron bar
  • Monitor 'surround' with screen reflection

• Cross-Platform Compatibility: Built withAvalonia, ensuring compatibility across Windows, MacOS, and Linux.

• Customizable: The shader can be easily integrated into any Avalonia application and modified to suit different visual styles.

• .NET compatible IDE such asJetBrains Rider orVisual Studio 2022.
• Basic knowledge of C# and Avalonia UI.

1. Clone the repository from GitHub.
2. Open the solution in your IDE.
3. Build and run the project.

The main view is taken up with the shader code itself. Feel free to modify it and pressF5 to apply changes. Right-click outside of the text area to switch Themes.

Check out theThemes folder in the source tree. Modify the code to toggle features, or create your own theme from scratch.

TheShaderControl object is a standalone class and can be copied into your own project, and applied to any control with any shader code.

1. AddShaderControl to your AXAML.
2. From the code-behind, set theControlSource property to the UI control you wish to apply the shader to.
3. Set theFPS property, which determines the frequency the source control is sampled.
4. SetShaderUri to point to the location of your SKSL shader code. Usecrt.sksl as a reference.

Customuniform values can be passed into the shader code usingShaderControl.AddUniform(name, value).

CrtTextBox is an open-source project, and contributions are welcome. If you have ideas for new features, improvements, or bug fixes, feel free to submit a pull request. Please note that this is a side project, so responses might not be immediate.

• Created with help from the blog:Avalonia with Fragment Shaders
• ...based on work byWiesław Šoltés.

The project is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

• Avalonia UI Documentation
• SKSL Shader Language
• The Oldschool PC Font Resource

Follow me on Twitter for more updates:@deanthecoder.