Rad Cartesian Chart Sample for Windows Phone [Telerik]

In my last article, Rad Cartesian Chart Sample [Telerik] I showed a sample with Rad Cartesian Chart for Windows 8. Today I want to show it but for Windows Phone.

Main goals:

  • Use the RadControls for Windows Phone
  • Create a Windows Phone 7.1 Project
  • Create a Windows Phone 8 Project;
  • Reuse the Telerik.RadCartesianChartSample.Common project;

Let’s start! First I will create the Windows Phoine 8.0 project:

image

I will use the RadControls Windows Phone Application, why?

Because, next I will show a wizard, that Telerik provide, that show which dlls I want to add, see the following image:

image

Next I will choose some features like: about page, application bar, diagnostics, message for rate, see the following image:image

When you create a lot of project, with this features, this is fantastic,, isn´t? I Like it! Smile

Here is the result:

image

Note: I changed the namespace for Telerik.RadCartesianChartSample, because is more simple if I need it later for share code between projects.

Now I will add the reference for Telerik.RadCartesianChartSample.Common

image

And after this we will create the RadCartesianChart.,..

Oh wait! I will created the same code that I did in my Windows 8 App?? Oh is so boring…. It could be more easy, hummm ok let’s try to copy and paste that I did? Open-mouthed smile

First I will add the View Model to the page, here is:

public MainPage()
{
    InitializeComponent();
    DataContext = new DashboardViewModel();			
}

The same code I did in Windows 8! Just copy and paste…

After this I found some errors, that I fixed:

  • Related with LineStyle vs LineStroke

In Windows 8 Sample I do:

   <chart:CategoricalAxis.LineStyle>
                        <Style TargetType="Line">
                            <Setter Property="Stroke"  Value="{StaticResource ChartColorKey}" />
                        </Style>
                    </chart:CategoricalAxis.LineStyle>

and in Windows Phone I need to do:

LineStroke="{StaticResource ChartColorKey}
  • Related with PaletteName vs. Palette

In Windows 8 I did:

PaletteName="DefaultDark"

In Windows Phone I need to do:

Palette="DefaultDark"

I don´t have more errors, let’s run… will it works??? hummmmm ….. Select the Telerik.RadCartesianChartSample(WP8) as a startup poject and then  F5, wait a little for the simulator.

Here is the result:

wpresult

With the same XAML (only fixed two little details), I have the same result as in Windows 8!!! This is great and in this way is very simple to have the same features in both platforms!

Are you thinking, what about Windows Phone 7.1? Don´t worry, repeat the steps for Windows Phone 8 and it works!

Fantastic, I like it! Smile

Conclusion:

With this sample I conclude my initial thought, with Portable Class Library and RadControls for Windows Phone and Windows 8 I can reuse code and little adjust (that can be not required) I have the same solution in my 3 apps.

You can get the Telerik.RadCartesianChartSample from here:

Telerik RadCartesianChart Samples

Some important references that I recommend:

Leave a Reply

Your email address will not be published. Required fields are marked *

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=""> <strike> <strong>