转自：http://www.cnblogs.com/linzheng/archive/2011/10/06/1980328.html
sliverlight toolkit
http://www.silverlight.net/content/samples/sl4/toolkitcontrolsamples/run/default.html
Why didn't I think of that in the first place? [Windows Phone 7 Charting example updated to include reusable, platform-consistent Style and Templates]
http://blogs.msdn.com/b/delay/archive/2010/08/04/why-didn-t-i-think-of-that-in-the-first-place-windows-phone-7-charting-example-updated-to-include-reusable-platform-consistent-style-and-templates.aspx
利用Silverlight自带的chart组件可以很轻易地编写出各种常用的图表图形。
组件所在命名空间：
System.Windows.Controls.DataVisualization.Charting
在System.Windows.Controls.DataVisualization.Charting空间下可以定义下面7种图形
1、LineSeries 线性图
2、PieSeries 饼图
3、ColumnSeries 柱形图
4、AreaSeries 区域图
5、BarSeries 条状图
6、ScatterSeries 散点图
7、BubbleSeries 气泡图
下面通过静态绑定的方法用Microsoft.Phone.Control.Panorama全景视图控件展现一下LineSeries、PieSeries、ColumnSeries、AreaSeries四种图形。
页面文件 省略了重复的代码
View Code
< phone:PhoneApplicationPage xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone ="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell ="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:charting ="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" xmlns:local ="clr-namespace:DataVisualizationOnWindowsPhone" xmlns:d ="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:DataVisualization ="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" xmlns:controls ="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls" x:Class ="DataVisualizationOnWindowsPhone.MainPage" SupportedOrientations ="PortraitOrLandscape" Orientation ="Portrait" mc:Ignorable ="d" d:DesignWidth ="480" d:DesignHeight ="800" shell:SystemTray.IsVisible ="False" > < phone:PhoneApplicationPage.Resources > <!-- Data --> < local:Activities x:Key ="Activities" /> </ phone:PhoneApplicationPage.Resources > < phone:PhoneApplicationPage.FontSize > < StaticResource ResourceKey ="PhoneFontSizeNormal" /> </ phone:PhoneApplicationPage.FontSize > < phone:PhoneApplicationPage.Foreground > < StaticResource ResourceKey ="PhoneForegroundBrush" /> </ phone:PhoneApplicationPage.Foreground > < Grid > < Grid.RowDefinitions > < RowDefinition /> </ Grid.RowDefinitions > <!-- Title --> < controls:Panorama Title ="图表控件" > …… < controls:PanoramaItem Header ="饼图" > < Grid > < charting:Chart x:Name ="pieChart" Style =" {StaticResource PhoneChartStyle} " Template =" {StaticResource PhoneChartPortraitTemplate} " Margin ="0,0,-7,0" > < charting:Chart.Palette > < DataVisualization:ResourceDictionaryCollection > < ResourceDictionary > < Style x:Key ="DataPointStyle" TargetType ="Control" > < Setter Property ="Background" > < Setter.Value > < RadialGradientBrush MappingMode ="Absolute" > < GradientStop Color ="Blue" Offset ="0.9" /> < GradientStop Color ="DarkBlue" Offset ="1.0" /> </ RadialGradientBrush > </ Setter.Value > </ Setter > < Setter Property ="BorderBrush" Value ="Transparent" /> </ Style > </ ResourceDictionary > < ResourceDictionary > < Style x:Key ="DataPointStyle" TargetType ="Control" > < Setter Property ="Background" > < Setter.Value > < RadialGradientBrush MappingMode ="Absolute" > < GradientStop Color ="Yellow" Offset ="0.8" /> < GradientStop Color ="Orange" Offset ="1.0" /> </ RadialGradientBrush > </ Setter.Value > </ Setter > < Setter Property ="BorderBrush" Value ="Transparent" /> </ Style > </ ResourceDictionary > < ResourceDictionary > < Style x:Key ="DataPointStyle" TargetType ="Control" > < Setter Property ="Background" > < Setter.Value > < RadialGradientBrush MappingMode ="Absolute" > < GradientStop Color ="Red" Offset ="0.8" /> < GradientStop Color ="DarkRed" Offset ="1.0" /> </ RadialGradientBrush > </ Setter.Value > </ Setter > < Setter Property ="BorderBrush" Value ="Transparent" /> </ Style > </ ResourceDictionary > < ResourceDictionary > < Style x:Key ="DataPointStyle" TargetType ="Control" > < Setter Property ="Background" > < Setter.Value > < RadialGradientBrush MappingMode ="Absolute" > < GradientStop Color ="Green" Offset ="0.8" /> < GradientStop Color ="DarkGreen" Offset ="1.0" /> </ RadialGradientBrush > </ Setter.Value > </ Setter > < Setter Property ="BorderBrush" Value ="Transparent" /> </ Style > </ ResourceDictionary > < ResourceDictionary > < Style x:Key ="DataPointStyle" TargetType ="Control" > < Setter Property ="Background" > < Setter.Value > < RadialGradientBrush MappingMode ="Absolute" > < GradientStop Color ="Lime" Offset ="0.8" /> < GradientStop Color ="LimeGreen" Offset ="1.0" /> </ RadialGradientBrush > </ Setter.Value > </ Setter > < Setter Property ="BorderBrush" Value ="Transparent" /> </ Style > </ ResourceDictionary > < ResourceDictionary > < Style x:Key ="DataPointStyle" TargetType ="Control" > < Setter Property ="Background" > < Setter.Value > < RadialGradientBrush MappingMode ="Absolute" > < GradientStop Color ="LightGray" Offset ="0.8" /> < GradientStop Color ="DarkGray" Offset ="1.0" /> </ RadialGradientBrush > </ Setter.Value > </ Setter > < Setter Property ="BorderBrush" Value ="Transparent" /> </ Style > </ ResourceDictionary > </ DataVisualization:ResourceDictionaryCollection > </ charting:Chart.Palette > < charting:PieSeries x:Name ="pieSeries" ItemsSource =" {StaticResource Activities} " DependentValuePath ="Count" IndependentValuePath ="Activity" AnimationSequence ="FirstToLast" /> </ charting:Chart > </ Grid > </ controls:PanoramaItem > …… </ controls:Panorama > </ Grid > </ phone:PhoneApplicationPage >
后台代码部分
using System.Collections.Generic; using System.Windows; using System.Windows.Controls; using Microsoft.Phone.Controls; namespace DataVisualizationOnWindowsPhone { using System.Windows.Controls.DataVisualization.Charting; using System.Windows.Media; using DataVisualizationOnWindowsPhone.CustomPieChart; public partial class MainPage : PhoneApplicationPage { public MainPage() { InitializeComponent(); } } // 活动信息的类 public class ActivityInfo { public string Activity { get ; set ; } public int Count { get ; set ; } } // 活动的活动列表类 数据源 public class Activities : List < ActivityInfo > { public Activities() { Add( new ActivityInfo { Activity = " 上班 " , Count = 100 }); Add( new ActivityInfo { Activity = " 吃饭 " , Count = 26 }); Add( new ActivityInfo { Activity = " 聊QQ " , Count = 6 }); Add( new ActivityInfo { Activity = " 陪老婆 " , Count = 60 }); Add( new ActivityInfo { Activity = " 旅游 " , Count = 10 }); Add( new ActivityInfo { Activity = " 发呆 " , Count = 18 }); } } }
组件常用方法：
Refresh：强制该组件从它的数据源刷新数据，然后重新渲染结果序列。
组件的常用属性：
ActualAxes：获取显示在该组件上的实际轴数。
Axes：获取或设置在组件中的轴的序列。
ChartAreaStyle：获取或设置ISeriesHost的图表区域样式。
LegendItems：获取图例项的集合。
LegendStyle：获取或设置图例的样式。
LegendTitle：获取或设置图例的标题内容。
PlotAreaStyle：获取或设置该组件绘图区域的样式。
Series：获取或设置显示在该组件中的数据序列集合。
StylePalette：获取或设置一个由ISeriesHost子项所使用的样式调色板。
Title：获取或设置该组件的标题。
TitleStyle：获取或设置该组件的标题的样式。
7032
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
