轴的动态绑定
当C1Chart在MVVM框架下应用的时候，有的时候图表不可能知道属性，到runtime才能binding。
例如，C1Chart的DataSeries的ValueBinding只能在runtime设置。
本文就来介绍对于MVVM模式下，C1Chart for WPF的动态轴绑定。
下面是详细的步骤：
首先，创建新的WPF应用，添加下面的Sales类到工程。
public class Sales:INotifyPropertyChanged
{
public Sales(string product,double salevalue,double volume)
{
_product = product;
_salevalue = salevalue;
_volume = volume;
_itemvariance = (_volume /_salevalue)*100;
}
#region privateFields
string _product;
double _salevalue;
double _volume;
double _itemvariance;
#endregion
#region publicProperties
public string Product
{
get { return _product; }
set { _product = value; }
}
public double SaleValue
{
get { return _salevalue; }
set { _salevalue = value; OnPropertyChanged("SaleValue"); }
}
public double Volume
{
get { return _volume; }
set { _volume = value; OnPropertyChanged("Volume"); }
}
public double ItemVariance
{
get {return _itemvariance; }
}
#endregion
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
#endregion
}
其次，创建ViewModeBase类。
我们会定义ChartViewModel类继承自它。
public class ViewModelBase:INotifyPropertyChanged
{
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
#endregion
public ViewModelBase()
{
}
protected void OnPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}
创建自定义的ChartViewModel类
public class ChartViewModel:ViewModelBase
{
#region Ctor..
public ChartViewModel()
{
_saleslist = new ObservableCollection<Sales>();
LoadData();
_axisvalues = new ObservableCollection<string>();
PropertyInfo[] pi = typeof(Sales).GetProperties();
//add the properties of Sales class as axis value collection
foreach (PropertyInfo p in pi)
{
if (p.Name == "Product")
{
}
else
{
_axisvalues.Add(p.Name);
}
}
_axisview = new CollectionView(_axisvalues);
}
#endregion
#region private Fields
ObservableCollection<Sales> _saleslist;
ObservableCollection<string> _axisvalues;
CollectionView _axisview;
#endregion
#region publicProperties
public ObservableCollection<Sales> SalesList
{
get { return _saleslist; }
set { _saleslist = value; }
}
public CollectionView AxisView
{
get { return _axisview; }
set { _axisview = value; OnPropertyChanged("AxisView"); }
}
#endregion
#region privateMethods
void LoadData()
{
_saleslist.Add(new Sales("Confectionaries", 2500.00,3000.00));
_saleslist.Add(new Sales("Plastics", 3500.00,7200.00));
_saleslist.Add(new Sales("Electronics", 7500.00,8000.00));
_saleslist.Add(new Sales("Produces", 800.00,1000.00));
_saleslist.Add(new Sales("Machinary", 18000.00, 11000.00));
}
#endregion
}
在这个类里，创建SalesList集合和导入数据。AxisView集合将提供不同的展示的chart series。在这个片段他们是"SaleValue",Volume和"ItemVariance"。
下面我们创建ModelDataSeries类继承与C1Chart dataseries，设计在run time实际绑定的属性。如下的类创建了ValueNameProperty dependency property来绑定chart series。
public class ModelDataSeries : DataSeries
{
public string ValueName
{
get { return (string)GetValue(ValueNameProperty); }
set { SetValue(ValueNameProperty, value); }
}
public static readonly DependencyProperty ValueNameProperty =
DependencyProperty.Register("ValueName", typeof(string), typeof(ModelDataSeries), new UIPropertyMetadata(OnValueNameChanged));
static void OnValueNameChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
{
var ds = (ModelDataSeries)obj;
if (string.IsNullOrEmpty(ds.ValueName))
ds.ValueBinding = null;
else
ds.ValueBinding = new Binding(ds.ValueName);
ds.Invalidate();
}
}
添加相关控件
这个时候拖一个C1Chart和listbox到MainWindow。
添加ViewMode的命名空间：xmlns:local="clr-namespace:DynamicAxisBinding"
给AxisView设置IListBox的temSource属性，如下是XAML：
ItemsSource="{Binding AxisView}"
设置图表的datacontext如下：
DataContext="{Binding}"给Sales类的Product域设置ChartData ItemNameBinding：
DataContext="{Binding}"
现在我们需要添加series到图表。我们将添加ModelDataSeries如下：
<local:ModelDataSeries ValueName="{Binding AxisView.CurrentItem}" Label="{Binding AxisView.CurrentItem}"/>.
以上是我们需要做的。详细的可以参考如下完成的XAML代码：
<Window x:Class="DynamicAxisBinding.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DynamicAxisBinding"
Title="Chart View" Height="350" Width="782" xmlns:c1chart="http://schemas.componentone.com/xaml/c1chart">
<Grid>
<ListBox Height="100" HorizontalAlignment="Left" Margin="0,73,0,0" Name="listBox1" VerticalAlignment="Top" Width="120" ItemsSource="{Binding AxisView}" />
<c1chart:C1Chart Height="264" HorizontalAlignment="Left" Margin="135,27,0,0" Name="c1Chart1" VerticalAlignment="Top" Width="613" Theme="{DynamicResource {ComponentResourceKey ResourceId=Office2007Blue, TypeInTargetAssembly=c1chart:C1Chart}}">
<c1chart:C1Chart.Data>
<c1chart:ChartData DataContext="{Binding}" ItemsSource="{Binding SalesList}" ItemNameBinding="{Binding Product}" >
<local:ModelDataSeries ValueName="{Binding AxisView.CurrentItem}" Label="{Binding AxisView.CurrentItem}"/>
</c1chart:ChartData>
</c1chart:C1Chart.Data>
<c1chart:C1ChartLegend DockPanel.Dock="Right" />
</c1chart:C1Chart>
</Grid>
</Window>
最后我们设置MainWindow的DataContext。
在Sppp.cs的Application_startup事件添加如下代码：
private void Application_Startup(object sender, StartupEventArgs e)
{
DynamicAxisBinding.ViewModel.ChartViewModel vm = new ViewModel.ChartViewModel();
MainWindow _win = new MainWindow();
_win.DataContext = vm;
_win.Show();
}
运行示例，然后从listbox选择不同的视图，图表就会展示相应的视图。
本文的示例如下所示：
Dynamic-Axis-Binding.zip (18.81 kb)
Chart的在线英文产品文档地址：
http://helpcentral.componentone.com/nethelp/c1wpfchart/#!Documents/componentonechartforwpf.htm
如果你对C1Chart感兴趣，请到我们的官网下载最新版本：/developer/componentone-winform/controls/chart
如果你有疑问，可以到GCDN论坛获得技术支持：http://gcdn.grapecity.com.cn/showforum-68.html
《C1Chart for WPF初级教程》系列文章：
