Windows 8 Development Tutorial – Part 1 – First Steps

March 3, 2012

imageNow that both Windows 8 Consumer Preview and Visual Studio 11 Beta have been released, it’s a fantastic time posting about Windows 8 programming, especially about the new Metro style based applications.

For the sake of rapid-start, I’ll save the writing about what Metro Style application is, but I’ll give you a link in case that you’ve missed that:

http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx

 

Installing Windows 8 Customer Preview

Before we begin, I highly recommend you to install Windows 8 and learn about the new Metro UI language, since it’s totally different than what we are used to in current versions of windows.

Lets create a clean install of the Windows 8 Consumer on our Tablet, Laptop or Desktop PC, then we will install Visual Studio 11 Beta.

If you already have Windows 8 installed, skip this section.

There are several ways installing Windows 8 on our machine, and I think that the easiest and fastest is using a USB stick.

1. First go and download the full Windows 8 Consumer Preview ISO file from Microsoft.

2. Get a USB stick big enough to contain the 3.3GB (x64) or 2.5GB (x86) ISO file and use the Windows 7 USB/DVD download tool to make your USB stick bootable with Windows 8 installation.

3. Create a bootable USB device using the tool and the Windows 8 ISO file.

SNAGHTML11635830SNAGHTML11649defSNAGHTML1164afa2SNAGHTML1164bbe7

4. Now that you have a bootable USB stick you can use it to create a clean installation of Windows 8 on your machine. Just plug the USB stick in the target machine, and boot from it. You can also run setup or use automatic startup if you already have Windows 7 or Windows 8 Preview installed on the target machine.

    HINT: If you have the Windows 8 Samsung Tablet handed for free in the last Microsoft’s Build conference, you can boot from the USB stick by Holding the Window button while powering it on. A blue screen with three options should appear. Tap on Troubleshoot, and then tap on Reset your PC.

5. Booting from the USB stick or running the setup file directly from Windows, the installation process is very simple. Note that you may need to enter the following public product key: NF32V-Q9P3W-7DR7Y-JGWRW-JFCK8.

6. The installation process may take a while and you may notice your device restarting at least one time before done. So seat back and continue reading this post… After few minutes, Windows 8 Installed! I’ve Signed-in with my Live account, and also installed some free-apps from the Windows Store, including Cut-the-Rope famous game.

imageimageimageimageimageimageSNAGHTML1ad555aeimage

This new Beta is equipped with many Built-in apps, such as People, Mail, Calendar, Camera, SkyDrive, Video, Xbox LIVE Games, Maps, and more.

In case you’ve installed Windows 8 on existing Windows, don’t forget to remove the remaining old Windows  version, setup files, follows this link:

http://windows.microsoft.com/en-US/windows7/How-do-I-remove-the-Windows-old-folder

image

 

Installing Visual Studio 11 Beta

Ok, Now that you have a Windows 8 machine running, and of course, played a bit with the awesome Metro style UI, lets install Visual Studio 11 Beta. We will use it for developing our Windows 8 Metro style applications. Note that you can install it on a different machine and test the applications you developed on the Emulator or on the Windows 8 machine, connecting remotely. Personally, I prefer installing it on my Samsung i5 Slate device.

1. Download Visual Studio 11 Beta from here:http://www.microsoft.com/visualstudio/11/en-us.

    NOTE: I recommend downloading the ISO file.

image

2. Copy the ISO file you’ve just downloaded to a USB stick, or directly to a drive in your development Machine.

    HINT: Windows 8 has a new feature for mounting an ISO file as a Virtual Drive. I will use this feature to install Visual Studio 11 Beta directly from the ISO file. You can burn the ISO file on a DVD, extract it to USB disk or use a virtual DVD drive application such as Daemon tools lite.

3. In case of Windows 8, go to Desktop mode (click on Desktop tile from the start screen), open the ISO file location, right click on it, then choose Mount. Then run the setup file.

imageimageimageimage

4. After installing Visual Studio 11 Beta, it will be automatically starting, and you would have have to choose a proffered development settings. I’ve chosen C#. This will arrange the templates so C# development comes first, and the rest after.

imageimage

 

Windows Runtime

One moment before diving into code, lets describe what is Windows Runtime, or WinRT:

“The Windows Runtime is designed to make it easy for you to create apps using the technologies that you know. You can write apps that are tailored to every hardware form factor. Your Metro style apps participate in the breadth and diversity of the Windows ecosystem. They’re optimized for touch, aware of the user’s location and identity, and hosted in the Windows Store. Metro style apps are always on and available for instant use, and always connected with the latest content from the web. Users can discover and purchase your apps in the Windows Store, and they can be confident that apps install quickly and uninstall cleanly.”

In other words, WinRT provides common runtime and type system for creating Metro style applications. It also provides set of classes and APIs which are common to several technologies such as C#/XAML, C++/XAML, JavaScript/HTML5. WinRT is based on native code, exposing its types using Meta Data, very similar to .NET, provides you an option to create a Metro style application using the technology you like, and share components between these technologies. Comparing to .NET Framework, WinRT is not limited only to .NET languages, it’s common to Managed, Native C++ and JavaScript.

Windows Runtime

 

First Metro Style Application

Now that you have Visual Studio 11 Beta installed, you may want to create your first “Hello World” Windows 8 Metro style application.

1. On the menu, choose File –> New –> Project.

2. On the left, pick Windows Metro style, then select Blank Application. I’ll demonstrates other templates on my next posts of this series.

3. In the “Name” field, select a name for the new project – “HelloWorldUI”, also for the solution name “HelloWorld”, and then click OK.

    NOTE: Clicking OK you be asked to have a Developer License. Just stay connected and provide you Live ID when asked.

As you can see, there’s a solution called HelloWorld and one project called HelloWorldUI on the right side of the screen. The project has one empty page called BlankPage.xaml. Expanding this file by clicking the arrow on the left, reveals additional file called BlankPage.cs.xaml.

Typically, a Metro style application contains at least one page. This page is the UI container of the Metro style application. The .xaml file is an XML file which defines the structure of the UI declaratively using an XML language called XAML. If you’re familiar with other XAML based UI technologies, such as WPF, Silverlight and Silverlight for WP7, you may be familiar with XAML for Metro style applications since it’s same concept.

The XAML file is used for describing the UI declaratively with UI elements such as Buttons, Lists, Layout panels and so on, where the CS file is used for specifying the logic behind the XAML.

NOTE: In case that you’re familiar with WEB programming, you can create a JavaScript Metro style based application, using HTML5 instead of XAML for the UI, and JavaScript instead of C# for code behind.

4. Open the Metro UI designer by double clicking on the BlankPage.xaml file. On the top half of the screen you may see the Designer, and on the bottom you may see the XAML editor.

Looking inside the XAML markup, you may see that it comprises root element named Page and few xmlns namespaces, and one child element named Grid. Running the application, a Page and Grid instances will be created and initialized. The XAML actually describes the Visual tree of WinRT objects should be created when running the application.

NOTE: WinRT stands for Windows Runtime, and it’s a native, common framework, providing common type system for all metro style based technologies and languages, such as C#, C++ and JavaScript.

5. On the left, click on the TOOLBOX pane. The toolbox contains the UI element you can drop into a page.

6. Select Button and drag it into the UI designer. Inside the designer, you can choose the button, drag it and change the size of it a bit.

7. Selecting the button, you may see its properties on the right pane, find the Content property and change its value to Hello!

image

8. Double click on the Button. This will register the button’s Click event, and automatically open the C# editor. This is a good place to display the Hello World message.

9. Add the following code to the event handler created:

   1: var dialog = new MessageDialog("Hellow World!");

   2: await dialog.ShowAsync();

Also add the C# 4.5 new keyword called ‘async’ to the event handler method, since from now on, everything in a Metro style application is Asynchronous (ShowAsync).

   1: private async void Button_Click_1(object sender, RoutedEventArgs e)

   2: {

   3:     var dialog = new MessageDialog("Hellow World!");

   4:     await dialog.ShowAsync();

   5: }

10. Run the application you’ve created by clicking F% in Visual Studio.

NOTE: If you’re not running VS on Windows 8, we may choose to run your application on the Windows 8 Simulator installed as part of the Visual Studio 11. To run on the Simulator, replace “Local Machine” on the toolbar to “Simulator”, then click F5. Now clicking on the Hello button you may see the Hello World message.

imageimage

Congra! Now that you have the pre-basics of developing a Windows 8 Metro style application, you can start playing with VS and Windows 8 to create basic apps.

 

I’ll finish here, but next time I’ll explain a bit more about the Metro style application and UI. Stay tuned.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

5 comments

  1. Simon (Darkside) JacksonMarch 5, 2012 ב 12:59

    You article suggests that you installed VS 11 ultimate on Windows 8 which according to the install docs this should not work (or at least isn’t supported)

    There is a separate express edition for vs 11 which is specifically for win 8

    If you are using ultimate have you run in to any issues so far with it’s use?

    Reply
  2. Tomer ShamamMarch 5, 2012 ב 13:15

    Hi Simon,
    All the screen shots I’ve sent are from my Samsung Tablet, running Windows 8 Consumer Preview and Visual Studio 11 Ultimate Beta.

    So far, everything is OK.

    Reply
  3. MANHARJune 12, 2012 ב 10:05

    HOW TO ADD OR EDIT TEXT IN TILES OF GRID TYPE APP

    Reply
  4. Tomer ShamamJuly 7, 2012 ב 12:53

    Hi Manhar,

    You can simply set the GridView.ItemTemplate property with a DataTemplate. Inside the DataTemplate create whatever you like, for example TextBlock. Then set the Text property of it, or Bind it to current item using Binding markup extension.

    Here’s a good example of usage (in the bottom):
    http://msdn.microsoft.com/library/windows/apps/BR242705

    Reply
  5. FulinNovember 5, 2012 ב 17:27

    Hi,

    I am doing some researches about the MicroSoft mobile (not windows mobile), like Windows Phone, Windows Surface tablet and other device with Windows8 (such as Samsung Tablet). It is possible to build an app and run on three of them ? I mean cross plat.
    Thanks very much

    Reply