The UI is running, which is a good start, but currently it's just a small box with some text in it

This section will handle input from the player by setting up two buttons and handling their events through the root class.

First, let's clean up the layout a bit to make it easier to add to. Open the Layout.xml file.

Add a new partition element and have the pre-existing TextBox be a child of it:

<Partition>
    <TextBox Size="15%, 10%" Text="Hello World!"/>
</Partition>

This partition will act as a container for the buttons and the text box, so that they can all be handled as one object. Currently; however, the partition has no size, so will not render. Add a size attribute to it, and change the size of the text box so that it fills the partition:

<Partition Size="128, 64">
    <TextBox Size="100%, 50%" Text="Hello World!"/>
</Partition>

By running the project, you should see a 128x32px text box that says "Hello World!".

Now add two buttons to this partition. These buttons will eventually increment and decrement a number which will be displayed by the TextBox, so they will be placed under the text to the left and right.

<Partition Size="128, 64">
    <TextBox Size="100%, 50%" Text="Hello World!"/>
    <TextButton Position="0%, 50%" Size="50%, 50%" Text="-"/>
    <TextButton Position="50%, 50%" Size="50%, 50%" Text="+"/>
</Partition>

By running the project, you should see the text box from before, but now with two buttons under it.

It's a bit annoying having the buttons be in the corner of the screen. Let's quickly centre the whole partition to make things look neater. Add the Pivot and Position attributes to the Partition element.

<Partition Position="50%" Pivot="50%" Size="128, 64">

Now the buttons exist, it is time to listen for them being clicked. Before that, though, there needs to be some way to reference the elements. With the layout sheet still open, add a "Tag" attribute to the text box and buttons:

<TextBox Size="100%, 50%" Text="Hello World!" Tag="Display"/>
<TextButton Position="0%, 50%" Size="50%, 50%" Text="-" Tag="SubtractButton"/>
<TextButton Position="50%, 50%" Size="50%, 50%" Text="+" Tag="AddButton"/>

Now that each element has a tag, it's time to reference them in code.

Open the TestRoot.cs file (or whatever you named it) from the previous guide. Add four variables:

public class TestRoot : Root 
{
    private int counter;
    private TextBox display;
    private Button subtractButton;
    private Button addButton;
}

Now override Root's PostInitialise function. This is called after the entire UI has been set up, so allows elements to be safely found within the layout.

public class TestRoot : Root 
{
    private int counter;
    private TextBox display;
    private Button subtractButton;
    private Button addButton;
    
    protected override void PostInitialise()
    {
        
    }
}

The GetElementFromTag function can be used to retrieve the elements by the tag given to them.

Set each of these variables in the function.

protected override void PostInitialise()
{
   display = GetElementFromTag<TextBox>("Display");
   subtractButton = GetElementFromTag<Button>("SubtractButton");
   addButton = GetElementFromTag<Button>("AddButton");
}

Now it is time to connect to the buttons' events. The button element provides functions and properties for handling mouse clicks. The ConnectLeftClick function will be used here, and while a function could be passed in, a lambda will be used for simplicity. The final TestRoot.cs file should look like this:

public class TestRoot : Root 
{
    private int counter;
    private TextBox display;
    private Button subtractButton;
    private Button addButton;
    
    protected override void PostInitialise()
    {
        display = GetElementFromTag<TextBox>("Display");
        subtractButton = GetElementFromTag<Button>("SubtractButton");
        addButton = GetElementFromTag<Button>("AddButton");

        display.Text = $"Value: {0}";
        subtractButton.ConnectLeftClick(() => { counter--; display.Text = $"Value: {counter}"; });
        addButton.ConnectLeftClick(() => { counter++; display.Text = $"Value: {counter}"; });
    }
}

Now when you run the project, you should see the panel from before, but the text box should say "Value: 0", and clicking on the buttons should modify the counter.

While the buttons now work, they do not feel very interactive. This is because they do not react to the mouse hovering and clicking at all, they look and feel exactly like the text boxes. Luckily, GuiCookie has this interactivity built-in, there's just a bit of work required to use it. Open the Style.xml file from the first guide, and find the "Default" style.

When the player hovers over the button, it should get lighter. There's no real way to make anything lighter than 100%, so the alternative is to darken the main colour first. Add a "Tint" attribute to the SliceFrame node and set the value to the "MainTint" colour defined in the first guide.

<Styles>
    <Default>
        <SliceFrame Image="Pane" NineSlice="Thirds" Colour="$MainColour" Tint="$MainTint"/>
        <Font Font="Default" Colour="#BBB"/>
    </Default>
</Styles>

Now extra variants can be added. See the page on style variants if you wish to know more, but for now it will be kept simple.

Under the "Default" node, add three new nodes. Within these nodes, define a SliceFrame node with a "Tint" attribute. Set the values as so:

<Default>
    <SliceFrame Image="Pane" NineSlice="Thirds" Colour="$MainColour" Tint="$MainTint"/>
    <Font Font="Default" Colour="#BBB"/>

    <Hovered>
        <SliceFrame Tint="#FFF"/>
    </Hovered>
    <Clicked>
        <SliceFrame Tint="$ClickedTint"/>
    </Clicked>
    <Disabled>
        <SliceFrame Tint="$DisabledTint"/>
    </Disabled>
</Default>

Note that the hovered tint is just white, which means it will be the original colour (MainColour) when hovered. There's not really a need to have this be a pre-defined colour since it's just white.

Also note that there's a variant for elements that are disabled. This will not be touched on in this guide, but will crop up again soon.

And now if you run the project, the buttons will react to you hovering and clicking on them. This only affects buttons and anything else with a mouse handler, so the text box does not have this behaviour.

With interaction out of the way, the next step is to create a custom template for the button panel created in this guide so that it can easily be reused.