Windows Phone 7 图表控件的使用

　　这一讲介绍在Windows Phone 7平台下如何使用Chart,我将展示在我们的应用程序中添加Pie，Bar和其它Chart。

　　

　　获取Silverlight Toolkit

　　　　首先你需要下载控件包，到Silverlight Toolkit on Codeplex，并且安装。本篇特别介绍PieSeries、BarSeries。

　　PieSeries控件的使用

　　　　1.添加程序集引用

　　　　　　在的Silverlight安装路径下可以找到System.Windows.Controls 、the System.Windows.Controls.DataVisualization.Toolkit这两个程序集（我的路径是C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Bin）

将这两个程序集引用。

　　　　2.添加命名空间

　　　　　　在使用控件的XAML页面加入命名空间。

xmlns:chart="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

　　　　　
　　　　　3.添加控件　　　　

　　　　　　在XAML页面中添加图下代码

<chart:Chart>
	<chart:PieSeries />
</chart:Chart>

　　　　　　　这只是简单的添加了控件，你还没有做任何事呢。

　　　　4. PieSeriesControl.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Controls.DataVisualization.Charting;
 
namespace Day31_ChartingControls
{
	public partial class PieSeriesControl : PhoneApplicationPage
	{
		VideoGameCharacter[] pacman = new VideoGameCharacter[2] { new VideoGameCharacter("Resembles", 8), new VideoGameCharacter("Doesn't resemble", 2)};
		
		public PieSeriesControl()
		{
			InitializeComponent();
			PieSeries pieSeries = PieChart.Series[0] as PieSeries;
			pieSeries.ItemsSource = pacman;
		}
	}
 
	public class VideoGameCharacter
	{
		public string Label { get; set; }
		public int Value { get; set; }
 
		public VideoGameCharacter(string label, int value)
		{
			Label = label;
			Value = value;
		}
	}
}

　　你会发现，我并不是直接使用PieSeries 控件，而是使用的它的父控件，Series在Series集合的第一个索引　　

　　PieSeriespieSeries = PieChart.Series[0] asPieSeries;

　　我也不是完全清楚，为啥直接调用 PieSeries控件而不能使用。下面我将绑定数据到PieSeries。

<chart:Chart x:Name="PieChart">

        <chart:PieSeries 

               IndependentValueBinding="{Binding Label}"

               DependentValueBinding="{Binding Value}"/>

</chart:Chart>

　　

效果如下图

BarSeries控件的使用 

 

       同样，我们可以使用BarSeries控件，创建控件，绑定数据都一样

<chart:Chart x:Name="BarChart" Foreground="Gray" Title="Midwest City Populations">
	<chart:BarSeries
		Title="Population"
		IndependentValueBinding="{Binding Name}"
		DependentValueBinding="{Binding Population}"/>
	<chart:Chart.Axes>
		<chart:CategoryAxis Title="City" Orientation="Y" FontStyle="Italic"/>
		<chart:LinearAxis Title="Population" Orientation="X" Minimum="0" Maximum="2500000" Interval="500000" ShowGridLines="True"  FontStyle="Italic"/>
	</chart:Chart.Axes>
</chart:Chart>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Windows.Controls.DataVisualization.Charting;
 
namespace Day31_ChartingControls
{
	public partial class BarSeriesControl : PhoneApplicationPage
	{
		List<City> cities = new List<City> { 
			new City { Name = "CLE", Population = 2250871 }, 
			new City { Name = "CMH", Population = 1773120 }, 
			new City { Name = "CVG", Population = 2155137 }, 
			new City { Name = "DET", Population = 4425110 } };
		
		public BarSeriesControl()
		{
			InitializeComponent();
			BarSeries bs = BarChart.Series[0] as BarSeries;
			bs.ItemsSource = cities;
		}
	}
}

 

 

本文翻译自：http://www.jeffblankenburg.com/post/31-Days-of-Windows-Phone-7c-Day-31-Charting-Data.aspx