# Using MVVM

## Content

**Chart for WPF and Silverlight** supports the MVVM (Model-View-ViewModel) design pattern. The entire chart can be declaratively written and bound to in XAML using native binding techniques.

The following steps demonstrate how to use [C1Chart](/componentone/api/wpf/online-chart/dotnet-framework-api/C1.WPF.C1Chart.4.6.2/C1.WPF.C1Chart.C1Chart.html) in an MVVM-designed application in WPF or Silverlight.

1. Create a new class named **Sale**, which implements the **INotifyPropertyChanged** interface.

```csharp
public class Sale : INotifyPropertyChanged
{
    private string _product;
    private double _value;
    private double _discount;
    public Sale(string product, double value, double discount)
   {
        Product = product;
        Value = value;
        Discount = discount;
    }
    public string Product
    {
        get { return _product; }
        set
        {
            if (_product != value)
            {
                _product = value;
                OnPropertyChanged("Product");
           }
        }
    }
    public double Value
    {
        get { return _value; }
        set
        {
            if (_value != value)
            {
                _value = value;
                OnPropertyChanged("Value");
            }
        }
    }
    public double Discount
    {
        get { return _discount; }
        set
        {
            if (_discount != value)
            {
                _discount = value;
                OnPropertyChanged("Discount");
            }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}
```

2. Create a new class named **SaleViewModel**. This will act as the **DataContext** for the **View** which will contain **C1Chart**.

```csharp
public class SaleViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Sale> _sales = new ObservableCollection<Sale>();
    public SaleViewModel()
    {
        //load data
        LoadData();
    }
   public ObservableCollection<Sale> Sales
    {
        get { return _sales; }
    }
    public void LoadData()
    {
        //TODO: load data from your data source
        _sales.Add(new Sale("Bikes", 23812.89, 12479.44));
        _sales.Add(new Sale("Shirts", 79752.21, 19856.86));
        _sales.Add(new Sale("Helmets", 63792.05, 16402.94));
        _sales.Add(new Sale("Pads", 30027.79, 10495.43));
    }
    public event PropertyChangedEventHandler PropertyChanged;
   void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}
```

This class includes an ObservableCollection, Sales, as well as a method to generate mock data upon initialization.

3. Switch to Source view and create a new WPF or Silverlight UserControl named SaleView.xaml. Add the following XAML above the LayoutRoot grid:

    ```xml
    <UserControl.Resources>
        <local:SaleViewModel x:Key="viewModel" />
    </UserControl.Resources>
    <UserControl.DataContext>
        <Binding Source="{StaticResource viewModel}"/>
    </UserControl.DataContext>
    ```

This XAML declares a **SaleViewModel** as a Resource and sets it to the **DataContext** of the **UserControl**. At runtime, the **View** will now be bound to the **ViewModel**. Controls within the View can now bind to public properties of the ViewModel.

3. Add a **C1Chart** control to the page.
4. Replace the default XAML for **C1Chart** with the following code:

```xml
<c1:C1Chart ChartType="Column" Name="c1Chart1" Palette="Module">
    <c1:C1Chart.Data>
       <c1:ChartData ItemsSource="{Binding Sales}" ItemNameBinding="{Binding Product}">
            <c1:DataSeries Label="Value" ValueBinding="{Binding Value}" />
            <c1:DataSeries Label="Discount" ValueBinding="{Binding Discount}" />
        </c1:ChartData>
    </c1:C1Chart.Data>
    <c1:C1ChartLegend />
</c1:C1Chart>
```

This XAML defines a **C1Chart** with two data series. The **ChartData**’s **ItemsSource** is set to the collection of **Sales** objects exposed by our **ViewModel**. Each **DataSeries** has its **ValueBinding** property set and we also set the **ItemNameBinding** to display our product names along the X-axis.

>type=note
> **Note**: If you are using **XYDataSeries**, then you should specify the **XValueBinding** for each series and you should not set the **ItemNameBinding**.

5. Open the **App.xaml.cs** application configuration file and in the **Application\_Startup** event, replace the following code:

```EXAMPLE
private void Application_Startup(object sender, StartupEventArgs e)
{
    this.RootVisual = new Views.SaleView();
}
```

This code sets the RootVisual to show your SaleView upon startup.

5. Run your application and observe that the **C1Chart** appears to be bound to the **Sales** data from the **ViewModel**.

![](https://cdn.mescius.io/document-site-files/images/9e1b6c55-78c5-4648-896a-23e777db9f27/images/graphics/databindingtutorials/salesapp.png)