UI Controls

SadConsole provides support for UI, (buttons, textboxes, comboboxes, list displays, etc..)
These can be hosted on a Component called “ControlHost” which can be attached to a Console.

There is a build in console in SadConsole which already provides this functionality.
“ControlsConsole”.

Build In UI Controls

  • Button
  • Button3d
  • ButtonBox
  • CheckBox
  • ComboBox
  • DrawingArea
  • Label
  • ListBox
  • NumberBox
  • Panel (Groups multiple UI together)
  • RadioButton
  • ScrollBar
  • SelectionButton (Similar to a regular button, but with the ability to jump to the next button)
  • SurfaceViewer (Draws a CellSurface within an area. Optionally supports scroll bars)
  • Table (A very customizable table, with cells and events for cell clicks, cell selection etc)
  • TextBox
  • ToggleSwitch

Creating a ControlsConsole with some example UI

public class ExampleControls : ControlsConsole
{
	private readonly Button _button;
	private readonly TextBox _textBox;

	public ExampleControls(int width, int height) 
		: base(width, height)
	{
		_button = new Button(width: 30, height: 1);
		_button.Position = new Point(10, 5);
		_button.Text = "Click me!";
		Controls.Add(_button);

		_textBox = new TextBox(width: 30);
		_textBox.Position = new Point(10, 7);
		Controls.Add(_textBox);
	}
}

Setting this as our starting console (.SetStartingScreen(a => new ExampleControls(90, 30))) we can see the following:

You can easily hookup an event to the button, once it is clicked it is fired:

_button.Click += (sender, args) => { System.Console.WriteLine("Button was clicked!"); };

Ofcourse the ControlsConsole window has a surface like a regular console, which you can also modify based on the .Surface methods.

Changing the colors of UI elements

Each UI element uses a color theme that is associated with it,
SadConsole provides base themes for each UI element.
Each new UI element will have a reference to its base theme.
So changing the base theme will also modify the color of all buttons referencing it.

In the following example, we clone the base theme, and use the clone to modify only the color theme of the specific button we want, without impacting any other buttons.

// Retrieve the theme colors and clone it, so it's its own instance
// Otherwise we are modifying the base theme, and all buttons that use it
var colors = _button.FindThemeColors().Clone();

// Adjust the background & foreground for the "Normal" state
colors.ControlBackgroundNormal.SetColor(Color.Orange);
colors.ControlForegroundNormal.SetColor(Color.Black);

// Mandatory to rebuild the appearance of the color theme
colors.RebuildAppearances();

// Set the theme to the button
_button.SetThemeColors(colors);

Thats it for UI elements!

Leave a comment

Design a site like this with WordPress.com
Get started