Exercise 2: Add behavior to the XAML calculator

In this exercise we will continue modifying our Calculator application and connect the behavior to the XAML-defined UI. We'll assign names to the some elements and wire events up to others.

To complete the exercise, you will need Visual Studio for Windows or macOS with the Xamarin development tools installed. You will also need either an emulator/simulator or a device to run the exercise on. Please see the setup page if you need help installing the Xamarin development environment.

Copy the calculator logic

Let's move the calculator logic from the original MainPage source file. You renamed this to OldMainPage in the prior exercise.

1. Open the OldMainPage.cs file.
2. Copy the following fields from that file into your MainPage.xaml.cs code behind file:
   • currentState
   • mathOperator
   • firstNumber
   • secondNumber

public class MainPage : ContentPage
{
    ...
    int currentState = 1;
    string mathOperator;
    double firstNumber, secondNumber;
    ...
}

3. Copy the following methods from the OldMainPage.cs to MainPage.xaml.cs:
   • OnSelectNumber
   • OnSelectOperator
   • OnClear
   • OnCalculate

void OnSelectNumber(object sender, EventArgs e)
{
    ...
}

void OnSelectOperator(object sender, EventArgs e)
{
    ...
}

void OnClear(object sender, EventArgs e)
{
    ...
}

void OnCalculate(object sender, EventArgs e)
{
    ...
}

Add a name to the XAML label

The code behind file now has a dependency against the Label in the XAML - it expects it to be named resultText.

1. Open the XAML file and give the label the name resultText.
2. Make sure the application now builds properly.

<Label x:Name="resultText" FontAttributes="Bold" FontSize="48" 
    BackgroundColor="Black" Text="0" TextColor="White" 
    HorizontalTextAlignment="End" VerticalTextAlignment="Center"
    LineBreakMode="NoWrap" Grid.ColumnSpan="4" />

Add event handlers

We want to be able to perform calculations by pressing the calculator buttons. Wire up the behavior to the Buttons using the methods you imported in the previous step.

1. Open MainPage.xaml.
2. Wire up the Clicked event in XAML on all the number (0-9) buttons to the OnSelectNumber method.
3. Wire up the Clicked event in XAML on all the operator (-,+,*,/) buttons to the OnSelectOperator method.
4. Wire up the Clicked event in XAML on the Clear button to the OnClear method.
5. Wire up the Clicked event in XAML on the Equal (=) button to the OnCalculate method.

// Examples of wiring up a Clicked event
<Button Text="7" ... Clicked="OnSelectNumber" />
<Button Text="8" ... Clicked="OnSelectNumber" />
<Button Text="9" ... Clicked="OnSelectNumber" />

Reset the calculator state

1. Before we test the app, call the OnClear method in the code behind after the InitializeComponent call - this will clear all the fields and set the display text to zero.
2. Build and run the application on your platform of choice - it should now be fully functional.

    public MainPage ()
    {
        InitializeComponent();
        OnClear(this, null);
    }

In this exercise, we have added all the code-behind logic for the calculator and wired it up to the views defined in XAML. If you look through the code, you will find it is primarily oriented around the behavior of the application and less concerned with the UI structure. This is the main benefit of using XAML to define our pages; it allows us to focus the code portion of the app on the logic.

Exercise summary

In this exercise, you have added behavior to your Calculator UI in XAML by wiring up event handlers.

You can view the completed solution in the Exercise 2 > Completed folder of your copy of the cloned or downloaded course materials.