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;
		}
	}
}
 
 
posted @ 2010-12-28 11:22  ForrestWoo  阅读(1370)  评论(4编辑  收藏  举报