Tip Calculator Hands On Lab for Windows Phone

This is the basic instructions for the demo I did as part of the Mobile App Development throwdown at the CS & IT Conference July 10th, 2012,

Open Visual Studio (you can get it as part of the Windows Phone SDK) and create a new project.

Be sure to select Visual C# as the language, Silverlight for Windows Phone as the set of templates and Windows Phone application as the specific template. Also make sure you give your project a meaningful name. I chose TipDemo in this case.

We’ll be creating this as a Windows Phone 7.1 project.

A new project will open that may look something like the following:

If it looks differently you can open the Properties Windows from the view menu and the toolbox is probably just not pinned open.

From left to right we have the Toolbox (which I have pinned open) that shows us controls that we can use to create our user interface, the design window where we create out by dragging controls to it, the code window that shows the XAML (Silverlight code) that represents the UI controls, and the Solution Explorer and properties window. The properties window will allow us to set attributes for our UI controls.

There first objects we will change are the Application Title and Page Name. We will do this by selecting each of these objects on the design form and changing the text property as follows.

Now we can start our user interface. We will use Text Blocks to display labels and data that we set in our code. We will use a Textbox to input the amount of the restaurant bill. We are going to create the following objects on our screen:

Object Type	Name	Other Property settings
Text Block	textBlock1	Text – Meal Charge Text attributes to taste
Textbox	txtTab	Text - <empty> Text Alignment - Right
Slider	slider1	Minimum – 0 Maximum – 35 Value - 15
Text Block	textBlock3	Text – Tip %
Text Block	txtTipP	Text - <empty> Text Alignment - Right
Text Block	txtTip	Text - <empty> Text Alignment - Right
Text Block	txtTotal	Text - <empty> Text Alignment - Right
Text Block	txtSplit	Text - <empty> Text Alignment - Right
Text Block	textBlock5	Text – Split Among
Image	UpSplit
Image	DownSplit
Text Block	txtHowMany	Text - <empty> Text Alignment - Right

Your design screen should look something like this:

Now we want to add some images to the image objects. First we add some images to our project. I used an up arrow and a down arrow image like these. From the Project Menu I selected Add Existing Object and browsed to where I had saved the Image files and added them to me. The show up in the Solution Explorer as follows:

Now that these images are associated with out project we can add them to the image boxes we have on the screen. We will do this from the source property in the property box. Selecting the Source property will give us a dialog box like this:

We’ll now associated the images with the associated up and down image box.

Our User Interface is now essentially completed. Although we may want to think about adding more labels to make things a bit more clear for the user. Now it is time for some code though.

We now open MainPage.xaml.cs from the Solution Explorer so that we can add some code. The first thing we need to do is declare some variables.

 public partial class MainPage : PhoneApplicationPage

{

// Constructor

int tipPercentage;

int splitAmong;

double toTip;

double total, baseTab;

double mySplit;

Inside the Constructor function itself we will set some initial values. Note that there are named objects in this code to set some of the text values for objects that are part of our user interface.

 public MainPage()

{

InitializeComponent();

tipPercentage = 15;

slider1.Value = tipPercentage;

txtTipP.Text = tipPercentage.ToString() + "%";

splitAmong = 1;

txtHowMany.Text = splitAmong.ToString();

}

We need to do some calculations. We need to calculate the tip amount from the selected percentage. We need to create a new total amount to pay by adding the original bill amount to the tip amount. Lastly we need to calculate how to split the bill among one or more people.

We will create a general purpose calculation function that we can call from many places in the program if we wish.

 private void doCalcs()

{

try

{

baseTab = double.Parse(txtTab.Text);

toTip = tipPercentage / 100.0 * baseTab;

txtTip.Text = toTip.ToString("$###,##0.00");

total = baseTab + toTip;

txtTotal.Text = total.ToString("$###,##0.00");

mySplit = total / splitAmong;

txtSplit.Text = mySplit.ToString("$###,##0.00");

}

catch { }

}

We will also create a method that can be called in response to tapping on various objects which will call there helper method.

 private void Calculate(object sender, GestureEventArgs e)

{

doCalcs();

}

Next we want to respond to changes in the tip amount. We want to display a new tip percentage as the slider is moved and then calculate a new tip amount based on that percentage. Note that we call the helper calculation routine from this routine.

 private void TipPer(object sender, RoutedPropertyChangedEventArgs<double> e)

{

try

{

tipPercentage = (Int16)slider1.Value;

txtTipP.Text = tipPercentage.ToString() + "%";

doCalcs();

}

catch { }

}

Lastly we want to deal with the splitting on that tab among more than one person. We want methods that respond to taps on the up and down arrows. A tap should increase or decrease the number of people to split the tab among. Note that we don’t want there to be less than one person.

 private void DownSplit_Tap(object sender, GestureEventArgs e)

{

if (splitAmong > 1)

splitAmong = splitAmong - 1;

txtHowMany.Text = splitAmong.ToString();

doCalcs();

}

private void UpSplit_Tap(object sender, GestureEventArgs e)

{

splitAmong = splitAmong + 1;

txtHowMany.Text = splitAmong.ToString();

doCalcs();

}

Now we need to associate these methods with specific events. We will return to the ManPage.xaml tab to do this.

Click on the UpArrow image to select it. On the Properties window select the Events tab.

Selecting the Tap event will bring up a dropdown list that will include UpSplit_Tap which you will select. The same steps are followed to select DownSplit_Tap to respond to a tap on the down arrow.

For the Slider bar we will select TipPer to respond to the ValueChanged event.

We will want the Calculate method to be called in response to taps on any one of several textBlocks such as the Total box.

We can now run our program on the Windows Phone Emulator (or on an actual device if we have a developer unlocked phone available.)

This isn’t really the keyboard we want since we are just going to be entering numbers. We could have the user select the number keypad but it makes more sense to have the numeric keypad open by default. So let’s fix that. We will do that by specifying InputScope.

In the property window select the InputScope property and set it to InputScope.

Now we need to take a look at the XAML code in the design code window. We’ll find some code that looks like this:

 <TextBlock Height="33" HorizontalAlignment="Left" Margin="46,37,0,0" Name="textBlock1" Text="Meal Charge" VerticalAlignment="Top" Width="146" />

<TextBox Height="72" HorizontalAlignment="Left" Margin="269,20,0,0" Name="txtTab" Text="" VerticalAlignment="Top" Width="181" TextAlignment="Right">

<TextBox.InputScope>

<InputScope />

</TextBox.InputScope>

</TextBox>

In the middle of this code we will specify that we want the CurrencyAmount keyboard by adding line 5 below.

    1: <TextBox.InputScope>
    2:  
    3: <InputScope>
    4:  
    5: <InputScopeName NameValue="CurrencyAmount" />
    6:  
    7: </InputScope >

Now when we run the program we get the numeric keypad.

That's the basics. Now cut lose and make it your own.