silverlight toolkit chart的用法

通过滑动datagrid 中 slider控制chart，并自定义chart颜色

不多说，主要代码如下：

XAML：


<UserControl x:Class="OhalScenarioDemo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="800" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">
<Grid x:Name="LayoutRoot" Background="White" Height="581" Width="816">

<sdk:DataGrid AutoGenerateColumns="False" Height="391"
HorizontalAlignment="Left"
Margin="0,12,0,0" Name="dataGrid1"
VerticalAlignment="Top" Width="395" ItemsSource="{Binding Path=Products, Mode=TwoWay}">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn CanUserReorder="True" Width="Auto" Binding="{Binding Path=brandName}" Header="Brands" />
<sdk:DataGridTextColumn CanUserReorder="True" Width="Auto" Binding="{Binding Path=Sales}" Header="Sales" />
<sdk:DataGridTextColumn CanUserReorder="True" Width="Auto" Binding="{Binding Path=spend}" Header="Spend" />
<sdk:DataGridTextColumn CanUserReorder="True" Width="Auto" Binding="{Binding Path=ROI}" Header="ROI" />
<sdk:DataGridTemplateColumn>
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Slider Width="150" Maximum="10" Name="sliderSales" Value="{Binding Path=Sales, Mode=TwoWay}"></Slider>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
<toolkit:Chart HorizontalAlignment="Left" Margin="438,12,0,0" Name="chart1" VerticalAlignment="Top" Height="210" Width="332">

<toolkit:Chart.LegendStyle>
<Style TargetType="toolkit:Legend">
<Setter Property="Foreground" Value="Red"></Setter>
<Setter Property="Background" Value="Black"></Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
</toolkit:Chart.LegendStyle>

<toolkit:Chart.Palette>
<toolkit:ResourceDictionaryCollection>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="Blue"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="Green"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="Red"/>
</Style>
</ResourceDictionary>


<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="Yellow"/>
</Style>
</ResourceDictionary>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="Silver"/>
</Style>
</ResourceDictionary>


</toolkit:ResourceDictionaryCollection>
</toolkit:Chart.Palette>


<toolkit:PieSeries
DependentValuePath="Sales"
IndependentValuePath="brandName"
ItemsSource="{Binding ElementName=dataGrid1, Path=ItemsSource}" >
</toolkit:PieSeries>
</toolkit:Chart>
<toolkit:Chart HorizontalAlignment="Left" Margin="438,240,0,0" Name="chart2" Title="Chart Title" VerticalAlignment="Top" Width="332" Height="198">
<toolkit:Chart.Palette>
<toolkit:ResourceDictionaryCollection>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Foreground" Value="Red"/>
</Style>
</ResourceDictionary>
</toolkit:ResourceDictionaryCollection>
</toolkit:Chart.Palette>
<toolkit:ColumnSeries DependentValuePath="Sales"
IndependentValuePath="brandName"
ItemsSource="{Binding ElementName=dataGrid1, Path=ItemsSource}" >
</toolkit:ColumnSeries>
</toolkit:Chart>
</Grid>
</UserControl>

Product:

public class Product:ViewModelBase
{
public string brandName { get; set; }
public double spend { get; set; }


private double _sales;
public double Sales
{
get
{
return Math.Round(_sales,2);
}
set
{
_sales = value;
NotifyPropertyChanged("Sales");
}
}
public double ROI { get; set; }
}