in Universal Apps

Hello Universal Windows Platform !!

This is the first post of a multiple series focused on learning, understanding and applying the concepts of the Universal Windows Platform with the sole purpose of developing modern applications for the Windows 10 environment.

You can find the whole source code for this blog post here

What is the Universal Windows Platform

An Universal Windows Platform (UWP) app is a Windows experience that is built upon the UWP, which was first introduced in Windows 8 as the Windows Runtime. At the core of UWP apps is the idea that users want their experiences to be mobile across ALL their devices, and they want to use whatever device is most convenient or productive for the task at hand.

More on the official MSDN documentation

Introduction to Universal Apps development

In order to pass on the legacy, the first example you learn to code when you are introduced to a new programming language or concept is the Hello World. To set your development enviorment, you will need to download Visual Studio Community edition and install the Universal Platform SDK, as described here.

We will start by creating a basic universal app project. To do this we go to File > New > Project…, we select Blank App (Universal Windows). We can change the .NET Framework target, include Application Insights into our project and create a new Git repository from the project. We then specify the project and solution names and also the location to which we want to store it.

01

The project explained

01

Properties: Information about the project (version, copyright etc.)

References: A list of all your dependencies in form of NuGet packages

Assets: Default folder (can be changed) for storing visual assets of your app (splash screen, app icon, store logo icon etc.)

App.xaml/App.xaml.cs: The main entry point where you configure which page to load when the app is opened

App_TemporaryKey.pfx: Used for publishing to the Windows store (not covered in this post)

MainPage.xaml: User interface implementation of a page (in this case, the main page)

MainPage.xaml.cs: Backend implementation of a page (in this case, the main page)

Package.appxmanifest: A file which describes your app (app name, capabilities etc.)

project.json: The file which stores a list of all the NuGet packages your application needs to have in order to function.

What is XAML?

Extensible Application Markup Language (XAML) is a declarative language that can initialize objects and set properties of objects, using a language structure that shows hierarchical relationships between multiple objects, and using a backing type convention that supports extension of types. XAML has a basic syntax that builds on XML. By definition, valid XAML must also be valid XML.

More on the official MSDN documentation

If you are familiar with XML or have ever modified (or viewed) a HTML page, be it for a project or assignment, you will learn XAML very quickly.

The code – MainPage.xaml

<Page
    x:Class="HelloWorld.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    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}">
        <TextBlock
            FontSize="25"
            Text="Hello Universe !!"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
        </TextBlock>
    </Grid>
</Page>c

The Page element is mandatory in order for the file to be recognized as the content of the window Frame.

The Grid element serves as the root element in the page. The root element is not required by default, nor it has to be a Grid (it can be anything, as long as it derives from the Panel class) but only one root element can exist in a page.

The TextBlock element serves as a text container ( unlike HTML, text cannot be randomly written inside the document, it has to be contained inside a tag). We can make use of the powerfull Visual C# IntelliSense and style our “Hello Universe” text however we want to.

The code – Main.xaml.cs

using Windows.UI.Xaml.Controls;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace HelloWorld
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
    }
}

Namespaces can be described as the playground of your application. Namespaces are a way to group related classes and help you organize them. Now that we have a way to group related classes, we need a way to include them, hence the using keyword (it has the same function as import in Java or #include in C/C++).

As you now observed, every XAML UI element is a class implemented in the .NET Framework. The MainPage inherits the properties of a base page in order to know how to interact with the main window. Without the power of C#, the Universal Windows Platform can’t exist. In the constructor of the MainPage class, we initialize the components used by the user interface.

Running the application

We are now ready to build, deploy and run our app. We go to Debug > Start debugging or press F5 on our keyboard. After it builds and deploys successfully, you should see the following window pop-up

01

Eureka, it works. The two black boxes are enabled by default if you build with in the “Debug” environment and are used for profiling and quick live editing when the application is running ( the quick live editing box is added in the new Visual Studio Community Update 2) .

In conclusion

As you may have observed, no C# coding knowledge is required create a basic “Hello World” app in the Universal Windows Platform, it’s as simple as File > New > Project. For a better understanding of how powerful the C# language really is, you can check out this repository full with basic C# projects.

So there you have it, these are your first steps in UWP app development. Stay tuned on this blog (and star the microsoft-dx organization) to emerge in the beautiful world of “there’s an app for that”.

Post image source: amir.ninja

Related Posts

Leave a Reply