<title>UI Layout Binding</title> To enable interaction between code and layout, we enable binding. # Binding Variables # Variables Create a property on your component's code. ```csharp public string MyVariable { get; set; } ``` Bind it to any property by adding @ before the property name. ```html <text @text="MyVariable"></text> ``` The property will be updated when your variable changes. <note>The properties are polled at regular intervals. If the value if different we update the value. This is our comprimise between performance and ease of use.</note> # Binding Elements # Elements You can create a reference to an element. ```csharp public Label GameTitle { get; set; } ``` ```html <text @ref="GameTitle"></text> ``` This variable will be available immediately after the layout is loaded. ```csharp LoadLayout( "/ui/mainmenu/mainmenu.htm" ); GameTitle.Text = "s&box"; GameTitle.Class.Add( "game_title" ); ```⤶ ⤶ # Events⤶ ⤶ You can call events from elements⤶ ⤶ ```html⤶ <button class="option" onclick="PlayGame()">Play Game</button>⤶ ```⤶ ⤶ ```csharp⤶ 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.⤶ ⤶ ```html⤶ <button class="option" onclick="this.ClassToggle( 'game_title' )">Options</button>⤶ ```⤶ ⤶ You can also target this towards other panels by name⤶ ⤶ ```html⤶ <button name="MyPanel">Watch me</button>⤶ <button onclick="MyPanel.ClassToggle( 'hidden' )">Click Me</button>⤶ ```