Create chart control in windows Phone 7 and Data-binding using MVVM

No.of Views547
Bookmarked0 times
Downloads 
Votes0
By  usamawahabkhan   On  01 Jan 2012 20:01:41
Tag : Windows Phone , Custom Controls
In this article, I'm going to explain that how to create chart control using XAML in Windows Phone 7.In addition, bind data from the XML to chart control.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction

In this article, I'm going to explain that how to create chart control using XAML in Windows Phone 7.In addition, bind data from the XML to chart control.

Image Loading

the above figure is sample output in the out of the mobile screen. The below is actual screen on the mobile phone.

Image Loading

Windows Phone 7 Provide you great Support of Data Visualization with Charts and Vector graphic. You can also bind chart with xml data by using mvvm pattern.

To Create Chart Control with XML.

1 Open Visual Studio 2010 then create new Silverlight windows Phone Project

Image Loading

2 Add XML file and define some schema.

Add XML source file that we are going to use  bind to chart control.

3.

Image Loading

3 Add three Folders in Solution "Model", "View" , "ViewModel"

Image Loading

4 Add Class in Model name ResultView.cs and map your xml scheme with properties.

Image Loading
Image Loading

5 Add Class in ViewModel and Named ResultViewModel.cs in this class you load data from xml.

Image Loading

6 Open App.xaml and define or copy from sample code in you Template for PhoneChart Portrait and Landscape orientation in ResourceDictionary.

Image Loading

7 Add one UserControl in your View Folder and named ResultView.xaml.

Image Loading

8 Open MainPage.xaml add View in it.

Image Loading

9 Open MainPage.xaml and Override the OnOrientationChanged event handler and change template on On Orientation.

Image Loading

10. That's all now press F5 and see the output in your window phone.

Download Source Code 

Download source files -978 kb

Summary

This is another part of my article series, I hope you also like it. Thank you for reading.

 
Sign Up to vote for this article
 
About Author
 
usamawahabkhan
Occupation-Not Provided
Company-Not Provided
Member Type-Senior
Location-Pakistan
Joined date-06 May 2010
Home Page-Not Provided
Blog Page-Not Provided
 
 
Other popularSectionarticles
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top