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/

 

本系列同步文章参考

C1Chart在WinForm平台下的同步(一):滚动条同步

C1Chart在WinForm平台下的同步(二):缩放同步

C1Chart在WinForm平台下的同步(三):TriangleMarker同步