Creating an app for both Windows 8 and Windows Phone 8

So you want to create an app for the Windows platform, targeting both WP8 and Win8?

Well, let me walk you through one way of doing this. There are many other ways, so feel free to experiment yourself.

Getting started
We will start with the Windows 8 app implementation – a simple app where you have to guess a number between 0 and 10.

1) Install the tools from http://www.visualstudio.com

2) Create a new project in Visual Studio 2012/2013, and select the Windows Store Blank App template.

image

3) Name the solution “GuessTheNumber”
image

 

Implementing the “Guess the number app”

Start with changing the already existing Grid XAML code in MainPage.xaml with this:

   1: <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

   2:     <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

   3:         <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="I'm thinking of a number between 0 and 10, what is it?" VerticalAlignment="Top" FontFamily="Global User Interface" FontSize="28"/>

   4:         <TextBox HorizontalAlignment="Center" TextWrapping="Wrap" Text="0" Name="tbGuessedNumber" VerticalAlignment="Top" FontSize="28" />

   5:         <Button Content="Guess!" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="28" Margin="0 10 0 0" Click="Button_Click_1"/>

   6:         <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Name="tbMessage" Text="" VerticalAlignment="Top" FontSize="28" Margin="0 20 0 0"/>

   7:     </StackPanel>

   8: </Grid>

 

Your design should now look something like this:
image

All we did here is to create a StackPanel inside the Grid to align all controls correctly.

Next, we need to add the logic. Go to the code behind of MainPage (MainPage.cs) and replace all the content with this:

   1: using System;

   2: using System.Collections.Generic;

   3: using System.IO;

   4: using System.Linq;

   5: using Windows.Foundation;

   6: using Windows.Foundation.Collections;

   7: using Windows.UI.Xaml;

   8: using Windows.UI.Xaml.Controls;

   9: using Windows.UI.Xaml.Controls.Primitives;

  10: using Windows.UI.Xaml.Data;

  11: using Windows.UI.Xaml.Input;

  12: using Windows.UI.Xaml.Media;

  13: using Windows.UI.Xaml.Navigation;

  14:  

  15: // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

  16:  

  17: namespace GuessTheNumber

  18: {

  19:     /// <summary>

  20:     /// An empty page that can be used on its own or navigated to within a Frame.

  21:     /// </summary>

  22:     public sealed partial class MainPage : Page

  23:     {

  24:         int numberImGuessing = 0;

  25:  

  26:         public MainPage()

  27:         {

  28:             this.InitializeComponent();

  29:         }

  30:  

  31:         void RollNewNumber()

  32:         {

  33:             Random rnd = new Random(DateTime.Now.Millisecond);

  34:             numberImGuessing = rnd.Next(0, 10);

  35:         }

  36:  

  37:         /// <summary>

  38:         /// Invoked when this page is about to be displayed in a Frame.

  39:         /// </summary>

  40:         /// <param name="e">Event data that describes how this page was reached.  The Parameter

  41:         /// property is typically used to configure the page.</param>

  42:         protected override void OnNavigatedTo(NavigationEventArgs e)

  43:         {

  44:             RollNewNumber();

  45:         }

  46:  

  47:         private void Button_Click_1(object sender, RoutedEventArgs e)

  48:         {

  49:             int myInputNumber = Convert.ToInt32(tbGuessedNumber.Text);

  50:             if (myInputNumber == numberImGuessing)

  51:             {

  52:                 tbMessage.Text = "Correct! Now I'm thinking of another one!";

  53:                 RollNewNumber();

  54:             }

  55:             else if (myInputNumber < numberImGuessing)

  56:             {

  57:                 tbMessage.Text = "Higher!";

  58:             }

  59:             else if (myInputNumber > numberImGuessing)

  60:             {

  61:                 tbMessage.Text = "Lower!";

  62:             }

  63:         }

  64:     }

  65: }

It’s a simple logic: When you start the app, a number between 0 and 10 will be placed in numberImGuessing. Every time you press the Guess! button, a check will happen based on if the input number is higher, lower or equal to the one that is inside numberImGuessing.

If it’s correct, a new number will be placed in numberImGuessing.

Now, run the app to see if it’s working! It should be good, but if not – download the source here and check what’s wrong! Source: http://sdrv.ms/10IJrKf

This is the implementation of the Windows 8 app. Next is the Windows Phone 8 implementation.

Implementing the Windows Phone 8 version
This will basically be the same:

1) Add a new blank Windows Phone project based on the Windows Phone template to the same solution:
image

 

2) Name the Project “GuessTheNumberWP” and create the project

3) Open MainPage.xaml and find the grid. This grid is more advanced than the one in the Windows 8 template because of the split. Find the following part of the grid:
<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>

This is where we add the design, the exact same code as we had in the W8-implementation.

   1: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

   2:     <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

   3:         <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="I'm thinking of a number between 0 and 10, what is it?" VerticalAlignment="Top" FontFamily="Global User Interface" FontSize="28"/>

   4:         <TextBox HorizontalAlignment="Center" TextWrapping="Wrap" Text="0" Name="tbGuessedNumber" VerticalAlignment="Top" FontSize="28" />

   5:         <Button Content="Guess!" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="28" Margin="0 10 0 0" Click="Button_Click_1"/>

   6:         <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Name="tbMessage" Text="" VerticalAlignment="Top" FontSize="28" Margin="0 20 0 0"/>

   7:     </StackPanel>

   8: </Grid>

 

The design should look similar to the W8-version, but this time it’s adjusted to the layout of the Windows Phone screen:

image

Next, we need to add the logic! This is also the same as in the W8-app Smile The only difference is that the libraries we use are for WP and not for Win8.

Add the following logic below the MainPage constructor you find in the code behind file:

   1: int numberImGuessing = 0;

   2:  

   3: void RollNewNumber()

   4: {

   5:     Random rnd = new Random(DateTime.Now.Millisecond);

   6:     numberImGuessing = rnd.Next(0, 10);

   7: }

   8:  

   9: /// <summary>

  10: /// Invoked when this page is about to be displayed in a Frame.

  11: /// </summary>

  12: /// <param name="e">Event data that describes how this page was reached.  The Parameter

  13: /// property is typically used to configure the page.</param>

  14: protected override void OnNavigatedTo(NavigationEventArgs e)

  15: {

  16:     RollNewNumber();

  17: }

  18:  

  19: private void Button_Click_1(object sender, RoutedEventArgs e)

  20: {

  21:     int myInputNumber = Convert.ToInt32(tbGuessedNumber.Text);

  22:     if (myInputNumber == numberImGuessing)

  23:     {

  24:         tbMessage.Text = "Correct! Now I'm thinking of another one!";

  25:         RollNewNumber();

  26:     }

  27:     else if (myInputNumber < numberImGuessing)

  28:     {

  29:         tbMessage.Text = "Higher!";

  30:     }

  31:     else if (myInputNumber > numberImGuessing)

  32:     {

  33:         tbMessage.Text = "Lower!";

  34:     }

  35: }

As you can see, this is the exact same code as for Windows 8, event the OnNavigatedTo-event. Smile

Now, right-click on the new GuessMyNumberWP project, find Debug and run it:

image

The WP project will build, and the emulator will start and the app will be installed. Play around with it, but here you go – a simple app for both Windows 8 and Windows Phone 8!

What you can do different is to instead of having most of the logic in each of the apps, you can create a new class library that contains the logic that is the same for both apps, and then just call these functions from the OnNavigatedTo events and Button Click events. This will spare you a lot of time when it comes to having to change the code two places if you wanted to add more logic and functions to the app.

The reason I did it this way here was to show you how similar it is and how easy it is to have two projects in one solution.

Now, go create som WP and Win8 apps! Smile

Download the source here: http://sdrv.ms/10IJrKf

image

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

One Response to Creating an app for both Windows 8 and Windows Phone 8

  1. Hello! I merely would like to give a huge thumbs upward for the fantastic info you’ve got here with this post. We are coming back to your website for more soon.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s