Creating My First Windows Metro-style App

 

I’ve blogged last month on how to get started on building metro-style applications. Since then, I’ve been trying out the sample projects made by the Windows team to help developers be up to speed with Metro-style application development. The official Sample Pack is 306.4MB in size as of this writing. You can even vote a sample request that you would like the Windows team to add in the samples pack – Metro style apps Requests for Samples. The latest completed request is a sample USB Barcode Scanner, nice!

Blog Reader App

After checking on the samples and creating sample projects, I decided to create a basic application with Metro-style. I do not need to look far since one of the article is on how to create a basic Blog Reader. That will be a great app to start with especially if there is a step-by-step guide available ๐Ÿ™‚

Basic Layout

This application sample lets you create the layout using the Metro style Blank Application template first. Using XAML, the layout will be created by manually adding a Grid, ListView and a Webview for the HTML content. Creating the layout in XAML is very similar to creating UI in Silverlight and other projects you created using WPF with XAML.

Blog reader app not using the template

Blank Template Xaml Project

Data Binding

Windows.Web.Syndication

Next we need go to get the data like thd Title, Author, Date of Post and the article from the blog. This data is available through RSS or Atom feed. These feeds will be taken care of by the SyndicationClient class so we do not have to worry about converting the feed or the data to XML.

SyndicationClient client = new SyndicationClient();SyndicationFeed feed = await client.RetrieveFeedAsync(feedUri);

Note that the Windows.Web.Syndication is new in WinRT. The .Net version of this library is the System.ServiceModel.Syndication. Shawn Wildermuth experienced a problem about images being stripped out when using the Web.Syndication namespace. Not the same case with this sample app though. Shawn mentioned from his tweet that this may not be true for all feeds.

Async and Await

Since we are using the SyndicationClient class, we need to implement an asynchronous process to retrieve the feeds. The async and await will help us implement asynchronous calls in WinRT.

public async Task GetFeedsAsync(){    
Task feed1 = GetFeedAsync("http://windowsteamblog.com/windows/b/developers/atom.aspx");    ...    
this.Feeds.Add(await feed1);    ...}

Notice in the code above, the async keyword is added in the method signature. This is required for us to use await keyword. The await keyword makes our application responsive while the application waits for the result of the call to retrieve the feeds. Simple implementation of an asynchronous operation, nice!


Using the Templates

In Visual Studio 11, you have the option use the Metro style templates like the Split Application and the Grid Application template. Using these templates can save you the time to layout your view just like in this case where we can use Split Page template to show the main blog list on the left and then at the side show the posts made on that blog.

Split view blog reader

 

Other sections described by the blog reader sample application are adding an app bar for your application options and the Storyboard where you can define the layout transitions e.g full screen, snapped.

I’m happy to be able to create this sample app and be able to look deeper into Metro style development. More metro style apps in my future posts!

Reference Links:

Windows 8 Consumer Preview Metro style app samples – C#, VB.NET, C++, JavaScript

Github Repo on Actual Source Code of this project

 

Build Metro-style Applications – Where to Start?

Build Metro-style Applications – Where to start?

ComeAndGetIt

Microsoft created WinRT(Windows RunTime) API and this will be built-in to the Windows 8 system. Although Windows 8 can still run the Win32 applications we use now, I’d like to believe that majority of the applications will switch to Metro-style soon. If Windows 8 is released today I would use it and I would not want to go back to Win32 setting. There is a big difference on how things work and flow in Windows 8.

Here are some points on how to get your hands on developing Metro-style apps.

Tools you need:

You need Windows 8 Consumer Preview and the Visual Studio 11 Beta to work on developing Metro-style applications. My previous post on Windows 8 installation options can (I hope) help you with setting up your Windows 8 Consumer Preview.

If you think Windows 8 Consumer Preview is not worth your time, you can still take a look and develop Metro-style applications by downloading the Windows 8 SDK and the Microsoft Visual Studio 11 Express Beta. The VS express is free version of Visual Studio created by Microsoft.

The main website for information about developing Metro-style applications is in this website – http://msdn.microsoft.com/en-us/windows/apps

C# Roadmap

Building Metro-style applications does not require that the developer should use C#. In fact, Microsoft made the WinRT API to be compatible with HTML/CSS/Javascript and DirectX/C++. The diagram below was discussed during Build conference last year and I think it would best describe the WinRT compatibility with non-C# development languages.

WinRTApi
WinRT API

I know HTML/CSS/Javascript but I will go with the C# route this time since I almost always use the language on our projects. With using C#, you also need to know about XAML. If you know Silverlight and WPF (Windows Presentation Foundation), the approach is very very similar. You already have the advantage on skills on how everything work on XAML and WPF so less learning curve.

File-New Project-Metro-style

Like other project types, you can create and run a Metro-style application in a few clicks in Visual Studio. File-New Project-Metro-style will show you Metro-style templates you can use with your application.

MetroStyle VS11 NewProject
Visual Studio 11 – Metro Style Templates

You can also check the sample applications (Download Sample Pack) which is available for download. I really like the sample applications since they show the basic features you need to know on developing Metro-style applications and then point you to the exact feature and xaml file involved in the example.

Metro style apps sample gallery
Sample apps gallery

Code52

The Code52 group created the My Finances WinRT Sample Application project and the WPF Metro-Style Scan Application project so developers can contribute and be involved with WinRT and Metro-style application developments. It is recommended to be involved with open-source developments to share and contribute in some way to an ongoing project. Code52 creates a new project every week so the project does not get very complicated for others to be involved and new ideas are fresh every week.

Code52 Projects List
Code52 Project

I believe Windows 8 applications are needed to be developed now and be ready once the Windows 8 is released this year. This is a great time and opportunity for developers to learn and be involved with Metro-style application development. Got it?

by

Windows 8 Consumer Preview Installation Options

windows 8 consumer preview beta fish

Windows 8 Consumer Preview Installation Options

I’m sure you have seen Windows 8 Consumer Preview installed to a virtual machine or an actual machine or slate(Tablet). I was able to install and try the Windows 8 Consumer preview myself and I was really surprised how smooth and responsive the system is. Kudos to the Windows team of Microsoft, this is far from the Windows 8 Developers Preview I’ve tried last year.

Curious enough? Install Windows 8 Consumer Preview with the options below and try it for yourself.

First, the Windows 8 Consumer Preview download sources:

(a) MSDN Subscriptionhttp://msdn.microsoft.com
I got my installer from MSDN download since we have volume license and the source server is different from public so downloading is faster ๐Ÿ˜‰

Msdn windows 8 consumer preview links

I’m not sure what “with Apps” means but yes this is the installer you want to download.

(b) Download from Microsoft.comhttp://windows.microsoft.com/en-us/windows-8/download
This is where Microsoft published the public download location of Windows 8 Consumer preview. 1 million downloads for the first few hours of release according to Microsoft.

Add “iso” to get the ISO version of the installer – http://windows.microsoft.com/en-us/windows-8/download/iso

Target environments: Where can it run?

Boot from VHD – I have not tried this before I came across the post of Scott Hanselman on Windows 8 Boot from VHD post. Boot from VHD is only available if you have Windows 7 Enterprise and up version of Windows 7. Also take note that you cannot boot from a VHD hosted in a BitLocker enabled partition. It will not work either if you Suspend the BitLocker. Only way is decrypt the drive or use a different hard drive or partition without BitLocker.

Another approach to boot Windows 8 from VHD is to use the Windows Automated Installation Kit for Windows 7. Eric Boyd has posted the detailed instructions on how to do this on his website – How To Install Windows 8 with Native Boot to VHD.

Both approaches will make use of BCDEDIT and DISKPART commands which is fun!

Parallels Desktop as Virtual Machine – I have version 7 of Parallels for Mac to run my virtual machines. Installation using Parallels is as smooth as if you install directly to a physical machine though I would still prefer to have the boot from VHD option since its using the actual hardware and only the hard drive is virtualized.

Windows 8 Consumer Preview desktop

All of my Windows VM machines works flawlessly with Parallels. I got more VMs installed as you can see ๐Ÿ™‚

Windows 8 Consumer Preview Parallels virtual machine list

Windows Virtual PC – Using a Windows Virtual PC is the common approach if you want to install a Windows virtual machine. But it seems Windows Virtual PC is NOT ready yet for Windows 8 (I’ve tried both 32-bit and 64-bit). I got a boot error from Windows 8 Consumer Preview 64-bit installation and an unhappy face for Windows 8 32-bit version.

Windows 8 Consumer Preview 64bit on VirtualPC

Error on 64 bit

Windows 8 Consumer Preview 32Bit on Virtual PC

Error on 32 bit

I was not expecting not to be able to run Windows 8 with Windows Virtual PC. I may need to install an updated version of virtual PC or allocate more memory perhaps? I will just use the boot from VHD approach or the Parallels for now, not a problem! ๐Ÿ™‚

I’m excited to see the final release of Windows 8 soon! Metro-style user interface is really nice and it goes well with other Microsoft systems particularly the Windows Phone 7. These early releases and previews will give developers more time to create applications that will adopt the new system and address the bugs.

Everyone can participate in reporting a bug in the Windows 8 forum – http://answers.microsoft.com/en-us/windows/forum/windows_8. Make your bug count!

by