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.

3) Name the solution “GuessTheNumber”

Implementing the “Guess the number app”

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

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <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"/>
        <TextBox HorizontalAlignment="Center" TextWrapping="Wrap" Text="0" Name="tbGuessedNumber" VerticalAlignment="Top" FontSize="28" />
        <Button Content="Guess!" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="28" Margin="0 10 0 0" Click="Button_Click_1"/>
        <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Name="tbMessage" Text="" VerticalAlignment="Top" FontSize="28" Margin="0 20 0 0"/>
    </StackPanel>
</Grid>

Your design should now look something like this:

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:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
  
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
  
namespace GuessTheNumber
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        int numberImGuessing = 0;
  
        public MainPage()
        {
            this.InitializeComponent();
        }
  
        void RollNewNumber()
        {
            Random rnd = new Random(DateTime.Now.Millisecond);
            numberImGuessing = rnd.Next(0, 10);
        }
  
        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            RollNewNumber();
        }
  
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            int myInputNumber = Convert.ToInt32(tbGuessedNumber.Text);
            if (myInputNumber == numberImGuessing)
            {
                tbMessage.Text = "Correct! Now I'm thinking of another one!";
                RollNewNumber();
            }
            else if (myInputNumber < numberImGuessing)
            {
                tbMessage.Text = "Higher!";
            }
            else if (myInputNumber > numberImGuessing)
            {
                tbMessage.Text = "Lower!";
            }
        }
    }
}

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:

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.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <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"/>
        <TextBox HorizontalAlignment="Center" TextWrapping="Wrap" Text="0" Name="tbGuessedNumber" VerticalAlignment="Top" FontSize="28" />
        <Button Content="Guess!" HorizontalAlignment="Center" VerticalAlignment="Top" FontSize="28" Margin="0 10 0 0" Click="Button_Click_1"/>
        <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Name="tbMessage" Text="" VerticalAlignment="Top" FontSize="28" Margin="0 20 0 0"/>
    </StackPanel>
</Grid>

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

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:

int numberImGuessing = 0;
  
void RollNewNumber()
{
    Random rnd = new Random(DateTime.Now.Millisecond);
    numberImGuessing = rnd.Next(0, 10);
}
  
/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name="e">Event data that describes how this page was reached.  The Parameter
/// property is typically used to configure the page.</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    RollNewNumber();
}
  
private void Button_Click_1(object sender, RoutedEventArgs e)
{
    int myInputNumber = Convert.ToInt32(tbGuessedNumber.Text);
    if (myInputNumber == numberImGuessing)
    {
        tbMessage.Text = "Correct! Now I'm thinking of another one!";
        RollNewNumber();
    }
    else if (myInputNumber < numberImGuessing)
    {
        tbMessage.Text = "Higher!";
    }
    else if (myInputNumber > numberImGuessing)
    {
        tbMessage.Text = "Lower!";
    }
}

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:

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

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

kidney function says:

July 16, 2013 at 3:03 pm

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.