How To Hide The Legend In Static And Dynamic Column Chart In WPF With MVVM Pattern Using Prism Library

I hope you have some knowledge of WPF and XAML before starting.

Purpose

Sometimes, the client does not need the legend in the chart, which can increase your chart plotting area as well.

To know more about MVVM using prism, follow- http://www.c-sharpcorner.com/article/getting-started-mvvm-pattern-using-prism-library-in-wpf/.

Before starting, I hope you added the ‘Prism.Unity’ from ‘NuGet Packages’ and for charting, we will do the same for 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 Package.

Step 3

For charting controls, type ‘System.Windows.Controls.DataVisualization‘ in browse section, select the package and click on 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.

• Create a View Named ‘TestView.xaml’ in the Views folder.




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




• Create a ViewModel Named ‘TestViewModel.xaml’ in the ViewModels folder.

Step 6

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

Create a class for chart binding with the key and value properties for Axis-X and Y.

class Keyvalue : BindableBase
    {
        private string _Key;
        public string Key { get { return _Key; } set { SetProperty(ref _Key, value); } }

        private int _Value;
        public int Value { get { return _Value; } set { SetProperty(ref _Value, value); } }
    }

Create a list type property named DataList to store the multiple values of the keyvalue class 

class TestModel : BindableBase
    {
        private List<Keyvalue> _DataList;
        public List<Keyvalue> DataList { get { return _DataList; } set { SetProperty(ref _DataList, value); } }
    }

Step 7

On the TetsView page, we like to 

Access the assembly of charting on the top of the view .

xmlns:ChartToolKit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"

Create 2 Group Boxes with different header names for static and dynamic charts respectively, where 1st will contain a chart with a column series with an itemsource, IndependentvaluePath and DependentvaluePath property.

Note

Here, 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.

2nd groupbox didn’t contain anything, as it just has a name.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <GroupBox Grid.Row="0" Header="Static Column Chart">
        <ChartToolKit:Chart>
            <ChartToolKit:ColumnSeries ItemsSource="{Binding Path=TestModel.DataList,
            UpdateSourceTrigger=PropertyChanged,Mode=TwoWay, NotifyOnSourceUpdated=True }"
            IndependentValuePath="Key"
            DependentValuePath="Value">
            </ChartToolKit:ColumnSeries>
        </ChartToolKit:Chart>
    </GroupBox>
    <GroupBox  Grid.Row="1" Header="Dynamic Column Chart" x:Name="GroupBoxDynamicChart">
    </GroupBox>
</Grid>

Step 8

Add PrismMVVMTestProject.ViewModels namespace and bind the data context of TestView page to the ViewModel named ‘TestViewModel’ and pass the 2^nd groupbox into it. 

using System.Windows;
using PrismMVVMTestProject.ViewModels;
namespace PrismMVVMTestProject.Views
{
    /// <summary>
    /// Interaction logic for TestView.xaml
    /// </summary>
    public partial class TestView : Window
    {
        public TestView()
        {
            InitializeComponent();
            this.DataContext = new TestViewModel(GroupBoxDynamicChart);
        }
    }
}

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.
   

   List<Keyvalue> tempList = new List<Keyvalue>();
               tempList.Add(new Keyvalue() { Key = "Rs.100", Value = 50 });
               tempList.Add(new Keyvalue() { Key = "Rs.500", Value = 18 });
               tempList.Add(new Keyvalue() { Key = "Rs.1000", Value = 25 });
               tempList.Add(new Keyvalue() { Key = "Rs.2000", Value = 5 });

1. Assign ‘tempList’ to ‘TestModel.DataList’ to bind the static chart.
   

   //Bind the sttaic Chart
   
   TestModel.DataList = tempList;

2. Create the dynamic chart and column series.
3. Bind the item source of the column series with ‘tempList’.
4. To bind the IndependentvaluePath & DependentvaluePath property, we use ‘Key’ and ‘Value’ of KeyValue Class same as in static chart.
5. Add the series in to the chart and chart into the groupbox.

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

Run the page.

Now, if want to hide the legend of series 1; either in static chart or dynamic chart, then you need to do it via style, where you change the ‘LegendStyle’ property of the chart with custom style, where width and height will be 0.

For static chart

• Create a style with the width and the height property and both holds the value 0.
• Add that style inside the ‘LegendStyle’ property tag of the chart.
  

  <ChartToolKit:Chart.LegendStyle>
                      <Style x:Name="LegendHideStyle" TargetType="Control">
                          <Setter Property="Width" Value="0"/>
                          <Setter Property="Height" Value="0"/>
                      </Style>
                  </ChartToolKit:Chart.LegendStyle>

For dynamic chart-TestViewModel

• Add a namespace named ‘Windows’ to add a style in ‘TestViewModel’.
  

  using System.Windows;

• Now, create a style with the width, height property and both holds the value 0.
• Add that style to the ‘LegendStyle’ property of the chart before adding it to the groupbox.
  

  Style styleLegand = new Style { TargetType = typeof(Control) };
  styleLegand.Setters.Add(new Setter(Control.WidthProperty, 0d));
  styleLegand.Setters.Add(new Setter(Control.HeightProperty, 0d));
  dynamicChart.LegendStyle = styleLegand;

Now, you can see the output, where we don’t have the legend and got more space for the chart in comparison to the earlier output.