Now 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:
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.
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.
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:
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.
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.
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.
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.”
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.
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.
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!
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:
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).
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.
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.