We are proud to announce the first publicly available BETA release of the world’s first commercial toolkit for Windows 8 Metro applications – our RadControls for Metro suite. We have worked hard during the past few months in order to prepare first-class components, designed and built from the ground-up for the Microsoft’s new platform for building immersive applications – the Windows Runtime. As with every Telerik product line, we have also prepared a complete application (QSF – Quick Start Framework) that demos various aspects of our controls and may be used as an entry point for getting familiar with the controls. In this post I will show you different aspects of the application and how to get the maximum out of it. Besides demoing the components themselves, the application also implements various Windows 8 specific features like Search contracts, Share contracts, different layout views, etc. which adds additional know-how value and will hopefully help you build your applications faster.

Navigation within the QSF

The Home Screen of the QSF

When initially launched, the application looks like the above screen. You have two groups of tiles – the first one being the “Featured Controls” – these are the controls that we would like to highlight, and the second one containing tiles for each control, available in the suite. When a tile is “Tapped”, the application will navigate you to another page that contains a FlipView control with all the examples for all controls available in it.

The Examples View Screen of the QSF with the “FirstLook” example loaded

As this is a FlipView, you can navigate to the next/previous example using either a Flick Gesture if the device is Touch-enabled, or the FlipView’s navigation arrows that appear when the pointer enters the example. In case you want to navigate to a particular example, then you can do a “Semantic Zoom” and to navigate to the following screen:

The Semantic Zoom level of the Examples View of the QSF

A Semantic Zoom is performed by a Pinch Gesture for Touch-enabled devices and by a Ctrl + Mouse Wheel for other devices.
Additionally, you have complete search support integrated within the application. Pressing the system-wide shortcut Windows Button + Q will open the Search Charm within the application that seamlessly allows you to type a keyword to search for a particular example:

The Search charm displayed within the QSF. Typing “Bar” will find the “Bar Series” Chart example

And finally, the Back Arrow Button on the top-left will navigate you back to the Home Screen.

Additional QSF functionality

Along with the navigation capabilities, the QSF has a bunch of other very useful functionalities:

Code Viewer:

If your device supports orientation change and you put in Portrait mode, then the example screen is vertically split in two parts – the top one showing the example while the bottom one showing a code viewer that allows you to immediately see the code that builds the example within the example’s context. We believe that this feature will additionally help you to explore our components and to dive into their features with least hassle:

Examples View in portrait mode with the Code Viewer displayed

Additionally, you can display the Code Viewer in Landscape Mode from the Application Bar, by toggling the “View Code” button on the right:

Opening the App Bar and toggling the “View Code” button will display the Code Viewer in Landscape Mode

You can also deploy the application to the Simulator and use its Orientation capabilities to experiment with the viewer.

Favourites

Another useful feature of the QSF is the so called “Favourites” – that is a functionality that allows you to mark a particular example as a “Favourite” one. This can be done from the Application Bar by toggling the “Favourites” button:

Marking the “Time Picker” example as “Favourite”

Once an example is marked as “Favourite”, it will appear on the Home Screen of the QSF and will allow you to quickly navigate to it the next time you start the application:

The “Favourite Examples” displayed on the Home Screen of the QSF

Well, that’s most of the functionality of the application summarized. The good news is that the same application is available both for the XAML and the HTML part of the suite, so you can choose your preferred technology and get started with the controls with the same learning curve. Do not hesitate to grab your copy of the BETA today and give it a try. We would love to hear back from you about the suite and what your first impression is. As this is a fresh new product, we do hope to have your suggestions for HTML or for XAML on future controls and improvements over existing ones – it is your feedback that will help us build a better set of components!