Windows 10 apps in C# – Hello World Tutorial

Introduction

In this article I’ll take a look at how to write Windows 10 apps and I’ll guide you through the steps you’ll have to take to create a runnable ‘Hello World’ example app.

Please note, that this will not be a programming tutorial. We have written one here. Our programming tutorial series is written for Java, however C# is very similar to Java. This article should just give you a quick overview on how to write an app for Windows 10.

Setting everything up

First you’ll need to install Microsoft’s Visual Studio IDE. It comes in a free Community version and can be downloaded here.

It’s a really good IDE and it actually is my favourite IDE. To my knowledge you’ll need the version 2015 (or newer, actually there is a 2017 version as well), however the SDKs might be available for older versions of Visual Studio as well, but I haven’t tried it.

After downloading the small installer file, just start it. After some options, this dialog will be presented to you:

In this dialog select C# as language and the whole category labelled ‘Universal Windows app development tools’ (in german: “Entwicklungstools für universelle Windows-Apps”). This will install the necessary SDKs and editor extensions for Visual Studio that will allow you to easily create Windows 10 apps. Underneath there is also an option for Windows 8 and 8.1 apps. You can install that as well, if you want to develop apps for these systems.

The setup will then download and install everything. This might take a whole lot of time. The installation size is about 15GBs.

Create a new project

After installing and starting VS, select ‘Create new project’ on the left side of the window. You should see a window similar to this:

Select the .NET-Framework you want to use, I chose 4.5. On the left side choose C# > Windows > Universal and then Empty App. Give it a name and then click ok. Afterwards you should see this window, where you have to choose which version of Windows you want to support:

If you haven’t set up the developer mode in Windows yet (see the ‘Testing’-part below), you’ll be taken to the System-settings before your project is created.

Start designing!

From the Project-Explorer tab (should be on the right side of your screen if you have just set up VS) double click ‘MainPage.xaml’. This should bring up the designer, which looks like this:

As you can see, I’ve already written ‘Hello World’ in the app. To achieve this, select a ‘TextBlock’ from the Toolbox on the left hand side of the screen and drag it into your app. If you click the TextBlock element, you should see it’s properties in the bottom left corner:

In here you can change almost any of the properties of an object on a page of your app. I’m sorry that the labels are in german, however you should find everything in here quite easily. To change the text that’s displayed, expand the ‘Text’-section in the properties and change it’s size. Afterwards select ‘Brush’ (The first element in the list) and change the color of the text. The text itself can be changed in the ‘General’ section of the properties. Change everything until you are happy and try to experiment a bit here.

As you change properties here, you can notice that the code is changing according to what you do. The code is displayed right under your graphic designer. After making all the changes I mentioned above, the code should have changed.

You can, of course, change all the properties of an element in the code by yourself. Just reference to an object by it’s name. You can change the name in the code or in the properties tab of the graphic designer.

Testing

Before you can test you apps, you’ll have to enable the developer mode in your Windows 10 settings, just like you would with an android device if you want to install non-store apps:

Other than that there is actually not a lot you can do wrong. Just hit the green ‘play-button’ on the top of Visual Studio and your app will start. You should see something like this:

Extending the example

Right now we haven’t written any code and our app doesn’t do a whole lot. So how about we write a simple app. Nothing too fancy.

Our new app will just contain a TextBox and a Button for user input and a TextBlock for output. This should give you an overview on how to design complex apps yourself later.

First add a TextBox and a Button just like you did with the TextBlock earlier. Give all these element good memorable names. Your design should look like this afterwards:

If you start your app now, you can notice, that all the elements are all around the screen and if you resize your app, none of the elements will follow the window’s borders. To change that, select an element and watch out for the little anchor symbols, that appear on each of the four sides of a window (see fig. 8).

These anchors will tell you, how your selected element will behave on a window resize. Look at the anchor at the top of the window in figure 8. It’s open. This means, that the element will not follow this edge if you resize the window this direction. The anchor on the bottom and the left and right hand side edges are closed. This means that the element will follow these borders of your window. In this example it means that the TextBox will always stay at the bottom and it will grow and shrink with the window.

Set all the other anchors of your elements, so that your output field stays on the top left, your input TextBox stays on the bottom and the Button in the bottom right corner!

Try experimenting with these anchors!

Adding functionality and event handling

Now finally we get to the coding part. First, we’ll add a click event handler to our Button. To do this, select you button and then in the properties tab, click this button:

This will reveal all the events you can assign to a Button. In our case we want to add a click event. So double click into the white field. In my case it already has something written in it. By doing so, you’ll be taken to the code editor where a new method has been generated for you. In here, we’ll write the code that’ll be executed whenever the Button is clicked.

Hint: You can also quickly add a click event to a button by simply double clicking it in the graphic XAML editor. However I wanted to show you, how to add other events as well!

You can see that your event handler was created in a file called ‘MainPage.xaml.cs’. This is the code file that holds the functionality for your design. The ‘MainPage.xaml’-file holds the layout information for your GUI.

So edit your event handler method to look like this:

private void setBtn_Click(object sender, RoutedEventArgs e)
{
    this.outputLabel.Text = this.inputTBox.Text;
}

Of course you might need to change the names according to what you named your elements.

So what is this app doing? Like I said above, it’s very basic. It just reads what a user has written in the TextBox and displays it above when the button is pressed:

Conclusion

Creating Windows 10 apps is as easy as baking a cake! The XAML designer is really easy to understand and coding in C# is relatively easy, if you are used to work with Java. Underneath I linked a video that shows you, how to work with the XAML designer, if you want to know more about this topic.

Further readings

A more compact article about this topic – MSDN
XAML Editor explanation video – Channel9