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