Part 10 - Exercise: Tip Calculator as a Universal App

Download this episode

Download Video

Description

Download the source code for this lesson at http://absolutebeginner.codeplex.com/

In this lesson we're going to take the work that we did in the previous lesson and translate it into a Universal App, which will allow us to distribute our Tip Calculator to both the phone and to the Windows 8.1 App Store for inclusion there.

To begin, (1) In the New Project template, select Templates > Visual C# > Store Apps > Universal Apps.  (2) Select the Blank App (Universal Apps) project template.

clip_image002

Name the project “TipCalculatorUniversal” and click the OK button to close the New Project dialog and create the new app.

Once the new app is created, the Solution Explorer reveals three projects all prefixed with the solution name, then a dot, then:

clip_image004

(1) Windows
(2) WindowsPhone
(3) Shared

Basically, the Windows and the Windows phone projects should only be different in so much that they have similar but different XAML to lay out based on screen size, for their specific differences.  Then, anything that we can share should be added to this Shared project.  So for our Tip Calculator app, this architecture is very straight forward.  We'll put our Tip.cs class in the shared project and then reference it from both our WindowsPhone project and the Windows project.

To begin, let's start with our shared project.  I'm going to right-click the shared project and select Add > New Item …:

clip_image006

In the Add New Item dialog:

clip_image008

(1) Choose Class
(2) Name it: Tip.cs
(3) Click Add

I’ll copy and paste the work that I did in the previous lesson so we have exact duplicate. No changes required here.

clip_image010

Now that Tip class will be available to both my Windows and Windows phone projects.

Next, we’ll work on the WindowsPhone project since we've already created that once. This should be just a matter of going to my MainPage.xaml and copying and pasting all the XAML that I created previously.  After copying and pasting, I have the following result:

clip_image012

Next, I’ll re-create the event handler method stubs by selecting each one in XAML and press the F12 keyboard command.  When finished, the MainPage.xaml.cs should look similar to this:

clip_image014

In my MainPage.xaml.cs, I’ll add the PerformCalculation helper method (and that should be the same as what I created in the previous lesson).

clip_image016

Near the top, we’ll need to create a private field that will hold a reference to the Tip class:

clip_image018

In the RadioButton_Click event handler, I want to call the performCalculation() helper method.

clip_image020
           
Next:

(1) In amountTextBox_LostFocus, I want to make sure to set the billAmountTextBox.Text to the tip.BillAmount to make sure it is formatted correctly.

(2) In billAmountTextBox_TextChanged, I want to performCalculation() to make sure we’re updating the new values.

(3) In billAmountTextBox_GotFocus, I want to clear the contents when the TextBox control receives focus so that I can enter fresh values.

clip_image022

It’s time to test the app in the Emulator.

Important: Currently the Windows project is selected as the StartUp Project.  You can see that because it is in bold in the Solution Explorer.  To change the Start Project that will execute when we start debugging to the WindowsPhone project, right-click the TipCalculatorUniversal.WindowsPhone project in the solution explorer and select "Set as StartUp Project". As you can see, the project name is in a bold font as it appears inside of the Solution Explorer.

clip_image024

Select the start debugging button to run the app in the Emulator.  It should work exactly as it did in the previous lesson.

Now, let's go ahead and create the Windows version of the app.

First, I’ll reset the TipCalculatorUniversal.Windows project as the StartUp Project using the technique I just demonstrated.

Next, I’ll open the MainPage.xaml of the Windows project. You can see we get more of the Microsoft Surface preview in the XAML Editor.

clip_image026

The purpose of this lesson is to demonstrate how little effort will be required to take our Windows Phone app and turn it into a Windows app.  To that end, I’ll begin by literally copying all the of XAML from my Phone’s user interface and pasting it into the XAML editor for the Windows app.

Once I copy and paste everything in the body of my page, I can see the preview displays my work:

clip_image028

Admittedly, there’s a lot of blank space on the right-hand side that we're not using, and I certainly could re-work a lot of this to make it utilize some of that blank space, however as a first pass, I'm pretty happy with this.  It's the promise and the value of XAML that I'm able to reuse it both these contexts, and it works well.

Beyond the XAML layout, we’ll need to modify the MainPage.xaml.cs using the technique I demonstrated earlier, using F12 to Go To Definition … and create the event handler method stubs.

The code in the code behind is identical to what we created before, so use the techniques and the code we used earlier in this lesson for the event handlers, the reference to the Tip class, and the performCalculation() helper method.

Once you’ve finished that, select the arrow next to the debug button that is currently set to Local Machine and change it to Simulator:

clip_image030

Click the debug button.

In the simulator, you can work with the app as expected:

clip_image032

As you can see, you can create a Universal App using one code base (the Tip class) and almost identical XAML for layout.  Admittedly, I could tweak the Windows version of the XAML if I wanted to to make it look good on the larger form factor, but even when I didn't modify it, it looked just fine, at least for this initial version.

So I encourage you to do this: Whatever you're going to build, build it for both Windows and WindowsPhone.  Structure your shared logic with that in mind.  Once you keep your shared logic / business rules / data access in the Shared project, you’ll just reference methods and so forth that are inside of the classes of your Shared project from both the Windows and the Windows phone projects.

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      Aman717

      Sir, I am having trouble with windows 8 App

      If I add the following line

      billAmountTextBox.Text = tip.BillAmount;

      in my EventHandlerMethod:-

      private void billAmountTextBox_LostFocus(object sender, RoutedEventArgs e)
              {                    
                  
              }

      then my Radio Buttons are not working, my BillAmountTextBlock is getting set to $0.0, also I am not able to get the results.

       

      However if I comment out this line

      billAmountTextBox.Text = tip.BillAmount;

       

      then everything seems to work fine.

    • User profile image
      swinghu

      Yes ,Aman717,there is a bug of the Part 10 code resouce ,the function amountTextBox_LostFocus should be like this:

      private void amountTextBox_LostFocus(object sender, RoutedEventArgs e)
      {
      tip.BillAmount = billAmountTextBox.Text ;
      }

    • User profile image
      Nagendra

      How do I change the start URI? I'm having a problem debugging a new page I've loaded but instead of getting a stack trace when I try to navigate to it, I get a useless global debugger line that tells me nothing about why the new page failed to load.. I'm hoping that by trying to change the start page, I can get insight into why I cant navigate to the page.

    • User profile image
      mWeb

      Hmmm, can't Aman717's issue be fixed by adding "tip = new Tip();" inside the public MainPage() declaration? Such as:

      public MainPage()
              {
                  this.InitializeComponent();

                  tip = new Tip();
              }

      When I had the same problem, I deduced that we hadn't done this as we had in our original building of the phone app. Is there a reason we wouldn't do this? (I ask sincerely, since this seemed to have fixed the issue.)

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.