Windows 8 Development #1: Getting Started with Windows 8

Windows 8 has gone RTM. Windows Store and Windows 8 give developers great opportunities to build apps, be first in the marketplace and earn money.

This post will help you get started with Windows 8 development using C# and XAML, and Visual Studio 2012 as the development environment.

Getting the tools

1) Install Windows 8
You can get Windows 8 from your MSDN Subscription, or download the release preview.

2) Install Visual Studio 2012
You can get Visual Studio 2012 from your MSDN Subscription, or download it here. It can be any version, from Visual Studio 2012 Express to Visual Studio 2012 Ultimate.

 

Creating your first application

1) Create the project
The first thing we will do is to create the project. This means using Visual Studio to create a basic blank app which contains the minimal logic to make it run.

If you haven’t done so, fire up Visual Studio 2012.

When you load Visual Studio for the first time you can select what language you will be using the most. I usually code in C++ so that was my choice, but your choise might be C# (for this tutorial) or any other language. This can be changed later.

When Visual Studio has loaded, you will see the Visual Studio Start Screen (your colors might be different. I use the Dark Theme).

From here you can either load existing projects or create new ones. Click New Project.

Now you can choose what programming language you want to create your app with. Press the triangle/arrow in front of Visual C#. This will show all the categories containing project templates. If you just press Visual C#, you will get a view that contains all the C# project templates in the same list.

Now, choose the Windows Store template category.

And in the final list of project templates, select a Blank App (XAML).

Give it a name like “HelloWorldApp” and hit [OK].

This will make Visual Studio generate a blank C# XAML app that only contains what’s nessesary to run it. Let’s try!

To run the app, click the Run symbol on your tools panel (the green Play-button with the text “Local Machine” behind it), highlighted below.

The app will build. Once the app is built, Visual Studio will run the app. You will see your apps splash screen followed by a empty dark gray screen.

Note, the splash screen is displayed a few seconds.

Now, to close the app you can either ALT-Tab back to Visual Studio and press “Stop”, or using your thumb (if you are on a touch-device) or click and hold the left mouse button on the top of the screen, and drag it down to the bottom.

Congratulations! You just had your first Windows 8 app running! It was not very interesting, but it’s still running fine.

Now, let’s try to simulate this app on a tablet. Press the drop-down menu on the Run section and select Simulator.

Run the app.
This will launch a tablet simulator that connects to your desktop with a Remote Desktop Connection, and the app will start.

Next, we will give the app some functionality.

2) Make the User Interface

When the project was created, a number of files were generated.

The first line is the Solution. A solution can contain multiple projects. In a game you might have one project for the Windows Phone version, one for the Windows 8 version and a Level Editor, all in one solution.

Next is the project. In this case, it’s the project for “HelloWorldApp”. One project usually generates an EXE file, a DLL, a service, cloud and so on.

Next we have the content of the app. That is properties, references (references to libraries), Assets (images, data..), Common (common code, style), and then App.xaml (with a code behind file) that can contain global styles, settings, data, variables and so on, a key, MainPage.xaml (with a code behind file) that contains the current app logic. This is the page that is rendered after the app has loaded, and last an app mainfest file.

Double click the MainPage.xaml file. This will load the page in to the built-in designer for Visual Studio.

Here, you see two views. One is the design-view, where you can see how the app looks like. Here you can select controls and make modifications. You also see the code-view, where you can write markup code that defines the UI.

Logic will be made in the code-behind file.

Let’s try to add a label, a textbox and a button. First, find the Toolbox and make it visible. I pinned it during the design-phase of the project.

From here, drag a TextBlock, a TextBox and a Button from the selection and in to the design-view.

It doesn’t matter where you place the items, just get them out in the field

Now, press the TextBlock and open the properties pane (found where you found the Toolbox pane).

Change the Text (under Common) to “Hello World”, and then open the Text tab and change the font size to 48.

Do some modifications to the other controls as well, and try to get a design that looks a bit like this:

3) Adding functionality

This is where we bind everything togehter by writing some C#.

What we want to make is that whatever you type in the TextBox will be displayed in the TextBlock above (where Hello World! is written) when the user clicks the button.

To do this, we need to give all the controls a name, and create an event that fires when the user clicks on the button.

Click on the control in design-view and check the properties-panel.

Change the Name from <No Name> to HeaderTextBlock, the textbox to WriteHereTextBox and the Button to ClickMeButton.

Once this is done, double-click the button. This will autogenerate a click event for the button and take you to the Code Behind for MainPage, the MainPage.cs file.

The fuction you see is the function that will fire when the user clicks on the button.

Now, write the following line of code in the function:
HeaderTextBlock.Text = WriteHereTextBox.Text;

The final function will look like this:

This will take the Text that exist in the HeaderTextBlock control and replace it with the content of the WriteHereTextBox text.

Now, run the app again (either on your local system, or using the simulator). The UX will be presented. Try typing some text in to the textbox and click the button.

If it works, the text you worte should be replicated in the header.

Thats it!

I know this wasn’t much, but it’s a good start and you got the tools you need to create apps.

Thanks for reading!