Traditionally, we, developers on Microsoft platform are Windows Developers. We’ve built apps like Notepad, WordPad, ERP solutions, LOB Solutions and what not. But all these apps, at the end of the day were ‘Windows Apps’. We used technologies like WinForms, WPF, MFC, etc… to create these apps. Every such app will have a ‘Window’ with a title bar, minimize/maximize/close buttons, hosting other few controls like buttons, text boxes, check boxes, menus, grids or may be report viewers, etc. Internally, we may be using technologies like Visual Basic, Visual C++ (MFC), .NET, Win32 APIs; but the UI resembled something like any traditional ‘Windows App’. This approach is going to change a little bit with Metro (or should I call it Windows 8 Style App) apps. You still have an option to build desktop apps, like we used to build prior to Windows 8. But these apps will only run on x86 or x64 based Windows 8 machines, like laptops or desktops. To create apps, which will run on Windows 8 (ARM based) tablets and eventually on x86/x64 desktops/laptops, with Windows 8 App Style UI, you need to create Metro Apps. These apps will utilize ‘subset’ of .NET and WinRT APIs to execute. In this post, we’re going to build a ‘Hello Metro’ app and get a ‘high level overview’ of how we can create a Metro style app. In subsequent posts, we’ll dive deeper into this topic and write some code for it.
Creating A Metro Style App:
In my previous post, we’ve seen some of the Metro FAQs. Let’s continue on it. I believe you’ve installed Windows 8 with Visual Studio 2012 (here after called VS) and ready to build Metro Apps.
When you start VS, you can create File > New > Project and you’ll get following Window
Here, you can create a
- Blank App (XAML), which will have just a Page (Window in old terms), which you can customize.
- Grid App is used to create apps which will have collections to show, for example Pictures Library, Movies Library, etc… You can group these collections and navigate between these groups and also create a Master-Details kind of application.
In this case, a basic layout/design will be provided to you. You just need to fetch the data and bind to this layout. - Split App is like Grid App however, on the same page you can show more data ‘alongside’ about a particular item. Here also, basic layout/design will be provided to you.
- A class library project is basically a ‘dynamic link library’ project, which gives you a dll file after compilation and this file can be reused across multiple projects. However, this library can be consumed in C# or VB style Apps.
- Windows Runtime Component is again a library project, but this library can be used in any language including JavaScript. (This project template is not available for JavaScript language)
- A Unit Test Library project will give you a project to write test cases against your Metro style app. Using this project you can test your Apps functionality.
Along with it, if you select C++ as a language for building Metro App, you can build games using Direct2D and Direct3D APIs.
When you select any project template, you’ll finally land-up on a screen looking something like this
Providing App Information:
Now, as a .NET developer we know when we create any Windows App (or library), we use AppManifest.xml file to provide details about our project. In case of Metro App (or Windows Phone Apps as well using WMAppManifest.xml file) along with AppManifest, you’ve another file package.appmanifest.xml, which will provide information about your package to Windows Store users (like capabilities) as well as logos and orientation of your app. Don’t worry, you don’t need to go into XML part of it as it has a nice UI which can generate XML for you and it resembles with the one shown below.
Writing Code For The App:
Now just drag and drop a button control from toolbox onto the page. So, it will look more like the screen shown below.
Now just double click this button control and inside the auto-generated event handler write following code:
Yes!. There is no direct MessageBox.Show() functionality. Welcome to .NET 4.5, where everything is Async, even the MessageDialog. This is a new approach to show Messages. We’ll get to know more of such APIs in posts following this one.
Debug Metro Apps
Once your app is ready you can debug it using various options. You can test it on local machine (having Windows 8 Development Environment), on Windows 8 Simulator or using Remote Machine connected to your development environment (just like Windows Phone development).
Here, select simulator and hit F5 or run the project. Wait for a while to boot the simulator and launch your app automatically (basically VS will launch it for you). Once, you get a simulator with your app launched. Click on a button and you’ll see following UI.
Now you can see, this is really a ‘Metro App’. This is not a Windows App, as there is no Window (chrome) in it. There is no minimize/maximize/close button or title bar. Your Metro app always runs in Fullscreen mode (or in Snapped View). So, as Metro says – content before chrome is here :)
Building for ARM Tablets:
As I mentioned above, traditionally we built Windows Apps for x86/x84/Itanium processor. Windows 8 tablet is going to have ARM processor in it. Windows Embedded or mobile developers will be familier to this processor architecture. To build our app for ARM, click on Build > Configuration Manager and select your ‘poison’ or processor :)
But one thing to remember here is: if you select ARM as platform and debug your app on local machine (with x86/x84 architecture), debug is going to fail with following error:
In this case, to test for ARM, you’ll need a test tablet connected to your machine and you can select ‘Remote Machine’ debug option. However, Apps built with ARM platform will run only on Windows 8 RT tablets (ARM based). These apps will NOT run on desktops. You may want to select ARM only if you’re targeting tablets and want to gain maximum performance on it. You can get more information about Windows 8 ARM development here:
Eventually, you can use ILDASM.exe to get deeper into the app.
This is it. In this post we saw basics of ‘Hello Metro’ app. In next blog we’ll see some new APIs and something new related to Metro. Let me know if you want anything more to be covered.
Till then, enjoy.
Namaste
Mayur Tendulkar | www.mayurtendulkar.com
tendulkar-uvāca 