Sparkline for WPF
In This Topic
    Quick Start
    In This Topic

    This quick start guides you through the steps of creating a simple Sparkline application by populating its data from an enumerable collection.

    The following example uses the temperatures recorded for eight consecutive days in Canada to visualize the temperature fluctuations in the area and the following output appears after executing the application.

    Displays the Sparkline control

    Set Up the Application

    1. Create a new WPF Application and set the project framework from Additional Information window.
    2. Install C1.WPF.Sparkline package using the NuGet Package Manager. The Sparkline control gets added in the Toolbox once the package is installed.
    3. Edit the XAML view to include the following namespace.
      XAML
      Copy Code
      xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" 
      
    4. Drag and drop the Sparkline control from Toolbox onto your MainWindow. The Sparkline control gets added to the application. Add a few basic properties of Sparkline using the following code.

      XAML
      Copy Code
      <c1:C1Sparkline x:Name="sparkline" Height="250" Width="250"/>
      

    Back to Top

    Bind to Data Source

    1. In the Solution Explorer, right-click your project name and select Add | Class.
    2. Specify the name of the class, say SampleData, and click Add.
    3. Create an enumerable collection of numeric data points to be plotted on the Sparkline chart. Here, we have created a class named SampleData to be used as a data source with the enumerable collection.
      C#
      Copy Code
      public class SampleData
      {
          public List<double> DefaultData
          {
              get
              {
                  List<double> data = new List<double>() { 1.0, -2.0, -1.0, 6.0, 4.0, -4.0, 3.0, 8.0 };
                  return data;
              }
          }     
      }
      
    4. Switch to the MainWindow.xaml.cs file and bind Sparkline to the data source using Data property of the C1Sparkline class as shown in the following code snippet.

      C#
      Copy Code
      public partial class MainWindow : Window
      {
          private SampleData sampleData = new SampleData();
          public MainWindow()
          {
              InitializeComponent();
              //Data binding using Data property
              sparkline.Data = sampleData.DefaultData;          
          }
      }
      
    5. Run the application and observe how the Sparkline control appears at runtime.

    Back to Top