WPF下的C1Chart在MVVM设计模式下可以使用。这个概念的应用和你使用其它的控件一样。
在ViewMode下需要暴露集合和绑定属性,然后所有的就能很容易在Chart view的XAML中设置。
本文介绍在MVVM模式下绑定图表的最基本的步骤。
首先从创建一个新的WPF应用程序开始,给项目添加如下的Sales类:
public class Sales { public Sales(string product,double salevalue) { _product = product; _salevalue = salevalue; } #region privateFields string _product; double _salevalue; #endregion #region publicProperties public string Product { get { return _product; } set { _product = value; } } public double SaleValue { get { return _salevalue; } set { _salevalue = value; } } #endregion }
下一步创建ViewModelBase类,之后SalesViewModel类将继承它。ViewModelBase继承INotifyPropertyChanged 接口。
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(); LoadData(); } #endregion #region private Fields ObservableCollection _saleslist; #endregion #region publicProperties public ObservableCollection SalesList { get { return _saleslist; } set { _saleslist = value; OnPropertyChanged("SalesList");} } #endregion #region privateMethods void LoadData() { _saleslist.Add(new Sales("Confectionaries", 2500)); _saleslist.Add(new Sales("Plastics", 3500)); _saleslist.Add(new Sales("Electronics", 7500)); _saleslist.Add(new Sales("Produces", 800)); } #endregion }
在这个类中,我们简单的创建SalesList集合和导入数据。
接着在MainWindow上放一个C1Chart。添加ViewMode的namespace如下所示:
xmlns:local=”clr-namespace:C1ChartMVVMSample.ViewModel”
创建一个ChartViewModel资源如下:
<Window.Resources> <local:ChartViewModel x:Key="vm"/> </Window.Resources>
设置含有图表的控件的datacontext 如下:
DataContext="{StaticResource vm}"
设置图表的datacontext 如下:
DataContext="{Binding Path=SalesList}"
设置ChartData的ItemNameBinding到Sales类的Product字段如下:
ItemNameBinding="{Binding Path=Product}"
给Sales类的SaleValue field设置图表的DataSeries的ValueBinding。
ValueBinding="{Binding Path=SaleValue}"
如上是所有需要做的事情。完整的MainWindowXAML代码如下:
<Window x:Class="C1ChartMVVMSample.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" xmlns:loacl="clr-namespace:C1ChartMVVMSample.ViewModel" xmlns:c1chart="http://schemas.componentone.com/xaml/c1chart"> <Window.Resources> <loacl:ChartViewModel x:Key="vm"/> </Window.Resources> <Grid DataContext="{StaticResource vm}"> <c1chart:C1Chart Height="256" HorizontalAlignment="Left" Margin="22,26,0,0" Name="c1Chart1" VerticalAlignment="Top" Width="469" DataContext="{Binding Path=SalesList}" Theme="{DynamicResource {ComponentResourceKey ResourceId=MediaPlayer, TypeInTargetAssembly=c1chart:C1Chart}}"> <c1chart:C1Chart.Data> <c1chart:ChartData ItemNameBinding="{Binding Path=Product}"> <c1chart:DataSeries Label="Product" ValueBinding="{Binding Path=SaleValue}" ItemsSource="{Binding}" /> </c1chart:ChartData> </c1chart:C1Chart.Data> <c1chart:C1ChartLegend DockPanel.Dock="Right" /> </c1chart:C1Chart> </Grid> </Window>
在ViewModel的构造器里导入数据,在chart的设计时就可以可见了。
本文设计的Demo如下所示:
C1ChartMVVMSample.zip (17.23 kb)
如果你对C1Chart感兴趣,请到我们的官网下载最新版本:/developer
如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.grapecity.com.cn/
本系列同步文章参考: