半岛外围网上直营

<ComponentOne Studio for WPF下载>

当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&quot;,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="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DynamicAxisBinding"
Title="Chart View" Height="350" Width="782" xmlns:c1chart="//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选择不同的视图，图表就会展示相应的视图。

本文示例： 

PS: 关于ComponentOne，这些产品你可以关注>>

本文转载自

葡萄城经典UI产品惠风迎春，惊喜折扣礼品送不停！优惠详情点击查看>>

强大工具Qt新版发布，慧都助力——解决方案大放送！优惠详情点击查看>>