×
Namespaces

Variants
Actions

Using Telerik RadCartesianChart to create a game scoreboard

From Nokia Developer Wiki
Jump to: navigation, search

This article shows how to use the Telerik RadCartesianChart to create a game scoreboard for a Windows Phone app.

Note.pngNote: Telerik RadControls are commercially licenced. You can evaluate them with the trial version from here

WP Metro Icon UI.png
WP Metro Icon Tools.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code Example
Source file: Telerik-RadCartesianChart-Samples (Github)
Tested with
SDK: Windows Phone 7.1 and 8.0 SDK
Devices(s): Nokia Lumia
CompatibilityArticle
Created: saramgsilva (04 Jun 2013)
Last edited: kiran10182 (09 Dec 2013)

Contents

Introduction

This article explains how to create a scoreboard for a game in which players try to catch as many blue, pink and yellow flowers as they can. The score board is created using RadCartesianChart, one of many useful Telerik RadControls for Windows Phone

Score Board

The article uses a Portable class Library (PCL) and the MVVM pattern. It consists of two parts/projects:

  1. Telerik.RadCartesianChartSample.Common : this is a portable class library that contains the model and view model. This project can be reused between Windows 8 and Windows Phone.
  2. Telerik.RadCartesianChartSample: this is the main project that represents the application.


Implementation

Telerik.RadCartesianChartSample.Common

In the Telerik.RadCartesianChartSample.Common project, create:

  • BoardItem : represents one item in the dashboard. This class has name, value and count (one board item is used for every flower in the game).
  • DashboardViewModel: this is the view model that connects the model to the view.


Note.pngNote: NotifyPropertyChanged only implements the NotifyPropertyChanged interface that is very useful for update the UI we is raised any notification

Below is the class diagram showing the relationship between the model and view model.

Class Diagram


The BoardItem class is:

 /// <summary>
/// The board item.
/// </summary>
public class BoardItem : NotifyPropertyChanged
{
/// <summary>
/// The name.
/// </summary>
private string _name;
 
/// <summary>
/// The value.
/// </summary>
private int _value;
 
/// <summary>
/// The count.
/// </summary>
private int _count;
 
/// <summary>
/// Gets or sets the name.
/// </summary>
public string Name
{
get { return _name; }
set
{
_name = value;
OnPropertyChanged("Name");
}
}
 
/// <summary>
/// Gets or sets the value.
/// </summary>
public int Value
{
get { return _value; }
set { _value = value; OnPropertyChanged("Value"); }
}
 
/// <summary>
/// Gets or sets the count.
/// </summary>
public int Count
{
get { return _count; }
set { _count = value; OnPropertyChanged("Count"); }
}
}


and the DashboardViewModel is:

 using System;
using System.Collections.ObjectModel;
using System.Linq;
 
using Telerik.RadCartesianChartSample.Common.Model;
 
/// <summary>
/// The dashboard view model.
/// </summary>
public class DashboardViewModel : NotifyPropertyChanged
{
/// <summary>
/// The random.
/// </summary>
private Random _random;
 
/// <summary>
/// Initializes a new instance of the <see cref="DashboardViewModel"/> class.
/// </summary>
public DashboardViewModel()
{
Init();
}
 
/// <summary>
/// Initializes the DashboardViewModel.
/// </summary>
private void Init()
{
_random = new Random();
DashBoardItems = new ObservableCollection<BoardItem>
{
new BoardItem
{
Name = "Blue",
Value = 1,
Count = _random.Next(20,50)
},
new BoardItem
{
Name = "Pink",
Value = 2,
Count = _random.Next(20,100)
},
new BoardItem
{
Name = "Yellow",
Value = 3,
Count = _random.Next(20, 100)
}
};
}
 
/// <summary>
/// Gets the major step.
/// </summary>
public int MajorStep
{
get
{
if (DashBoardItems.Any(item => item.Count < 10))
{
return 1;
}
 
if (DashBoardItems.Any(item => item.Count > 50))
{
return 5;
}
 
return 2;
}
}
 
/// <summary>
/// Gets or sets the dash board items.
/// </summary>
public ObservableCollection<BoardItem> DashBoardItems { get; set; }
}

In the DashboardViewModel constructor we will call the Init() method, that will create the list of three DashboardItems. Because this is an example, we use random values for the count property in each BoardItem.

Telerik.RadCartesianChartSample

We have the MainPage.xaml.cs where we will add the view model, here is:

public partial class MainPage
{
// Constructor
public MainPage()
{
InitializeComponent();
DataContext = new DashboardViewModel();
}
}

and in xaml, there are 4 points that we need to define:

  1. RadCartesianChart.Grid : Gets or sets the CartesianChartGrid used to decorate the chart plot area with major/minor grid and strip lines.
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <chart:RadCartesianChart Palette="DefaultDark" Grid.Column="1" Grid.Row="1" Margin="0,20,0,0">
    <chart:RadCartesianChart.Grid>
    <chart:CartesianChartGrid MajorLinesVisibility="Y">
    <chart:CartesianChartGrid.MajorYLineStyle>
    <Style TargetType="Line">
    <Setter Property="Stroke" Value="{StaticResource ChartColorKey}" />
    <Setter Property="StrokeDashArray" Value="4, 2" />
    </Style>
    </chart:CartesianChartGrid.MajorYLineStyle>
    </chart:CartesianChartGrid>
    </chart:RadCartesianChart.Grid>
    ...
    </Grid>
  2. RadCartesianChart.VerticalAxis : Gets or sets the visual Axis instance that will be used to plot points along the vertical (Y) axis.
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <chart:RadCartesianChart Palette="DefaultDark" Grid.Column="1" Grid.Row="1" Margin="0,20,0,0">
    ...
    <chart:RadCartesianChart.VerticalAxis>
    <chart:LinearAxis Title="Number of flowers"
    FontSize="18"
    MajorStep="{Binding MajorStep}"
    LineStroke="{StaticResource ChartColorKey}">
    <chart:LinearAxis.TitleTemplate>
    <DataTemplate>
    <TextBlock Text="{Binding}" FontSize="18" Foreground="Black" Margin="0,0,0,20"/>
    </DataTemplate>
    </chart:LinearAxis.TitleTemplate>
    <chart:LinearAxis.LabelStyle>
    <Style TargetType="TextBlock">
    <Setter Property="Foreground" Value="{StaticResource ChartColorKey}" />
    <Setter Property="FontSize" Value="14"></Setter>
    </Style>
    </chart:LinearAxis.LabelStyle>
    <chart:LinearAxis.MajorTickStyle>
    <Style TargetType="Rectangle">
    <Setter Property="Stroke" Value="{StaticResource ChartColorKey}" />
    </Style>
    </chart:LinearAxis.MajorTickStyle>
    </chart:LinearAxis>
    </chart:RadCartesianChart.VerticalAxis>
    ...
    </Grid>
  3. RadCartesianChart.HorizontalAxis: Gets or sets the visual Axis instance that will be used to plot points along the horizontal (X) axis.
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <chart:RadCartesianChart Palette="DefaultDark" Grid.Column="1" Grid.Row="1" Margin="0,20,0,0">
    ...
    <chart:RadCartesianChart.HorizontalAxis>
    <chart:CategoricalAxis Title="Flowers" FontSize="18" LineStroke="{StaticResource ChartColorKey}">
    <chart:CategoricalAxis.TitleTemplate>
    <DataTemplate>
    <TextBlock Text="{Binding}" FontSize="18" Foreground="Black" />
    </DataTemplate>
    </chart:CategoricalAxis.TitleTemplate>
    <chart:CategoricalAxis.LabelStyle>
    <Style TargetType="TextBlock">
    <Setter Property="Foreground" Value="{StaticResource ChartColorKey}" />
    <Setter Property="FontSize" Value="14"></Setter>
    </Style>
    </chart:CategoricalAxis.LabelStyle>
    <chart:CategoricalAxis.MajorTickStyle>
    <Style TargetType="Rectangle">
    <Setter Property="Stroke" Value="{StaticResource ChartColorKey}" />
    </Style>
    </chart:CategoricalAxis.MajorTickStyle>
    </chart:CategoricalAxis>
    </chart:RadCartesianChart.HorizontalAxis>
    ....
    </Grid>
  4. BarSeries : is the value that will add to the RadCartesianChart.Series: Gets the collection containing all the series presented by this instance.
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <chart:RadCartesianChart Palette="DefaultDark" Grid.Column="1" Grid.Row="1" Margin="0,20,0,0">
    ....
    <chart:BarSeries ItemsSource="{Binding DashBoardItems}">
    <chart:BarSeries.PointTemplates>
    <DataTemplate>
    <Rectangle Fill="LightBlue"/>
    </DataTemplate>
    <DataTemplate>
    <Rectangle Fill="Pink"/>
    </DataTemplate>
    <DataTemplate>
    <Rectangle Fill="Yellow"/>
    </DataTemplate>
    </chart:BarSeries.PointTemplates>
    <chart:BarSeries.CategoryBinding>
    <chart:PropertyNameDataPointBinding PropertyName="Name" />
    </chart:BarSeries.CategoryBinding>
    <chart:BarSeries.ValueBinding>
    <chart:PropertyNameDataPointBinding PropertyName="Count" />
    </chart:BarSeries.ValueBinding>
    </chart:BarSeries>
    </chart:RadCartesianChart>
    </Grid>


The complete XAML is listed below:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<chart:RadCartesianChart Palette="DefaultDark" Grid.Column="1" Grid.Row="1" Margin="0,20,0,0">
<chart:RadCartesianChart.Grid>
<chart:CartesianChartGrid MajorLinesVisibility="Y">
<chart:CartesianChartGrid.MajorYLineStyle>
<Style TargetType="Line">
<Setter Property="Stroke" Value="{StaticResource ChartColorKey}" />
<Setter Property="StrokeDashArray" Value="4, 2" />
</Style>
</chart:CartesianChartGrid.MajorYLineStyle>
</chart:CartesianChartGrid>
</chart:RadCartesianChart.Grid>
<chart:RadCartesianChart.VerticalAxis>
<chart:LinearAxis Title="Number of flowers"
FontSize="18"
MajorStep="{Binding MajorStep}"
LineStroke="{StaticResource ChartColorKey}">
<chart:LinearAxis.TitleTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="18" Foreground="Black" Margin="0,0,0,20"/>
</DataTemplate>
</chart:LinearAxis.TitleTemplate>
<chart:LinearAxis.LabelStyle>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="{StaticResource ChartColorKey}" />
<Setter Property="FontSize" Value="14"></Setter>
</Style>
</chart:LinearAxis.LabelStyle>
<chart:LinearAxis.MajorTickStyle>
<Style TargetType="Rectangle">
<Setter Property="Stroke" Value="{StaticResource ChartColorKey}" />
</Style>
</chart:LinearAxis.MajorTickStyle>
</chart:LinearAxis>
</chart:RadCartesianChart.VerticalAxis>
<chart:RadCartesianChart.HorizontalAxis>
<chart:CategoricalAxis Title="Flowers" FontSize="18" LineStroke="{StaticResource ChartColorKey}">
<chart:CategoricalAxis.TitleTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="18" Foreground="Black" />
</DataTemplate>
</chart:CategoricalAxis.TitleTemplate>
<chart:CategoricalAxis.LabelStyle>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="{StaticResource ChartColorKey}" />
<Setter Property="FontSize" Value="14"></Setter>
</Style>
</chart:CategoricalAxis.LabelStyle>
<chart:CategoricalAxis.MajorTickStyle>
<Style TargetType="Rectangle">
<Setter Property="Stroke" Value="{StaticResource ChartColorKey}" />
</Style>
</chart:CategoricalAxis.MajorTickStyle>
</chart:CategoricalAxis>
</chart:RadCartesianChart.HorizontalAxis>
<chart:BarSeries ItemsSource="{Binding DashBoardItems}">
<chart:BarSeries.PointTemplates>
<DataTemplate>
<Rectangle Fill="LightBlue"/>
</DataTemplate>
<DataTemplate>
<Rectangle Fill="Pink"/>
</DataTemplate>
<DataTemplate>
<Rectangle Fill="Yellow"/>
</DataTemplate>
</chart:BarSeries.PointTemplates>
<chart:BarSeries.CategoryBinding>
<chart:PropertyNameDataPointBinding PropertyName="Name" />
</chart:BarSeries.CategoryBinding>
<chart:BarSeries.ValueBinding>
<chart:PropertyNameDataPointBinding PropertyName="Count" />
</chart:BarSeries.ValueBinding>
</chart:BarSeries>
</chart:RadCartesianChart>
</Grid>

Source Code

Note: This project was moved to GitHub - Telerik-RadCartesianChart-Samples because Nokia Project will be discontinued.

References

This page was last modified on 9 December 2013, at 19:58.
167 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×