Create Your First UWP App

In this short tutorial we will learn how to make a very simple UWP APP. I am working on Windows 10 with Visual Studio 2015 for this tutorial.

Let’s start.

Click File, New Project, Windows, Universal Blank app (universal Windows) and give a name to your App as you like and click OK.

New project will look like the following picture.

In the RHS solution explorer window double click on MainPage.xaml file, it will open a new tab for you with some XAML code in editor window.

MainPage.xaml has roughly speaking four sections on the left window for tool box. In the middle there are two windows one for preview of our app and the lower section is our XAML editor and all our XAML code will be here, and right one is for our solution explorer.

Now double click on All XAML Controls tab in Toolbox window, here is a list of different controls that you can use in your App.

Here I will drag a simple text block from Toolbox list => All XAML Control and drop it on preview window as in this picture.
Look! By just dragging controls from the list and dropping on preview (Design) window, our XAML automatically generated in XAML editor. All the properties including Height, Width, Alignments and Margins will set automatically. We do not need to worry and if we would like to change these properties we can easily change as we want, we will discuss this in detail later in this tutorial.

In the same way I am going to add some more controls, a button control and you can also look at its code in XAML editor.
You can change the text properties by double clicking on the text block in the design window then it will open a special window that contains all text related properties, e.g. Font, Font Size etc.

In the same way if you double-click on a button (that we have added in our app) in the preview window then the properties related to the button will open in properties panel, you can change them if you like.
Here is all XAML code that Visual Studio generated for me.

Now we have done with our front end, it’s time to add functionality to our button control. Click on the Wave like icon on the top in the properties window of button or double-click the Click box, it will take you automatically to MainPage.xaml.cs file. Here's the screenshot:

We can add code here (functionality) that we like to perform by our app. For the sake of simplicity I am going to add a simple line of code to just display a message when user clicks on button as in this picture.

Now run your application on Local Machine, it will take some time depending on your machine and then press the button; it will show you the text.
Here is the final output of our app.