<C1 Studio Enterprise下載>

WPF下的C1Chart在MVVM設(shè)計(jì)模式下可以使用，這個概念的應(yīng)用和您使用其它的控件一樣。在ViewMode下需要暴露集合和綁定屬性，然后所有的就能很容易在Chart view的XAML中設(shè)置。本文介紹在MVVM模式下綁定圖表的最基本的步驟。

首先從創(chuàng)建一個新的WPF應(yīng)用程序開始，給項(xiàng)目添加如下的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
}

下一步創(chuàng)建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));
}
}
}

現(xiàn)在創(chuàng)建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
}

在這個類中，我們簡單的創(chuàng)建SalesList集合和導(dǎo)入數(shù)據(jù)。接著在MainWindow上放一個C1Chart。添加ViewMode的namespace如下所示：

xmlns:local=”clr-namespace:C1ChartMVVMSample.ViewModel”

創(chuàng)建一個ChartViewModel資源如下：

<Window.Resources>
<local:ChartViewModel x:Key="vm"/>
</Window.Resources>

設(shè)置含有圖表的控件的datacontext如下：

DataContext="{StaticResource vm}"

設(shè)置圖表的datacontext如下：

DataContext="{Binding Path=SalesList}"

設(shè)置ChartData的ItemNameBinding到Sales類的Product字段如下：

ItemNameBinding="{Binding Path=Product}"

給Sales類的SaleValue field設(shè)置圖表的DataSeries的ValueBinding。

ValueBinding="{Binding Path=SaleValue}"

如上是所有需要做的事情。完整的MainWindowXAML代碼如下：

<Window x:Class="C1ChartMVVMSample.MainWindow"
xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="//schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
xmlns:loacl="clr-namespace:C1ChartMVVMSample.ViewModel"
xmlns:c1chart="//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的構(gòu)造器里導(dǎo)入數(shù)據(jù)，在chart的設(shè)計(jì)時就可以可見了。本文設(shè)計(jì)的Demo如下所示：

PS: 關(guān)于ComponentOne，這些產(chǎn)品你可以關(guān)注>>

本文轉(zhuǎn)載自

葡萄城經(jīng)典UI產(chǎn)品新年大促，驚喜折扣禮品送不停！優(yōu)惠詳情點(diǎn)擊查看>>

新年新禧新氣象，送禮送福送優(yōu)惠！優(yōu)惠詳情點(diǎn)擊查看>>