WinRT app guide: Step 4: Adding RadControls for WinRT/Metro

To read the other steps in the step by step guide for creating a Metr/ WInRT application go here

We have created the project and the basic UI, but something important is missing,- RadControls for WinRT/Metro ! We will be using the controls to achieve a consistent look and feel, and it will save us heaps of time so we can finish and publish the application in no time while adding some cool functionality that will separate the app from the other apps in the the store.

Adding RadControls for WinRT

1. Download the RadControls here

2. Follow the installation wizard

3. Right click on references on the project

4. Add RadControls

Go to Telerik and download the controls

Install

Select add reference

Select RadControls and proceed

Adding a simple barchart

Just demostrate how easy it is to get going we’ll add a simple barchart where the statistics for the application will go later. This is just an example, we will prettify it later and add the proper data. Once we get started with the statistics part for the application we will discuss the why and how a little more, but for now we’ll just add a chart quickly so you can see how easy it is.

1. Set the Datacontext for the page

2. Import the RadControls namespace

3. Create the chart and set the data source, as well as which data values we will be binding to

4. Add the data in the codebehind

Set the Datacontext

Add a namespace reference

The UI

[sourcecode language=“XML”]

The code behind

[sourcecode language=“csharp”]
using System.Collections.ObjectModel;
using Windows.UI.Xaml.Controls;

namespace Mihsp
{

public sealed partial class MainPage : Page  
{  
    public MainPage()  
    {  
        this.InitializeComponent();  

        \_allEntries = new ObservableCollection<TestData>()  
                          {  
                              new TestData {Category = "Cats", NrOfEntries = 4},  
                              new TestData {Category = "Dogs", NrOfEntries = 4},  
                              new TestData {Category = "Birds", NrOfEntries = 6},  
                              new TestData {Category = "Snakes", NrOfEntries = 2},  

                          };  
    }  

  private ObservableCollection<TestData> \_allEntries = new ObservableCollection<TestData>();  

    public ObservableCollection<TestData> AllEntries  
    {  
        get { return \_allEntries; }  
    }  

    public class TestData  
    {  
        public string Category { get; set; }  
        public int NrOfEntries { get; set; }  
    }  
}  

}
[/sourcecode]

Tada! The result! private ObservableCollection _allEntries = new ObservableCollection(); public ObservableCollection AllEntries { get { return _allEntries; } } public class TestData { public string Category { get; set; } public int NrOfEntries { get; set; } }

Comments

Leave a comment below, or by email.

Podster

8/29/2012 11:50:40 AM

Thank you for the tutorial...

Currently there are no controls provided by Microsoft for Date and Time Pickers in xaml & c#. is there any other solutions other then third party controls? 

Aymeric ROLAND

9/3/2012 5:36:11 AM

Reply to: Podster

According to this post http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/72928ae5-dbfa-4631-b7a6-32e40318ea93 there are no built-in Date/Time pickers for C# developers

Regards. 

Pavan

3/2/2017 12:28:36 AM

Hi,

I am using RadCartesianChart control on WinRT.

I wanted to know is their a limitation on the number of data points that can be plotted?

My req: Plot 4800000 (48 lakh) data points on this control.

Environment: WinRT, RAM:2GB 

Last modified on 2012-08-29