Understanding Universal Windows Platform With Hello World App

In this article, we will discuss how we can understand the universal Windows platform, prerequisites, setting up the environment, and so on. When I was starting to learn UWP apps, I didn't have Windows 10 OS, but now I have bought Windows 10 licensed software from the Microsoft store. Now, we will see the steps for designing, developing, building, and testing the universal Windows platform apps in Windows 10. We are able to run the UWP apps with different devices including desktop, phone, Xbox, and IoT.

Background

Universal Windows platform (UWP) is a platform-homogeneous Application architecture, created by Microsoft and first introduced in Windows 10. The purpose of this software platform is to help develop metro style apps, that run on both Windows 10 and Windows 10 mobile, without the need to rewrite for each. It supports Windows Application development, using C++, C#, VB.Net, or XAML. The API is implemented in C++ and supported in C++, VB.Net, C#, F# and JavaScript. It is designed as an extension to the Windows run time platform, first introduced in Windows Server 2012 and Windows 8. The UWP allows developers to create applications that will potentially run on multiple types of devices. (source: wikipedia)

We can easily develop UWP apps with the help of API packages and run them on all Window 10 devices including phone, desktop, tablet and so on. It also supports a number of screen resolutions.

Image source: msdn 

Prerequisites

You have to download the following software and install them on your PC.

1. Windows 10

2. Visual Studio 2015

3. Windows 10 SDK

4. Windows Phone Emulator 10

You can download and install the free community edition of Visual Studio 2015 fro the Microsoft Developer portal.

Setting up the environment

If you want to know how to install Window 10 SDK and Windows Emulator 10; the step-by-step guide is available on,

• Getting Started With Windows 10 Apps. 

We have discussed Window 10 SDK features in the my previous article.

How to develop, build and run UWP App

We are going to discuss how to develop, build and run the UWP Hello World App and show the demo in multiple devices. We will see the step by step guidelines for the UWP Hello World app creation here:

Step 1

Open Visual Studio 2015. Go to file menu, point to new and then click new project. New Project window will open. You can select an installed template like “ Universal” under Windows in Visual C# Template and then select a blank app universal Windows, and type Project Name UWPHelloWorld. Choose the project location path and then click OK button.



Now, you can see UWPHelloWorld project structure, shown in the screen shot:



Step 2

Package.appxmanifest This file contains your app name, description, language, start up page and so on.

Asset folder This folder contains a collection of the images like logo, Winndows store logo, splash screen as follows:

• LockScreenLogo.scale-200.png
• SplashScreen.scale-200.png
• StoreLogo.png
• Square150x150Logo.scale-200.png
• Square44x44Logo.scale-200.png

App.xaml and App.xaml.cs

This file contains a constructor that calls the InitializedComponent method and it’s an auto generated code by Visual Studio. It is mainly used to initialize the declared elements in the xaml file. It also contains the methods to handle the activation and suspension of the app.

MainPage.xaml and MainPage.xaml.cs

This file contains a user interface (UI) code. The code at the back end is the logic code and event handler code for your app.

Step 3

MainPage.xaml

<Page
    x:Class="UWPHelloWorld.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPHelloWorld"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Padding="50 50 50 50">
            <TextBlock Name="txtMessage" Text="Hello World" FontFamily="Tahoma"></TextBlock>
        </StackPanel>
    </Grid>
</Page>

Step 4

Now, you can run the UWPHelloWorld apps with the different devices. You can see how an app looks, as shown below:

Select a Debug and Mobile Emulator 10.0.10586.0 WVGA4 inch 512 MB option to run the apps.

 

 

Select a Debug and Local Machine option to run the apps.


Note

You can also read this article in my blog here.

Conclusion

I hope you understood the UWP and how to develop, build and run it on multiple devices. I have covered all the required things. If you find anything that I missed in this article, please let me know. Please share your valuable feedback or suggestions.