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
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.
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.
This will make Visual Studio generate a blank C# XAML app that only contains what’s nessesary to run it. Let’s try!
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.
Next, we will give the app some functionality.
2) Make the User Interface
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
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.
Now, write the following line of code in the function:
HeaderTextBlock.Text = WriteHereTextBox.Text;
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.
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!