Aug 292012
 
 August 29, 2012  Posted by at 9:58 am WinRT Tagged with: ,  Add comments

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”]

<Grid Style="{StaticResource LayoutRootStyle}" x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="120"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="50" Text="MIH!SP"/>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.30*"/>
<ColumnDefinition Width="0.10*"/>
<ColumnDefinition Width="0.60*"/>
</Grid.ColumnDefinitions>
<ListView Background="Olive"></ListView>
<Button Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top" Background="Purple" Margin="10">Our Button</Button>
<FlipView Background="DarkGreen" Grid.Column="2">
<FlipViewItem>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.8*"/>
<RowDefinition Height="0.2*"/>
</Grid.RowDefinitions>
<telerik:RadCartesianChart HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="Y"></telerik:CartesianChartGrid>
</telerik:RadCartesianChart.Grid>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis Minimum="1" LabelStyle="{StaticResource CaptionTextStyle}"/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis LabelStyle="{StaticResource CaptionTextStyle}"/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.Series>
<telerik:BarSeries ItemsSource="{Binding AllEntries}">
<telerik:BarSeries.ValueBinding>
<telerik:PropertyNameDataPointBinding PropertyName="NrOfEntries"/>
</telerik:BarSeries.ValueBinding>
<telerik:BarSeries.CategoryBinding>
<telerik:PropertyNameDataPointBinding PropertyName="Category"/>
</telerik:BarSeries.CategoryBinding>
</telerik:BarSeries>
</telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>
<Border Background="Orange" VerticalAlignment="Bottom" Grid.Row="1">
<TextBlock Text="Something about the statistics shown" Style="{StaticResource BodyTextStyle}" Padding="15,20"/>
</Border>
</Grid>
</FlipViewItem>
<FlipViewItem>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.8*"/>
<RowDefinition Height="0.2*"/>
</Grid.RowDefinitions>
<Border Background="Orange" VerticalAlignment="Bottom" Grid.Row="1">
<TextBlock Text="Second flipitem" Style="{StaticResource BodyTextStyle}" Padding="15,20"/>
</Border>
</Grid>
</FlipViewItem>
</FlipView>
</Grid>
</Grid>
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0"/>
</Page.BottomAppBar>
</Page>[/sourcecode]

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; }
}

  4 Responses to “WinRT app guide: Step 4: Adding RadControls for WinRT/Metro”

  1. 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?

  2. […] in sync. For example, shown below is the project structure for the MVVM Light Toolkit…”WinRT app guide: Step 4: Adding RadControls for WinRT/Metro (Iris Classon)“We have created the project and the basic UI, but something important is […]

  3. 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

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 6 + 13 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)