Share via

Windows 8.1 Universal App Hello World

  • Article

"Hello World" is a programming sample used to introduce the fundamentals. If you're new to programming, or to WinRT development, follow this tutorial to create a basic app displaying a "Hello World" message, and works on both Windows Phone 8.1 and Windows 8.1.

Prepare

You will need the following:

They are pretty big downloads, so don't delay! This project should take about 10-15 minutes to complete (not counting downloading those large files and installing them), and here's what we'll cover:

  • Create a universal app project
  • Add C# code to a file in the Solution Explorer
  • Set the StartUp project
  • Run the app.

Step 1 – Create the Project

http://grogansoft.com/blog/wp-content/uploads/2014/10/101014_1042_windows81un1.png Some menu options are in slightly different places in Visual Studio Express.

  1. FILE > New > Project:

http://pumpkinszwan.files.wordpress.com/2014/10/snaghtmladb0e7a_thumb.png

The New Project window will open.

2. Navigate the menu tree on the left to find the Universal Apps templates (Installed > Templates > Visual C# > Store Apps > Universal Apps).

http://grogansoft.com/blog/wp-content/uploads/2014/10/101014_1042_windows81un2.png If you don't see the universal templates your Visual Studio might need an update. Check for updates via TOOLS > Extensions and Updates on the main menu.

3. From the templates listed in the middle area, select Blank App (Universal Apps).

4. Type HelloWorld in the Name: field.

5. Click OK.

http://grogansoft.com/blog/wp-content/uploads/2014/10/101014_1042_windows81un3.png

You've created a universal app called HelloWorld (though it doesn't do anything yet)! You should see something like this:

http://pumpkinszwan.files.wordpress.com/2014/10/image_thumb.png

The main area (dark with the brightly coloured text in my Visual Studio setup) is the code editor. Visual Studio has automatically opened a file called App.xaml.cs, which is one of the main files in a WinRT app, and is responsible for a lot of the app's launching behaviour. That text is a C# class (a sub-division of code). For this tutorial you don't need to know what it all means. On the right is the Solution Explorer. The solution is a container for all the code and files in our app. Let's have a closer look at the solution.

A Universal App Solution

http://pumpkinszwan.files.wordpress.com/2014/10/image_thumb1.png

A universal app solution consists of three projects (A, B, and C), each with its own code (and other files). The projects in a universal Windows app are:

a. Windows 8.1 (Store) project

b. Windows Phone 8.1 project

c. The shared project.

You're probably wondering why there are separate projects when the app is supposed to be universal...

What does Universal Mean?

You can't run a Windows Phone app on a Windows PC (or vice versa), but beneath the surface they are running mostly the same code. Rather than create separate apps with overlapping code, Microsoft created the universal app model, which makes it easy to create a single solution that can output two separate apps (for Windows Phone and for Windows), while ensuring as much code as possible is reused.

Three Projects

A universal app has a shared project. This project shares its contents to the phone and PC/tablet projects, both of which can understand it.

Phone app = shared project + phone project

Windows app = shared project + Windows Store project

The separate Windows Phone and Windows Store projects include anything specific to each platform (most likely the user interface will be laid out differently, for example). Most of the nuts-and-bolts code can be put in the shared project, since the two platforms are mostly compatible.

Step 2 – Add the Code

We're going to add a few lines of code to display a popup with the traditional "Hello World" message. In the Solution Explorer, find and double-click the App.xaml.cs

file:http://pumpkinszwan.files.wordpress.com/2014/10/image_thumb2.png

http://grogansoft.com/blog/wp-content/uploads/2014/10/101014_1042_windows81un4.png The triangles expand file groups. Some items have linked files (a .xaml file is for XAML code – eXtensible Markup Language, and a .cs file is for C# code). Usually the XAML defines the user interface (it's similar to HTML), and C# is the program that runs 'behind the scenes' (called 'code behind'). Expand App.xaml within the HelloWorld.Shared project to find App.xaml.cs.

What is App.xaml.cs?

This contains the main code that acts as a starting point for your entire app. Think of it like a tree trunk that the rest of your app's code branches out from. We'll add a simple popup message here (you wouldn't normally do this sort of thing in App.xaml.cs, but it's a simple way to start as this file is shared by both the phone and tablet/PC app).

Using

The first line of code we will add is a 'using' directive. I won't go into namespaces here, but in a nutshell, 'using' lets us use code our app couldn't otherwise 'see'. At the top of the App.xaml.cs file you'll see several using directives, such as:

using System;
using Windows.UI.Xaml;

Add the following to that list (be careful to spell it correctly, and note C# is case sensitive):

using Windows.UI.Popups;

Showing the message

A universal app template already has a method (a block of code) that runs automatically when the app is launched, so we'll hitch a ride in there. Find the following line in the App.xaml.cs code:

protected override void OnLaunched(LaunchActivatedEventArgs e)

After this line you'll see code inside a pair of braces ( { } ), which define the start and end of the OnLaunched method. Don't worry about that code. Go to the end of this method, just before the closing brace. The last line of this method is currently:

Window.Current.Activate();

Directly after that line (but before the closing brace), paste in the following:

MessageDialog msg = new MessageDialog("Hello World");msg.ShowAsync();

These lines create a message dialog box called msg containing the words "Hello World", and then displays it. And we're done with the coding. This is just "Hello World" after all!

 

Step 3 – Running the App

A universal Windows app is two apps in one, so we need to tell it which we want to run. Since you're developing on a PC, let's test the Windows Store version first.

Test the Windows Version

Set the Windows app as our StartUp project:.

  1. In Solution Explorer, right-click on the HelloWorld.Windows (Windows 8.1) project and select Set as StartUp Project from the context menu. http://pumpkinszwan.files.wordpress.com/2014/10/image_thumb3.png
  2. Choose Local Machine (the machine you are developing on) from the drop-down. This is where we are going to test the app.
  3. Click the Local Machine button with the green triangle. The app will build then run.

http://pumpkinszwan.files.wordpress.com/2014/10/image_thumb4.png

You should see this:

http://grogansoft.com/blog/wp-content/uploads/2014/10/image_thumb5.png

Click the stop button on the Visual Studio menu bar to stop the app:

http://grogansoft.com/blog/wp-content/uploads/2014/10/image_thumb6.png

Test the Windows Phone Version

Set the Windows Phone project as the StartUp project. You can test on a physical Windows Phone* or one of the emulators built in to the Windows Phone SDK. From the drop-down select Device or one of the emulators listed, and then hit the button to build/run the app.

http://grogansoft.com/blog/wp-content/uploads/2014/10/101014_1042_windows81un5.png *The phone must be developer unlocked. If you have a developer account you can unlock your phone from the TOOLS > Windows Phone 8.1 menu. The phone needs to be plugged into the computer (and recognised, and the screen must be unlocked) to deploy the app.

You should see this:

http://grogansoft.com/blog/wp-content/uploads/2014/10/image_thumb7.png

 

Overview

We created a new universal app, with three projects (one each for Windows Phone and Windows Store, and a unifying shared project). Because Windows Phone and Windows Store apps both run on the WinRT framework we were able to add code to the shared project that was automatically included in both versions of the app. We then ran and tested the app on both PC and phone.

When it comes time to publish a universal app for uploading to the stores, you would actually build your app twice and upload separate packages to the two stores (Windows Phone Store and Windows Store). You should now have a fair idea of how to create a project, and know the basics of how Visual Studio organises a solution. You're well on your way to building great universal Windows apps.