S&box Wiki

UI Layout Binding

To enable interaction between code and layout, we enable binding.


Create a property on your component's code.

public string MyVariable { get; set; }

Bind it to any property by adding @ before the property name.

<text @text="MyVariable"></text>

The property will be updated when your variable changes.

The properties are polled at regular intervals. If the value is different we update the value. This is our compromise between performance and ease of use.


You can create a reference to an element.

public Label GameTitle { get; set; }
<text @ref="GameTitle"></text>

This variable will be available immediately after the layout is loaded.

LoadLayout( "/ui/mainmenu/mainmenu.html" ); GameTitle.Text = "s&box"; GameTitle.Class.Add( "game_title" );


You can call events from elements

<button class="option" onclick="PlayGame()">Play Game</button>
public void PlayGame() { // Do stuff }

The method is called on the panel which loaded the layout.

Panel Events

Similar to events, you can wire up Panel Events that don't need any code. In this example clicking on the Options button toggles the game_title class on it.

<button class="option" onclick="this.ClassToggle( 'game_title' )">Options</button>

You can also target this towards other panels by name

<button name="MyPanel">Watch me</button> <button onclick="MyPanel.ClassToggle( 'hidden' )">Click Me</button>

Special Events

Adding .console to the event name will run the string as a console command when the event triggers.

<button onclick.console="map de_dust">Play Game</button>