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.
Before getting started, you will need to download and install the following items:
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.
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.
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.
Jesse Liberty has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and has been a Distinguished Software Engineer for AT&T and a VP for Information Services for Citibank and a Software Architect for PBS. You can read more on his personal blog or follow him on twitter