Windows 8 Hello World

I’ve just installed the beta version of Windows 8 to know how it looks before the official release. There are many differences and I’m not accustomed with many of them yet, but I’m sure that much will be changed until the final version, so I’ll not complain.
The most evident change is the new Start Menu button and consequent behavior. There is no that start menu with applications and settings which we can see in Windows 7 now, instead of that it displays this list of large rectangular icons similar to Windows Phone 7:

If you want to return to the habitual desktop, you can either select the Desktop tile among other tiles or use the key combination Alt+Tab.
Here in this post I’ll describe how to create a simple application for new start screen using new Visual Studio 11. The final result consist of one string and looks so:

The full sequence of actions I’ll describe inside the post.

To develop these kinds of applications, you should use Visual Studio 11 which is built in Windows 8 Developer Preview. The new version of IDE looks somehow different but not a much:

Choose the File menu item and then Add New Project. You will see the New Project window with several pre-installed templates for Metro-style applications:

To create a metro-style application you can choose any of these 3 similar templates:
Application – creates an empty application with 1 page, 4 images and 1 manifest, useful for majority of applications.
Grid Application and Split Application – creates a ready for use application with sample data. I would say that these templates are just for demonstration purposes and it most likely that they will be removed in the release version. Anyway I’ll describe these templates some day in next posts.
Now select the Application new project template. Visual Studio will create a project like this:

I’ve noticed that performance of the XAML designer is increased: now it is loaded in the background and the loading doesn’t freeze UI, which makes me happy.
In addition to the improved designer you can notice the new Solution Explorer window: now it displays all of the members of a class if to expand its code file:

Fine, let’s write some code. Add the following line inside the root Grid of the MainPage.xaml file:

<TextBlock Text="{Binding HelloWorldMessage}" FontSize="64" HorizontalAlignment="Center" VerticalAlignment="Center" /> 

And the following code after the InitializeComponents() method in the constructor of the MainPage class:

this.DataContext = new { HelloWorldMessage = "Hello World!" };

Then press the combobox near the green triangular Run button and select the Simulator option. You can use the default Local Machine option and run your application in full screen mode on your desktop, but I prefer to use an emulator because it doesn’t hide all the screen and it is more flexible because you can rotate it and watch how the application reacts to rotations.

And that’s all. The result you can see at the beginning of the post. Next time I will start to describe differences between the XAML which we use in WPF and Silverlight and the XAML of Windows 8.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: