Windows 10 Step by Step Tutorial – Hello UWP App

Introduction

This tutorial introduces you to the basic tools and steps that are required to develop, build and test the Universal Windows Platform Apps using Xaml and C#.

The UWP App runs on different device families that is powered by Windows 10. These device families include

• Desktop
• Mobile
• Xbox
• IoT

Universal Windows Platform provides the common application platform and lets the developers build an app that is available on all the devices that runs on Windows 10. Additionally, you can also use the device family specific API’s in your app. The single app package can be installed on different devices powered by Windows 10.

Prerequisites

You must have the following software’s downloaded and installed on your machine

• Microsoft Windows 10
• Microsoft Visual Studio 2015
• Windows 10 Mobile Emulators

You can download and install the free version of Visual Studio 2015 (Visual Studio 2015 Community Edition) from http://dev.windows.com . This also includes the necessary tools for the Universal Windows Platform App Development.

Some programming knowledge on C# and interest to build UWP is preferred.

Tutorial – Building your First Universal Windows App in Visual Studio 2015

The tools for the Universal Windows App Development provides the necessary templates to build the UWP apps. In this tutorial, lets Create a new UWP project from the Blank App template with C# as language and then deploy and run the app on Local Machine and Windows Mobile Emulator

Let’s create the blank universal app.

Step 1: Launch Microsoft Visual Studio 2015 and Navigate to File -> New -> Project.

Step 2: In the New Project Dialog, navigate to the Installed -> Templates -> Visual C# -> Windows -> Universal and then select the Blank App (Universal Windows) template from the list of templates. Provide the Name for the project and select the location where you want the project to be saved. Also, uncheck the option “Show telemetry in the Windows Dev Center”. Click OK to create the project.

Step 3: This would create the necessary files and folders to build the UWP App in Visual Studio. Let’s look at the Visual Studio Solution explorer and review the items that gets created by default

The Blank Universal Project template creates the following

Folder

– Assets – This folder contains the default assets that is included in the app. You can add the assets that your app uses in this folder. The assets include icons, images etc.

Files

– App.xaml & App.xaml.cs – The App.xaml is a Xaml file that does not have any UI. The App.xaml.cs (partial class) is the main entry point for your UWP. This is similar to main method in the program.cs of a console application. You can declare the styles and the resources in the App.xaml page which can be shared in all pages across your app. This file also includes all the events that correspond to the life cycle of the app like OnLaunched, OnSuspending etc. These events can be used to load the state of the app from previous execution when the app is launched from the terminated state.

– MainPage.xaml & MainPage.xaml.cs – This is one of the default file that is added when a new project is created. It defines the UI or view where the user can start adding UI elements or controls to the Xaml page using Xaml tag as well as add the event handlers in the MainPage.xaml.cs code behind file.

– Package.appxmanifest – This file describes the properties of your app. You can add the capabilities to your app like Microphone, Location etc. as well as specify the logos for the Tiles, splash screen etc. Just double click on the Package.appxmanifest file which opens the file in the GUI editor that lets the developers to set various properties related to the app.

– Project.json – This file manages the NuGet packages in the project that is installed or uninstalled via the NuGet Package manager tool.

Step 4: Open the Mainpage.Xaml file in Visual Studio and add a stack panel with a TextBlock in the existing grid. Set the Text property of the TextBlock to Hello World.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <StackPanel>
    
        <TextBlock Text="Hello World" FontSize="32" />
    
    </StackPanel>

</Grid>

Step 5: By default, you will notice that the Solution Configuration is set to Debug and the platform is set to x86. The Start Debugging button will also be set to “Local Machine” by default. x86 will work for both mobile emulator and local machine. If you want to run this on the Windows Mobile device, you will have to set this to ARM.

Step 6: Click the Start Debugging button with the “Local Machine” option to build, deploy and run your app on the local machine. You will see the blank app window running on the local machine.

Step 7: Close the App and go back to the project in Visual Studio. Select “Mobile Emulator 10.x.x.x.”

Step 8: Click the start debugging button with the “Mobile Emulator” set, you will see that the application will be launched on Windows Mobile emulator.