silverlight toolkit chart自定义颜色

 首先，我们要新创建一个饼图的"Silverlight 控件"，并将其命名为：PieSample.xaml

   

silverlight_pie.gif(33.53 K)

2/17/2009 10:05:37 PM

 
    然后我们拷贝相应的ColumnSample.xaml，ColumnSample.xaml.cs中的相应代码到: PieSample.xaml 和 Pie-Sample.xaml.cs文件中。接着我们修改PieSample.xaml.cs文件中的dataServiceClient_GetEmployeeListCompleted方法，修改后的结果如下：

1. void dataServiceClient_GetEmployeeListCompleted(object sender,GetEmployeeListCompletedEventArgs e)
   
2. {
   
3.     ObservableCollection<EmployeeInfo> employeeList = e.Result;
   
4. 
   
5.     Action<Chart> chartModifier = (chart) =>
   
6.     {
   
7.         Axis dateAxis = new Axis { Orientation = AxisOrientation.Horizontal,Title = "雇员名称",FontStyle = FontStyles.normal,FontSize = 12f,ShowGridLines = true};
   
8.         EmployeeChart.Axes.Add(dateAxis);
   
9.         Axis valueAxis = new Axis { Orientation = AxisOrientation.Vertical,Title = "薪水",Minimum = -1000,Maximum = 3000,ShowGridLines = true};
   
10.         EmployeeChart.Axes.Add(valueAxis);
    
11.     };
    
12.     chartModifier(EmployeeChart);
    
13. 
    
14.     PieSeries series = new PieSeries();
    
15.     series.ItemsSource = employeeList;
    
16.     series.IndependentValueBinding = new System.Windows.Data.Binding("EmployeeName");
    
17.     series.DependentValueBinding = new System.Windows.Data.Binding("Salary");
    
18.     series.AnimationSequence = AnimationSequence.LastToFirst;
    
19.     EmployeeChart.Series.Add(series);
    
20. }
    

复制代码

现在，我们运行一下这个DEMO，看一下效果：
   
 

silverlight_pie1.gif(14.47 K)

2/17/2009 10:05:37 PM

    当然如果大家对Chart控件中的数据显示颜色不满意，也可以按我们自己的想法“自定义颜色”，比如我们在
Xaml中定义下面的类型

1. <UserControl.Resources>
   
2.  
   
3.     <samples:StylePalette x:Key="ColorCustomStyle">
   
4.         <Style targettype="Control">
   
5.             <Setter Property="Background" Value="Yellow"/>
   
6.             <Setter Property="BorderBrush" Value="Black"/>
   
7.         </Style>
   
8.         <Style targettype="Control">
   
9.             <Setter Property="Background" Value="Purple"/>
   
10.             <Setter Property="BorderBrush" Value="Black"/>
    
11.         </Style>
    
12.     </samples:StylePalette>
    
13. </UserControl.Resources>
    

复制代码

注意：StylePalette类型声明如下：

1. public partial class StylePalette : Collection<Style>
   
2. {
   
3.     public StylePalette(){}
   
4. }
   

复制代码

这样，当我们就可以在cs文件中使用该样式信息了，如下：

1. PieSeries series = new PieSeries();
   
2. series.ItemsSource = employeeList;
   
3. series.IndependentValueBinding = new System.Windows.Data.Binding("EmployeeName");
   
4. series.DependentValueBinding = new System.Windows.Data.Binding("Salary");
   
5. //绑定了该样式
   
6. series.StylePalette = this.Resources["ColorCustomStyle"] as Collection<Style>;
   
7. series.AnimationSequence = AnimationSequence.LastToFirst;
   

复制代码

现在我们再看一下其运行效果：
   
 

silverlight_pie2.gif(10.26 K)

2/17/2009 10:05:37 PM

   
    可以看出，我们只要将ColumnSeries换成PieSeries，其它的代码一行不动，就将柱状图显示成了饼图，
是不是很方便，呵呵。

    当然在饼图中也支持直接在Xaml中进行属性声明绑定，比如：

1. <charting:Chart Title="Xaml绑定" x:Name="FunctionSeriesSample"  BorderBrush="Gray" Margin="5">
   
2.     <charting:Chart.Series>
   
3.         <charting:PieSeries
   
4.                 ItemsSource="{Binding PugetSound,Source={StaticResource City}}"
   
5.                 IndependentValueBinding="{Binding Name}"
   
6.                 DependentValueBinding="{Binding Population}"
   
7.                 IsSelectionEnabled="True"
   
8.                 SelectionChanged="BarSeries_SelectionChanged" StylePalette="{StaticResource ColorCustomStyle}"
   
9.                 Template="{StaticResource CustomTemplate}">
   
10.         </charting:PieSeries>
    
11.     </charting:Chart.Series>
    
12. </charting:Chart>
    

复制代码

另外就是饼图支持鼠标选择事件，比如当我们使用鼠标选中饼图中的某一显示区域时，我们可以将该区域的详细信息显示出来。为了实现这个效果，我们将下面的代码加入了PieSample.Xaml中：

1. <controls:DockPanel LastChildFill="False" controls:DockPanel.Dock="Right">
   
2.     <StackPanel  x:Name="@R_30_4045@ionPanel" controls:DockPanel.Dock="Top" Margin="5">
   
3.         <TextBlock Text="Selected City Details" FontWeight="Bold"/>
   
4.         <StackPanel Orientation="Horizontal">
   
5.             <TextBlock Text="Name: "/>
   
6.             <TextBlock Text="{Binding Name}"/>
   
7.         </StackPanel>
   
8.         <StackPanel Orientation="Horizontal">
   
9.             <TextBlock Text="Population: "/>
   
10.             <TextBlock Text="{Binding Population}"/>
    
11.         </StackPanel>
    
12.     </StackPanel>
    
13.     <Button  Content="取消选中" Click="Unselect_Click" Margin="5" controls:DockPanel.Dock="Bottom"/>
    
14. </controls:DockPanel>
    

复制代码

这里，我们只要在PieSample.Xaml.cs文件中编写事件BarSeries_SelectionChanged处理代码即可：

1. private void BarSeries_SelectionChanged(object sender,SelectionChangedEventArgs e)
   
2. {
   
3.     @R_30_404[email protected] = (1 <= e.AddedItems.Count) ? e.AddedItems[0] : null;
   
4. }
   
5. 
   
6. private void Unselect_Click(object sender,System.Windows.RoutedEventArgs e)
   
7. {
   
8.     (FunctionSeriesSample.Series[0] as PieSeries).SelectedItem = null;
   
9. }
   

复制代码

下面看一下运行效果：
   

silverlight_pie3.gif(11.85 K)

2/17/2009 10:05:37 PM

   
    这样当我们参照之前讲过的将柱状图转成饼图的方法将所有的ColumnSeries修改为“PieSeries”之后，我们会看到下面的显示效果：

silverlight_pie4.gif(45.43 K)

2/17/2009 10:05:37 PM

   
    其实看到这里，相信大家会举一返三了，下面要说的“折线图”,“散点图”要如何绘制了。不错，对于折线图使用的Series为“Lineseries”，而散点图使用的是“ScatterSeries”。不过有一点就是这两个图中的X,Y轴的数据绑定类型要做一下转换，因为之前我们使用的X轴是EmployeeName,Y轴使用的是
Salary.我们要修改的是X轴，新绑定的是EmployeeID，原因我猜是这两种图表要求XY两个轴只能是数值型或日期型所致。

    下面以dataServiceClient_GetEmployeeListCompleted方法为例，看一下最终的修改结果：

1. void dataServiceClient_GetEmployeeListCompleted(object sender,ShowGridLines = true};
   
2.         EmployeeChart.Axes.Add(valueAxis);
   
3.     };
   
4.     chartModifier(EmployeeChart);
   
5. 
   
6.     Lineseries series = new Lineseries();
   
7.     series.ItemsSource = employeeList;
   
8.     series.IndependentValueBinding = new System.Windows.Data.Binding("EmployeeID");
   
9.     series.DependentValueBinding = new System.Windows.Data.Binding("Salary");
   
10.     EmployeeChart.Series.Add(series);
    
11. }
    

复制代码

这样当我们运行该DEMO（Linesample.xaml）时，显示的效果如下图：
   
   

silverlight_line1.gif(10.59 K)

2/17/2009 10:05:37 PM

   
    当然“折线图”也支持多数据源绑定，比如下面的代码就演示了同时绑定数据源WidgetPopularity，GizmoPopularity的图表：

1. <charting:Chart Title="Typical Use">
   
2.     <charting:Chart.Series>
   
3.         <charting:Lineseries IsSelectionEnabled="True" Title="Widget Popularity"
   
4.             ItemsSource="{StaticResource WidgetPopularity}" IndependentValueBinding="{Binding Date}"
   
5.             DependentValueBinding="{Binding Percent}" />
   
6.         <charting:Lineseries IsEnabled="True" Title="Gizmo Popularity"
   
7.             ItemsSource="{StaticResource GizmoPopularity}"  IndependentValueBinding="{Binding Date}"
   
8.             DependentValueBinding="{Binding Percent}" />
   
9.     </charting:Chart.Series>
   
10. </charting:Chart>
    

复制代码

显示如下图：
   
 

silverlight_line2.gif(15.46 K)

2/17/2009 10:05:37 PM

   
    当做完所有必要的修改之后，最终Linesample.xaml的运行效果： 
   

silverlight_line3.gif(45.42 K)

2/17/2009 10:05:37 PM

    同时，参考将“柱状图”转成“折线图”的过程，我们将“柱状图”转成“散点图”，这里不再多做说明了，做完相应转换后，我们运行一下源码包中的ScatterSample.xaml，看一下效果：

silverlight_scatter.gif(37.81 K)

2/17/2009 10:05:37 PM

    看到这里，相信有一些朋友要说了，通过将现有的Series替换成另一种Series就可以对图表做出一番变化，那我能不能定制自己的Series呢？答案是肯定的，在Toolkit的Sample代码中就有这个示例，为了让大家阅读方便，我已将这块代码复制到了本DEMO示例中，大家看一下CustomSeries下的两个文件SampleFunctionTypeConverter.cs 和FunctionSeries.cs，即可。

    最终的运行效果(CustomSeriesSample.xaml)如下：

silverlight_customseries.gif(30.78 K)

2/17/2009 10:05:37 PM

silverlight_customseries2.gif(19.5 K)

2/17/2009 10:05:37 PM

在微软的Silverlight 开源控件项目: Silverlight Toolkit