Create a simple chart in Windows Phone 7

You can using the Data Visualization Toolkit to create a chart in Windows Phone like the one describe here:


What I will do is I will transform the chart from the chart from the article Create simple bar chart in Silverlight 5 to Windows Phone 7.


1. Move the xaml code over.












    FontFamily=”{StaticResource PhoneFontFamilyNormal}”

    FontSize=”{StaticResource PhoneFontSizeNormal}”

    Foreground=”{StaticResource PhoneForegroundBrush}”

    SupportedOrientations=”PortraitOrLandscape” Orientation=”Portrait”

    mc:Ignorable=”d” d:DesignWidth=”480″ d:DesignHeight=”800″




        <!– Data –>

        <local:Activities x:Key=”Activities”/>



  <Grid >





    <charting:Chart Title=”Typical Use” x:Name=”BarChart”>


        <charting:ColumnSeries x:Name=”series1″


                            ItemsSource=”{Binding PugetSound}”

                            IndependentValueBinding=”{Binding Name}”

                            DependentValueBinding=”{Binding Population}”/>







2. Put the follow code to MainPage.xaml.cs.


publicpartialclassMainPage : PhoneApplicationPage


    public MainPage()







    privatevoid SetChartData()


      List<double> data = newList<double>() { 1, 2.3, 3.5, 5 };


      ((ColumnSeries)BarChart.Series[0]).ItemsSource = newCities();



    protectedoverridevoid OnOrientationChanged(OrientationChangedEventArgs e)




      // Set appropriate template for new orientation

      ControlTemplate template;

      switch (e.Orientation)






          template = Application.Current.Resources[“PhoneChartPortraitTemplate”] asControlTemplate;





          template = Application.Current.Resources[“PhoneChartLandscapeTemplate”] asControlTemplate;



      //myChart.Template = template;




3. Move the city class over.





    /// Gets or sets the name of the city.


    publicstring Name { get; set; }



    /// Gets or sets the population of the city.


    publicint Population { get; set; }



    /// Initializes a new instance of the City class.


    public City()





    /// Returns a string that represents the current object.


    ///<returns>A string that represents the current object.</returns>

    publicoverridestring ToString()


        return Name;




publicclassCities : List<City>


  public Cities()


    Add(newCity { Name = “Bellevue”, Population = 112344 });

    Add(newCity { Name = “Issaquah”, Population = 11212 });

    Add(newCity { Name = “Redmond”, Population = 46391 });

    Add(newCity { Name = “Seattle”, Population = 592800 });




You will see the chart like the one below.




You can also download a single solution from The sample file name is DataVisualizationOnWindowsPhoneBar.rar. My MSN ID is



About chanmingman

Since March 2011 Microsoft Live Spaces migrated to Wordpress ( till now, I have is over 1 million viewers. This blog is about more than 50% telling you how to resolve error messages, especial for Microsoft products. The blog also has a lot of guidance teaching you how to get stated certain Microsoft technologies. The blog also uses as a help to keep my memory. The blog is never meant to give people consulting services or silver bullet solutions. It is a contribution to the community. Thanks for your support over the years. Ming Man is Microsoft MVP since year 2006. He is a software development manager for a multinational company. With 25 years of experience in the IT field, he has developed system using Clipper, COBOL, VB5, VB6, VB.NET, Java and C #. He has been using Visual Studio (.NET) since the Beta back in year 2000. He and the team have developed many projects using .NET platform such as SCM, and HR based applications. He is familiar with the N-Tier design of business application and is also an expert with database experience in MS SQL, Oracle and AS 400.
This entry was posted in .Net and tagged , , , , . Bookmark the permalink.

One Response to Create a simple chart in Windows Phone 7

  1. Gianfranco says:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s