From Soup To Nuts with RadControls for Metro (XAML)

In this second “From Soup To Nuts” post we’ll look at Windows 8 applications built using the C#/XAML RadControls for Windows 8. For information on using the HTML5/JS/CSS3 version, see Michael Crump’s blog post.

Setting up Your Development Environment

Before getting started, you will need to download and install the following items:

• The Windows 8 Release Preview can be downloaded from the Windows 8 Download Center.  MSDN subscribers can download the RTM (Release to Manufacturing) version from their accounts.  Either version will work with the RadControls.
• Visual Studio 2012 Release Candidate We’ll be using Visual Studio 2012 throughout this and future blog posts.  You can download VS2012 from Microsoft, and again, if you have MSDN you can download the RTM version
• The RadControls for Metro Beta. This is a set of components that Telerik built to enable developers to build Windows 8 applications faster and is the subject of this and the ensuing series of Blog posts.  It is why we are all here.

Install Process for RadControls for Windows 8

After you download the RadControls for Windows 8 Beta, double click on the installer and install RadControls for Windows 8 (Beta).  The Beta version of RadControls for Windows 8 will work with both the RC and the RTM version of Windows 8 and Visual Studio 2012.

Once the RadControls are installed, you are ready to begin working with them immediately.

Go to the Start menu and choose Desktop. You should see two new icons:

Double click on the XAML version and the QSF  will open in Visual Studio 2012. You’ll see the project listed in the solution explorer (probably in the upper right of Visual Studio).

Launch the application either to Local Machine, or if you prefer, using the Simulator. The RadControls For Metro QSF Splash Screen appears,

You can explore the sample applications by clicking each control.  You may also want to review the source code by flipping your device to portrait mode, or by opening the application bar (right click with the mouse or swipe up from the bottom with your finger). 

You can return to the demo at any time by going to the Start screen and touching (or clicking on) the demo.

For more details about the QSF please see this blog post.

Creating Your First Application

Now that you’ve seen some of what can be done with the RadControlsForMetro let’s take a brief  look at diving into writing code.  Create a new application and name it DeliveryDate.  This will simulate part of a consumer page where we’ll pick a delivery date for our product.

We start by adding a reference to the RadControls.  Right click on References,  choose Add Reference, and then put a check mark next to RadControlsForMetro.  That’s all it takes to add the assemblies.

A screenshot, demonstrating where exactly the RadControls for Metro reference is located would be nice, since there are 4 different tabs in the Add Reference dialog.

Add a using statement at the top of the XAML file,

xmlns:telerik="using:Telerik.UI.Xaml.Controls"

We’ll add a RadDatePicker to our XAML below a TextBlock, which will act as the prompt,

<Grid
    Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition
            Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <TextBlock
        FontSize="40"
        Text="Expected Delivery Date" />
    <telerik:RadDatePicker
        Grid.Row="1"
        Header="Select Requested Delivery Date"
        Name="xDeliveryDate"
        DisplayValueFormat="ddd, MMM dd, yyyy"
        ItemLength="99"
        Margin="0,10,0,20"
       />
</Grid>

Notice that the RadDatePicker has a Header property, so you may not want to use a label depending on your layout.  Run the application and the RadDatePIcker shows in its collapsed state,

Click on the RadDatePicker and it opens up a to a powerful and flexible date picker. You can spin through the dates; they are on an infinite loop, so as you go past the 31st of the month you return to the first,

Of course the initial date can be set, and the selected date can be bound to a property in any object, allowing you to build complex business applications easily and quickly.

Wrap Up

I hope at this point that you have RadControlsForMetro installed and ready to go. The QSF will give you a lot of information about building advanced, beautiful applications and Michael Crump and I will be creating a series of blog posts and videos to get you started with each of the controls.