Post
Ask Question

How To Customize Static And Dynamic Column Chart In WPF With MVVM Pattern Using Prism Library

Before starting, I presume that you have some knowledge of WPF and XAML.

Getting Started: MVVM Pattern Using Prism Library in WPF

Before starting, I hope you have added ‘Prism.Unity’ from ‘NuGet Packages’ and for charting, we will do the same using the charting controls package.

Note - In this article, I am using Visual Studio 2015.

Step 1

Create a project named ‘PrismMVVMTestProject’ of WPF Application.


Step 2

Right click on the project and select "Manage NuGet Packages".


Step 3

  1. For charting controls, type ‘System.Windows.Controls.DataVisualization ‘ in browse section, select that package, and click "Install" button.


    Afterwards, the package is installed successfully.


    Now, you can see the newly added DLLs in the reference section of the project.



Step 4

It’s a better approach to create three different folders in the project for Model, View, and View Model respectively.


Step 5

Create pages in all the folders.

  1. Create a View named ‘TestView.xaml’ in Views folder.



  2. Create a Model named ‘TestModel.xaml’ in Models folder.



  3. Create a ViewModel named ‘TestViewModel.xaml’ in ViewModels folder.


Step 6

Add the namespace named Prism.MVVM in the TestModel page to inherit the class named ‘Bindable Base’.

  1. Create a class for chart binding with the key and the value properties for Axis-X and Y.
    1. class Keyvalue : BindableBase  
    2.     {  
    3.         private string _Key;  
    4.         public string Key { get { return _Key; } set { SetProperty(ref _Key, value); } }  
    5.   
    6.         private int _Value;  
    7.         public int Value { get { return _Value; } set { SetProperty(ref _Value, value); } }  
    8.     }  
  2. Create a list type property named DataList to store multiple values of keyvalue class.
    1. class TestModel : BindableBase  
    2.     {  
    3.         private List<Keyvalue> _DataList;  
    4.         public List<Keyvalue> DataList { get { return _DataList; } set { SetProperty(ref _DataList, value); } }  
    5.     }  

Step 7

On the TetsView page, we do the following.

  1. Access the assembly of charting on the top of the View.
    1. xmlns:ChartToolKit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"  
  2. Create 2 group boxes with different header names for static and dynamic charts respectively, where the first will contain a chart with a column series with an itemsource, IndependentvaluePath and DependentvaluePath property.

    Note - Here, an Itemsource property is bound with ‘DataList’ property, which we have created in TestModel class and for IndependentvaluePath & DependentvaluePath property, we use ‘Key’ and ‘Value’ of KeyValue class.

  3. The 2nd groupbox didn’t contain anything; as it just has a name.
    1. <Grid>  
    2.     <Grid.RowDefinitions>  
    3.         <RowDefinition></RowDefinition>  
    4.         <RowDefinition></RowDefinition>  
    5.     </Grid.RowDefinitions>  
    6.     <GroupBox Grid.Row="0" Header="Static Column Chart">  
    7.         <ChartToolKit:Chart>  
    8.             <ChartToolKit:ColumnSeries ItemsSource="{Binding Path=TestModel.DataList,  
    9.             UpdateSourceTrigger=PropertyChanged,Mode=TwoWay, NotifyOnSourceUpdated=True }"   
    10.             IndependentValuePath="Key"  
    11.             DependentValuePath="Value">  
    12.             </ChartToolKit:ColumnSeries>  
    13.         </ChartToolKit:Chart>  
    14.     </GroupBox>  
    15.     <GroupBox  Grid.Row="1" Header="Dynamic Column Chart" x:Name="GroupBoxDynamicChart">  
    16.     </GroupBox>  
    17. </Grid>  

Step 8

Add PrismMVVMTestProject.ViewModels namespace and bind Data Context of TestView page to the ViewModel named ‘TestViewModel’. and pass the second groupbox into it.

  1. using System.Windows;  
  2. using PrismMVVMTestProject.ViewModels;  
  3. namespace PrismMVVMTestProject.Views  
  4. {  
  5.     /// <summary>  
  6.     /// Interaction logic for TestView.xaml  
  7.     /// </summary>  
  8.     public partial class TestView : Window  
  9.     {  
  10.         public TestView()  
  11.         {  
  12.             InitializeComponent();  
  13.             this.DataContext = new TestViewModel(GroupBoxDynamicChart);  
  14.         }  
  15.     }  
  16. }  

Step 9

  1. Add the namespace named ‘Prism.MVVM’ and ‘PrismMVVMTestProject.Models’ in the TestViewModel page to inherit the class named ‘Bindable Base’ and access TestModel in this page.
  2. Create a property of TestModel class object where ‘ref‘ parameter allows you to update its value.
  3. Create a local list of Keyvalue class named ‘tempList’ and add some data into it.
    1. List<Keyvalue> tempList = new List<Keyvalue>();  
    2.             tempList.Add(new Keyvalue() { Key = "Rs.100", Value = 50 });  
    3.             tempList.Add(new Keyvalue() { Key = "Rs.500", Value = 18 });  
    4.             tempList.Add(new Keyvalue() { Key = "Rs.1000", Value = 25 });  
    5.             tempList.Add(new Keyvalue() { Key = "Rs.2000", Value = 5 });  
  4. Assign ‘tempList’ to ‘TestModel.DataList’ to bind the static chart.
    1. //Bind the sttaic Chart  
    2. TestModel.DataList = tempList;  
  5. Create the dynamic chart and column series.
  6. Bind the item source of column series with ‘tempList’.
  7. To bind the IndependentvaluePath & DependentvaluePath property, we use ‘Key’ and ‘Value’ of KeyValue Class same as in static chart.
  8. Add the series in to the chart and chart into the groupbox.

     

    1. //Create the Dynamic Chart, Bind it and add it into the 2nd GroupBox  
    2.             Chart dynamicChart = new Chart();  
    3.             ColumnSeries columnseries = new ColumnSeries();  
    4.             columnseries.ItemsSource = tempList;  
    5.             columnseries.DependentValuePath = "Value";  
    6.             columnseries.IndependentValuePath = "Key";  
    7.             dynamicChart.Series.Add(columnseries);  
    8.             GroupBoxDynamicChart.Content = dynamicChart;  

     

Run the page,


Change the Chart Background color

If you want to change the background color of the chart, then you can do like in-

  1. Static Chart
    1. <ChartToolKit:Chart Background="Cyan" >  
  1. Dynamic Chart
    1. Chart dynamicChart = new Chart() { Background = Brushes.Cyan };  

Output


Change the Background color of Plot Area of chart

If you want to change the background color of the plot area of chart then you can do it like this,

  1. Static Chart
    1. <ChartToolKit:Chart.PlotAreaStyle>  
    2.                     <Style x:Name="PlotcolorStyle" TargetType="Grid">  
    3.                         <Setter Property="Background" Value="Yellow"/>  
    4.                     </Style>  
    5.                 </ChartToolKit:Chart.PlotAreaStyle>  

  1. Dynamic Chart
    1. Style style = new Style { TargetType = typeof(Grid) };  
    2.             style.Setters.Add(new Setter(Grid.BackgroundProperty, Brushes.Yellow));  
    3.             dynamicChart.PlotAreaStyle = style;  

Output


Change the Background and Border color of column Bar of series

If you want to change the Background and Border color of column Bar of series then you can do, as shown below,

  1. Static Chart
    1. <ChartToolKit:ColumnSeries.DataPointStyle>  
    2.                         <Style x:Name="colorStyle" TargetType="Control">  
    3.                             <Setter Property="BorderBrush" Value="Red"/>  
    4.                             <Setter Property="Background" Value="Green"/>  
    5.                         </Style>  
    6.                     </ChartToolKit:ColumnSeries.DataPointStyle>  

  1. Dynamic Chart
    1. style = new Style { TargetType = typeof(ColumnDataPoint) };  
    2. style.Setters.Add(new Setter(ColumnDataPoint.BorderBrushProperty, Brushes.Red));  
    3. style.Setters.Add(new Setter(ColumnDataPoint.BackgroundProperty, Brushes.Green));  
    4. series.DataPointStyle = style;  

Output


Note

You can also change the border thickness size and background color as solid instead of gradient color.

Change the axis label color, size and rotation with title in both axis of chart

If you want to change axis label color, size and rotation with title in both axes of chart then you can do it like this-

  1. Static Chart
    1. <ChartToolKit:Chart.Axes>  
    2.                     <ChartToolKit:CategoryAxis Orientation="X" Title="Currency (in rupees)" Foreground="Brown">  
    3.                         <ChartToolKit:CategoryAxis.AxisLabelStyle>  
    4.                             <Style x:Name="labelStyleX" TargetType="Control">  
    5.                                 <Setter Property="FontSize" Value="15"/>  
    6.                                 <Setter Property="LayoutTransform" >  
    7.                                     <Setter.Value>  
    8.                                         <RotateTransform  Angle="90" />  
    9.                                     </Setter.Value>  
    10.                                 </Setter>  
    11.                                 <Setter Property="Foreground" Value="Blue"/>  
    12.                             </Style>  
    13.                             
    14.                         </ChartToolKit:CategoryAxis.AxisLabelStyle>  
    15.                     </ChartToolKit:CategoryAxis>  
    16.                     <ChartToolKit:LinearAxis Orientation="y" Title="Number of Notes" Foreground="Blue">  
    17.                         <ChartToolKit:LinearAxis.AxisLabelStyle>  
    18.                             <Style x:Name="labelStyleY" TargetType="Control">  
    19.                                 <Setter Property="FontSize" Value="15"/>  
    20.                                 <Setter Property="Foreground" Value="Brown"/>  
    21.                             </Style>  
    22.                         </ChartToolKit:LinearAxis.AxisLabelStyle>  
    23.                     </ChartToolKit:LinearAxis>  
    24.                 </ChartToolKit:Chart.Axes>  

  1. Dynamic Chart

    1. CategoryAxis axisX = new CategoryAxis()  
    2.             {  
    3.                 Orientation = AxisOrientation.X,  
    4.                 Title = "Currency (in rupees)",  
    5.                 Foreground = Brushes.Brown  
    6.             };  
    7.   
    8.             style = new Style { TargetType = typeof(AxisLabel) };  
    9.             style.Setters.Add(new Setter(AxisLabel.LayoutTransformProperty, new RotateTransform() { Angle = 90 }));  
    10.             style.Setters.Add(new Setter(AxisLabel.FontSizeProperty, 15.0));  
    11.             style.Setters.Add(new Setter(AxisLabel.ForegroundProperty, Brushes.Blue));  
    12.             axisX.AxisLabelStyle = style;  
    13.   
    14.   
    15.             LinearAxis axisY = new LinearAxis()  
    16.             {  
    17.                 Orientation = AxisOrientation.Y,  
    18.                 Title = "Number of Notes",  
    19.                 Foreground = Brushes.Blue  
    20.             };  
    21.             style = new Style { TargetType = typeof(AxisLabel) };  
    22.             style.Setters.Add(new Setter(AxisLabel.FontSizeProperty, 15.0));  
    23.             style.Setters.Add(new Setter(AxisLabel.ForegroundProperty, Brushes.Brown));  
    24.             axisY.AxisLabelStyle = style;  
    25.   
    26.             dynamicChart.Axes.Add(axisX);  
    27.             dynamicChart.Axes.Add(axisY);   


Output


Similar Articles