03 Talking with Code

This section is going to show how we can talk to the code behind from XAML as well as the other way around. Before we look at more advanced things like data bindings, we need to understand how an action in the XAML reaches the code, and how a change in the code updates the page.

You can view the code and the diff for this step on GitHub.

Responding to events from XAML

One of the most common things that we would want to do is to respond when the player does something on the page. For example, when the player taps a button.

Let's start from that. We are going to listen for when the player taps the "play" button and pop up a message saying that it is coming soon.

First things first, we need to hook up the Clicked event of the button to a method we want to call. This we do in the XAML by doing the same thing we would do when setting a property:

<Button Clicked="OnPlayClicked" />

Once we have the XAML property set, we can go to the code behind and create that method:

private void OnPlayClicked(object sender, EventArgs e)
{
}

This is just a normal event handler for any C# code. At runtime, the XAML engine will look in the code for the event handler and automatically wire it up.

This can also be done in code using traditional C# event logic.

myButton.Clicked += OnPlayClicked;

Writing event code

Now that we have our event wired up, we can start writing the code that will show a popup when the button is tapped.

You can read more about popups in the docs.

To show a popup with a single button, we can use the DisplayAlert method on the page:

private void OnPlayClicked(object sender, EventArgs e)
{
    DisplayAlert("Play", "We are still working on this!", "OK");
}

If we run the game and tap the button, we get a popup.

Updating the XAML from code

It is also very easy to interact with XAML controls from code because they are just normal .NET objects in memory.

Let's say that we want to disable the "scores" button when there are no scores to show. It is no use having a button that, when clicked, takes us to an empty page.

To do this, we first need to give the "scores" button a name so we can interact with it. This is done by adding the x:Name attribute to the button in the XAML:

<Button x:Name="scoresButton" />

We can now jump back to the code behind and start changing properties of the button. What we want to do is to disable the button in the constructor, and then later enable it once we have checked for any scores. We will do the enabling later as we have no logic yet to check for scores.

The constructor for the page is not empty as it needs to call logic to actually create the page from the XAML. This is all done in the generated InitializeComponent method:

public MainPage()
{
    InitializeComponent();
}

So, if we want to do something, we should always put it after the InitializeComponent(); line:

public MainPage()
{
    InitializeComponent();

    scoresButton.IsEnabled = false;
}

Here we can see that we use normal C# properties and can change the properties for the XAML controls.

If we run the game now, we can see that the "scores" button is disabled, and when we tap the "play" button, we get a popup.