When I first started developing for Windows 8 platform (XAML+C#) more than 2 months ago, I noticed that some of the controls that one would expect to see on a serious platform were missing. Mainly, I was missing charting controls and DatePicker control. I never expected the SDK to include charting controls, because I’ve never encountered those as a part of the official Microsoft SDKs, but controls such as a DatePicker should’ve been included for XAML developers, too (apparently, one is available for HTML devs). Luckily, I discovered Telerik Metro controls. Let’s see how to use the RadPieChart control and bind it to a ViewModel.
As I said, I first discovered Telerik controls while they were in the preview mode. Back then it was only available if you requested it via e-mail and waited a few days to be allowed in the program. Now they released the public beta with a much much better demo app and forum support. In the preview version, I had some trouble using the RadPieChart control to bind it to my ViewModel. The lack of documentation and initially support made it impossible to figure it out. Luckily, their forum is great so I got support after all, and now I’d like to share the solution with you.
Download the Telerik beta controls from their website:
http://www.telerik.com/products/windows-metro/overview.aspx
Install it, after which you’ll have the binaries available for your projects. Add the binaries to the project.
Let’s assume that you have a class that defines your model that implements INotifyPropertyChanged, called AssetData:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
public class AssetData : INotifyPropertyChanged { private double percent; public double Percent { get { return percent; } set { percent = value; this.OnPropertyChanged("Percent"); } } private string label; public string Label { get { return label; } set { label = value; this.OnPropertyChanged("Label"); } } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName) { if (this.PropertyChanged != null) { this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } } |
RadPieChart will show percentages of some titles/labels in a classic pie chart. If you don’t know what a pie chart is, read more about it here:
http://en.wikipedia.org/wiki/Pie_chart
Every part of the pie chart has a certain title (or a label). This explains the model, which consists of two properties: percentage and a label. To be able to bind it, a ViewModel needs to have an ObservableCollection of AssetData objects:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
public class MainViewmodel { public ChartPalette DefaultPalette { get { return ChartPalettes.DefaultLight; } } public ObservableCollection<AssetData> Data { get; private set; } public MainViewmodel() { Random r = new Random(); this.Data = new ObservableCollection<AssetData>(); this.Data.Add(new AssetData() { Percent = 50, Label = "First label" }); this.Data.Add(new AssetData() { Percent = 20, Label = "Second label" }); this.Data.Add(new AssetData() { Percent = 10, Label = "Third label" }); this.Data.Add(new AssetData() { Percent = 5, Label = "Fourth label" }); this.Data.Add(new AssetData() { Percent = 7, Label = "Fifth label" }); this.Data.Add(new AssetData() { Percent = 8, Label = "Sixth label" }); } } |
We will create some random values of percentages. The MainViewmodel needs to have the following headers included:
|
1 2 3 4 |
using System; using System.Collections.ObjectModel; using System.Linq; using Telerik.UI.Xaml.Controls; |
Next, open the MainPage.xaml page. Add the following namespace to the list of namespaces:
|
1 |
xmlns:telerik="using:Telerik.UI.Xaml.Controls" |
Add the ViewModel to the page resources:
|
1 2 3 |
<Page.Resources> <local:MainViewmodel x:Key="ViewModel"></local:MainViewmodel> </Page.Resources> |
Set the DataContext of the main grid:
|
1 2 3 4 |
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" DataContext="{StaticResource ViewModel}"> </Grid> |
Create the RadPieChart in markup inside the grid and set the default palette:
|
1 2 3 4 5 |
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" DataContext="{StaticResource ViewModel}"> <telerik:RadPieChart Palette="{Binding DefaultPalette}"> </telerik:RadPieChart> </Grid> |
DefaultPalette is set in the ViewModel to the DefaultLight palette already existing in the Telerik controls. There is also a palette called DefaultDark, or you can define your own palette. Add the PieSeries (series of pie char data elements) in markup, set the radius to some value (for example, 0.95), and bind ItemsSource to Data ObservableCollection
|
1 2 3 4 5 6 7 |
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" DataContext="{StaticResource ViewModel}"> <telerik:RadPieChart Palette="{Binding DefaultPalette}"> <telerik:PieSeries ItemsSource="{Binding Data}" RadiusFactor="0.95"> </telerik:PieSeries> </telerik:RadPieChart> </Grid> |
Now we need to set values and labels binding. First the values:
|
1 2 3 4 5 6 7 |
<telerik:RadPieChart Palette="{Binding DefaultPalette}"> <telerik:PieSeries ItemsSource="{Binding Data}" RadiusFactor="0.95"> <telerik:PieSeries.ValueBinding> <telerik:PropertyNameDataPointBinding PropertyName="Percent" /> </telerik:PieSeries.ValueBinding> </telerik:PieSeries> </telerik:RadPieChart> |
We bind value to Percentage properties of AssetData object. Now, add LabelDefinitions:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<telerik:PieSeries ItemsSource="{Binding Data}" RadiusFactor="0.95"> <telerik:PieSeries.ValueBinding> <telerik:PropertyNameDataPointBinding PropertyName="Percent" /> </telerik:PieSeries.ValueBinding> <telerik:PieSeries.LabelDefinitions> <telerik:ChartSeriesLabelDefinition Margin="-10"> <telerik:ChartSeriesLabelDefinition.Binding> <telerik:PropertyNameDataPointBinding PropertyName="Label" /> </telerik:ChartSeriesLabelDefinition.Binding> </telerik:ChartSeriesLabelDefinition> </telerik:PieSeries.LabelDefinitions> </telerik:PieSeries> |
Labels will bind to Label property of AssetData objects, and have a small margin set to stay separated from the pie chart.
Result?
A beautiful PieChart (a bit large, but you can modify RadiusFactor property to set it the way you want!)
Thanks Telerik for great support even for the preview version of controls!
One Comment