国家  china

C1Chart 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",Volume"ItemVariance"。

 

下面我们创ModelDataSeries类继承与C1Chart dataseries设计run time实际绑定的属性。如下的类创建了ValueNameProperty dependency propertychart 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感兴趣,请到我们的官网下载最新版本:http://www.gcpowertools.com.cn/products/componentone_studio_winchart.htm

如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.gcpowertools.com.cn/showforum-68.html

 

C1Chart for WPF初级教程》系列文章

初遇。Getting Started(上)

初遇。Getting Started(下)

类型。穿Prada的女王(上)

类型。穿Prada的女王(下)

数据。和数据源相关的那些事(一)

数据。和数据源相关的那些事(二)

数据。和数据源相关的那些事(三)

数据。和数据源相关的那些事(四)

标记和标签。撕名牌大战(一)

标记和标签。撕名牌大战(二)

标记和标签。撕名牌大战(三)

导出(PDF,EXCEL) 

多轴图表 

轴的动态绑定

实现轴注释的高级自定义

颜色和大小。数据点的自定义(一)

符号。数据点的自定义(二)

基础介绍。XAML动画(一)

基础介绍。XAML动画(二)

基础介绍。XAML动画(三)

基础介绍。XAML动画(四)

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/C1ChartWPF_DynamicAxisBinding.aspx

不允许评论