UI Basics

<cat>UI.Intro</cat>
<title>UI Basics</title>

There's 2 ways to make UI right now in S&box. 
You can either create Panels entirely through code, or you can use [Razor](ui-razor) to create panels with HTML and CSS that can also use C#.

It is recommended to use [Razor](ui-razor).

# Making a Panel in code

Here's an example panel with a Label that counts up forever.

## MyPanel.cs

```csharp
public class MyPanel : Panel
{
	public Label MyLabel { get; set; }

    public MyPanel()
    {
        MyLabel = new Label();
        MyLabel.Parent = this;
    }

	public override void Tick()
	{
		MyLabel.Text = $"{Time.Now}";
	}
}
```

# Tips and Tricks

- You can set Panel classes - See [Panel.SetClass](https://asset.party/api/Sandbox.UI.Panel.SetClass(string,bool)), and [Panel.BindClass](https://asset.party/api/Sandbox.UI.Panel.BindClass(string,Func))

- If a panel is not behaving as expected you can troubleshoot it using the 'UI Panels' inspector. Enable it in View > UI Panels

<upload src="97/8dacf630b9f409d.png" size="32067" name="image.png" />

## Scaling

By default, UI is scaled based on 1080p.

To change how scaling works, override your hud's `UpdateScale()` method as such:

```csharp
using Sandbox;
using Sandbox.UI;

public class Hud : RootPanel
{
	protected override void UpdateScale( Rect screenSize )
	{
		// Completely disables scaling
		Scale = 1;
	}
}
```

## Drawing Polygons

Example:

```csharp
public class MyGUI : RootPanel
{	
	public override void DrawBackground(ref RenderState state)
	{
        // Obviously, don't declare this here every frame. But you get the idea.
		Span<Vertex> vertices = new Vertex[] {
			new Vertex( new Vector3( 100, 100 ), new Vector4( 0, 0, 0, 0 ), new Color32(255, 0, 0 ) ),
			new Vertex( new Vector3( 300, 100 ), new Vector4( 0, 0, 0, 0 ), new Color32(0, 255, 0 ) ),
			new Vertex( new Vector3( 300, 300 ), new Vector4( 0, 0, 0, 0 ), new Color32(0, 0, 255 ) ),
		};

		var attribs = new RenderAttributes();
		attribs.Set( "Texture", Texture.White );

		Graphics.Draw( vertices, 3, Material.UI.Basic, attribs, Graphics.PrimitiveType.Triangles );
	}
}
```

<upload src="b0cef/8dad4b74473f6ab.png" size="152528" name="image.png" />

UI Basics

Account Management

Special Pages

Wiki List

S&box Wiki