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. Calcflowers 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 EditCurrent 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.

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Data, Essentials, Mango, Mini-Tutorial, Patterns & Skills, WindowsPhone and tagged . Bookmark the permalink.

5 Responses to Building a Windows Phone App From Scratch–Part 3 of 3

  1. 5 mistakes says:

    Your site is really interesting to me and your subject matter is very relevant. I was browsing around and came across something you might find interesting. I was guilty of 3 of them with my sites. “99% of website managers are doing these five errors”. http://bit.ly/umqXgf You will be suprised how easy they are to fix.

  2. Dushyant says:

    Hi Jesse:

    I manged to get the tutorial running – declared the two variables 😉

    However when I click on edit template -> I can see the edit current option but it is not available. Only option I see in Expression Blend for WP7 is to edit a copy and create new blank.

    Thnx!
    -Dushyant

  3. Dushyant says:

    I am new to programming. Can you also share the code for isNewNumber and previousNumber declaration?

  4. Dale says:

    How about enhancing part 3 by introducing new functionality by adding buttons for logarithmic and triginometry calculations and implementing event handlers for the button click events. I would imagine that switch block of code would have to be modified by introducing two new switch cases. The AddToDisplayNumber method would be modified. We would have to add two new methods to calculate a logarithmic function as well as triginometry functions.

  5. Pingback: Building a Windows Phone App From Scratch–Part 3 of 3 – www.nalli.net

Leave a Reply

Your email address will not be published.