Using Chart in Windows Phone 7
I.Introduction
– Chart chắc hẳn là một khái niệm rất quen thuộc với tất cả chúng ta, Chart đã sớm trở thành 1 phần tử hết sức quan trong cho những thống kê của các ứng dụng Windows hay Web, và bây giờ Chart được hiện thực trên cả Windows Phone.
– Trong bài này mình xin chia sẻ cách sử dụng Chart trong Windows Phone 7.
II.Fundamental
– Để sử dụng Chart hãy chắc chắn rằng máy của bạn đã cài sẵn bộ Silverlight tool kit , nếu như Emulator or Phone của bạn vẫn chưa Update lên Mango thì hãy cài bộ Silverlight 3 Toolkit November 2009, bởi vì Windows Phone 7.0 chỉ hổ trợ cho Silverlight 3 và đến Mango thì hổ trợ cả Silverlight 4.
– Download Silverlight 3 Toolkit November 2009 tại đây !
– Bây giờ chúng ta tạo mới một Windows Phone Application Project.
– Trước tiên là chúng add thư viện để sử dụng Chart, các bạn chọn Right-Click vào Refercences –> Add Refercences-> Add các thư viện sau :
- System.Windows.Controls.DataVisualization.Toolkit.dll ở đường dẩn C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Toolkit\Nov09\Bin hay C:\Program Files(x86)\Microsoft SDKs\Silverlight\v3.0\Toolkit\Nov09\Bin
- System.Windows.Controls.dll ở đường dẩn C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Libraries\Client hay C:\Program Files(x86)\Microsoft SDKs\Silverlight\v3.0\Libraries\Client
Lưu ý : nếu các bạn add thiếu 1 trong 2 thư viện trên thì ứng dụng sẽ báo lỗi khi thực thi, do đó chúng ta phải add đầy đủ.
– Tiếp theo chúng ta khai báo thư viện để gọi Control, các bạn vào MainPage.xaml và khai báo :
1: xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
– Bây giờ chúng ta làm 1 giao diện đơn giản gồm các Chart chưa trong Panaroma Control:
XAML Code :
1: <Grid x:Name="ContentPanel" Margin="12,0,12,0">
2: <controls:Panorama Title="Chart Demo">
3: <controls:PanoramaItem Header="ColumnSerie" >
4: <Grid>
5: <charting:Chart x:Name="chrColumn"
6: Foreground="{StaticResource PhoneAccentBrush}"/>
7: </Grid>
8: </controls:PanoramaItem>
9: <controls:PanoramaItem Header="Pie Chart">
10: <Grid>
11: <charting:Chart x:Name="chrPie"
12: Foreground="{StaticResource PhoneAccentBrush}"/>
13: </Grid>
14: </controls:PanoramaItem>
15: <controls:PanoramaItem Header="Bar Chart">
16: <Grid>
17: <charting:Chart Name="chrBar"
18: Foreground="{StaticResource PhoneAccentBrush}"/>
19: </Grid>
20: </controls:PanoramaItem>
21: <controls:PanoramaItem Header="Scatter Chart">
22: <Grid>
23: <charting:Chart Name="chrScatter"
24: Foreground="{StaticResource PhoneAccentBrush}"/>
25: </Grid>
26: </controls:PanoramaItem>
27: <controls:PanoramaItem Header="Line Chart">
28: <Grid>
29: <charting:Chart Name="chrLine"
30: Foreground="{StaticResource PhoneAccentBrush}"/>
31: </Grid>
32: </controls:PanoramaItem>
33: </controls:Panorama>
34: </Grid>
Tiếp theo chúng ta tạo một Database đơn giản :
1: public class MSP
2: {
3: public String University { get; set; }
4: public int Number { get; set; }
5: }
Cuối cùng là vào MainPage.xaml.cs để xử lý việc Load dữ liệu đưa vào Chart :
Full C# Code :
1: using System;
2: using System.Collections.Generic;
3: using System.Linq;
4: using System.Net;
5: using System.Windows;
6: using System.Windows.Controls;
7: using System.Windows.Documents;
8: using System.Windows.Input;
9: using System.Windows.Media;
10: using System.Windows.Media.Animation;
11: using System.Windows.Shapes;
12: using Microsoft.Phone.Controls;
13:
14: using System.Windows.Controls.DataVisualization.Charting;
15: namespace ChartDemo
16: {
17: public class MSP
18: {
19: public String University { get; set; }
20: public int Number { get; set; }
21: }
22: public partial class MainPage : PhoneApplicationPage
23: {
24:
25: public MainPage()
26: {
27: InitializeComponent();
28: LoadColumnChart();
29: LoadPiechart();
30: LoadBarChart();
31: LoadLineChart();
32: LoadScatterChart();
33: }
34:
35: private void LoadScatterChart()
36: {
37: ScatterSeries series = new ScatterSeries();
38: chrScatter.Series.Add(series);
39: series.SetBinding(ColumnSeries.ItemsSourceProperty,
40: new System.Windows.Data.Binding());
41: series.ItemsSource = this.GetMSPSource();
42: series.DependentValuePath = "Number";
43: series.IndependentValuePath = "University";
44: }
45:
46: private void LoadLineChart()
47: {
48: LineSeries series = new LineSeries();
49: chrLine.Series.Add(series);
50: series.SetBinding(ColumnSeries.ItemsSourceProperty,
51: new System.Windows.Data.Binding());
52: series.ItemsSource = this.GetMSPSource();
53: series.DependentValuePath = "Number";
54: series.IndependentValuePath = "University";
55: }
56:
57: private void LoadBarChart()
58: {
59: BarSeries series = new BarSeries() ;
60: chrBar.Series.Add(series);
61: series.SetBinding(ColumnSeries.ItemsSourceProperty,
62: new System.Windows.Data.Binding());
63: series.ItemsSource = this.GetMSPSource();
64: series.DependentValuePath = "Number";
65: series.IndependentValuePath = "University";
66: }
67: private void LoadColumnChart()
68: {
69: ColumnSeries series = new ColumnSeries();
70: chrColumn.Series.Add(series);
71: series.SetBinding(ColumnSeries.ItemsSourceProperty,
72: new System.Windows.Data.Binding());
73: series.ItemsSource = this.GetMSPSource();
74: series.DependentValuePath = "Number";
75: series.IndependentValuePath = "University";
76: }
77: private void LoadPiechart()
78: {
79: PieSeries series = new PieSeries();
80: chrPie.Series.Add(series);
81: series.SetBinding(ColumnSeries.ItemsSourceProperty,
82: new System.Windows.Data.Binding());
83: series.ItemsSource = this.GetMSPSource();
84: series.DependentValuePath = "Number";
85: series.IndependentValuePath = "University";
86: }
87: private List<MSP> GetMSPSource()
88: {
89: List<MSP> Source = new List<MSP>()
90: {
91: new MSP(){University="OU",Number=6},
92: new MSP(){University="UIT",Number=5},
93: new MSP(){University="HoaSen",Number=3},
94: new MSP(){University="HCUMNS",Number=3},
95: new MSP(){University="SGU",Number=2},
96: new MSP(){University="HUI",Number=4},
97: };
98: return Source;
99: }
100: }
101: }
Việc còn lại là chúng Run Aplication để xem kết quả:
Hy vọng bài viết này sẽ hữu ích cho các bạn.
Thanks for reading !
/*Life run on code*/
Pham Nguyen 