Building a Windows Phone App From Scratch–Part 3 of 3

Windows Phone Tutorial

In Part 1 of this mini-series we created the layout for a calculator. In Part 2, we filled in the event handlers for the buttons.  In this third and final part we’ll review the code for the calculator and we’ll add a click sound for each button press. 

Let’s start by looking at the simple underlying logic.  We examined the DisplayNumber property and its backing DependencyProperty in the previous posting. 

The rest is simply a matter of keeping track of when the user is entering a new number (e.g., if the user enters 56 + 35 we want to consider 35 a new number, but not the six following the five).  To keep things simple we’ll force the user to hit the equal sign between each pair of numbers.

We begin by setting the datacontext and the initial value when the user navigates to the page,

protected override void OnNavigatedTo(
    NavigationEventArgs args)
{
    DataContext = this;
    DisplayNumber = 0;
}

Clicking on a number value requires that we obtain the value of the content of the button that was clicked and then convert that value to a double,

private void NumberButton_Click(
    object sender, System.Windows.RoutedEventArgs e)
{
    AddToDisplayNumber(double.Parse(
        ((Button)sender).Content.ToString()));
}

The helper method AddToDisplayNumber will check to see if this is a new number; if not it sets the DisplayNumber by modifying the current DisplayNumber to be shifted over (multiplied by 10) and adding the current digit.  If it is a new number then we hold on to the previous number (as we’ll be adding to it, subtracting from it, etc., when we hit equals).

private void AddToDisplayNumber(double digit)
{
    if (isNewNumber)
    {
        isNewNumber = false;
        previousNumber = DisplayNumber;
        DisplayNumber = digit;
    }
    else if (DisplayNumber == 0)
    {
        DisplayNumber = digit;
    }
    else
    {
        DisplayNumber = DisplayNumber * 10 + digit;
    }
}

You can see the interaction between DisplayNumber and PreviousNumber by looking at what happens when we click the Equals button,

 private void EqualButton_Click(
     object sender, 
     RoutedEventArgs e)
 {
     switch (operatorType)
     {
         case OperatorTypes.Addition:
             DisplayNumber = previousNumber + DisplayNumber;      
             break;
         case OperatorTypes.Subtraction:
             DisplayNumber = previousNumber - DisplayNumber;
             break;
         case OperatorTypes.Multiplication:
             DisplayNumber = previousNumber * DisplayNumber;
             break;
         case OperatorTypes.Division:
             DisplayNumber = previousNumber / DisplayNumber;
             break;
         default:
             break;
     }
     isNewNumber = true;
 }

The rest is, frankly, trivial.  The addition, subtraction, multiplication and division buttons just set the enumerated constant OperatorTypes; for example,

 private void AddButton_Click(
     object sender, 
     RoutedEventArgs e)
 {
     operatorType = OperatorTypes.Addition;
     isNewNumber = true;
 }

Setting the Click Sound

Setting the click sound is very easy and best done by opening the project in Expression Blend.  Create a folder for sounds and add a click  sound to that folder. Next, right click on any button and select Edit Template –> Edit Current. 

That will open the currently applied template for that button (and incidentally, for all the other buttons).  Open the Assets tab and select Behaviors.  Drag the Play Sound Action behavior onto the button’s Grid and set its Source value (in the properties window) to your existing button sound (which will appear in the drop down).  Set the Volume to 1.  Pop out of the template and run the program; each button clicks as you press it, and the four functions work.