ComponentOne Sparkline for WPF
Sparkline for WPF Overview / Sparkline Task-Based Help / Using Sparkline in Data Management Controls
In This Topic
    Using Sparkline in Data Management Controls
    In This Topic

    This section walks you through adding sparklines in data management controls like ItemsControl, ListBox or data grids. You begin with creating a new WPF application, adding code in the XAML view to display a grid-like layout with five column fields, and adding the interaction logic in the code view to display data.

    Complete the following steps to add a group of sparkline in grid as shown in the given image.

    sparkline in grids

    Step 1: Setting up the Application

    1. Create a WPF application in Visual Studio.
    2. Drag and Drop the C1Sparkline control onto the MainWindow.
    3. Edit the XAML view to include ComponentOne namespace.
      XAML
      Copy Code
      xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
      
    4. Replace the grid tags with the given code to create a XAML grid with five columns displaying different data fields namely Region, Total Sales, Sales Trend, Profit Trend and Inventory.
      XAML
      Copy Code
      <Grid>
          <Grid.Resources>
              <Style TargetType="TextBlock">
                  <Setter Property="FontSize" Value="12" />
              </Style>
          </Grid.Resources>
          <Grid Width="800" Margin="10">
              <Grid.RowDefinitions>
                  <RowDefinition Height="30"/>
                  <RowDefinition />
              </Grid.RowDefinitions>
              <Grid Background="Gray">
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="100"/>
                      <ColumnDefinition Width="100"/>
                      <ColumnDefinition Width="200"/>
                      <ColumnDefinition Width="200"/>
                      <ColumnDefinition Width="200"/>
                  </Grid.ColumnDefinitions>
                  <TextBlock Text="Region" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                  <TextBlock Text="Total Sales" Grid.Column="1" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                  <TextBlock Text="Sales Trend" Grid.Column="2" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                  <TextBlock Text="Profit Trend" Grid.Column="3" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                  <TextBlock Text="Inventory" Grid.Column="4" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
      
              </Grid>
              <ScrollViewer Grid.Row="1">
                  <ItemsControl x:Name="RegionSalesListBox" ItemsSource="{Binding Sales}" >
                      <ItemsControl.ItemTemplate>
                          <DataTemplate>
                              <Grid Background="#EFEFEF">
                                  <Grid.ColumnDefinitions>
                                      <ColumnDefinition Width="100"/>
                                      <ColumnDefinition Width="100"/>
                                      <ColumnDefinition Width="200"/>
                                      <ColumnDefinition Width="200"/>
                                      <ColumnDefinition Width="200"/>
                                  </Grid.ColumnDefinitions>
                                  <TextBlock Text="{Binding State}" Foreground="#444444" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5" />
                                  <TextBlock Text="{Binding TotalSalesFormatted}" Grid.Column="1" FontSize="16" Foreground="#444444" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5"/>
                                  <c1:C1Sparkline Data="{Binding Data}" Grid.Column="2" Height="50" Margin="10" ShowMarkers="True" MarkersColor="DarkBlue"/>
                                  <c1:C1Sparkline Data="{Binding Data}" SparklineType="Column" Grid.Column="3" Height="50" Margin="10" ShowHigh="True" ShowLow="True" LowMarkerColor="DarkRed" HighMarkerColor="DarkGreen"/>
                                  <c1:C1Sparkline Data="{Binding Data}" SparklineType="Winloss" Grid.Column="4" Height="40" Margin="10" SeriesColor="DarkGreen" NegativeColor="DarkRed" ShowNegative="True"/>
                                  <Border Grid.ColumnSpan="6" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" BorderThickness="1" BorderBrush="#CCCCCC" />
                              </Grid>
                          </DataTemplate>
                      </ItemsControl.ItemTemplate>
                  </ItemsControl>
              </ScrollViewer>
          </Grid>
      </Grid>
      

    Step 2: Adding code to display data and Sparkline in XAML grid

    1. Switch to the code view, that is MainWindow.xaml.cs file.
    2. Add the following import statement.
      Imports System.Collections.ObjectModel
      
      using System.Collections.ObjectModel;
      
    3. Edit the interaction logic for XAML as given below to display data and sparkline in the grid.
      Partial Public Class MainWindow
          Inherits Window
          Public Property Sales() As ObservableCollection(Of RegionSalesData)
              Get
                  Return m_Sales
              End Get
              Private Set(value As ObservableCollection(Of RegionSalesData))
                  m_Sales = Value
              End Set
          End Property
          Private m_Sales As ObservableCollection(Of RegionSalesData)
      
          Public Sub New()
              Dim rnd As New Random()
              Dim states As String() = New String() {"Alabama", "Alaska", "Arizona", "Idaho", "Illinois", "Indiana", _
                  "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Vermont", "Virginia", _
                  "Washington"}
              Me.Sales = New ObservableCollection(Of RegionSalesData)()
              For i As Integer = 0 To states.Length - 1
                  Dim rsd As New RegionSalesData()
                  rsd.State = states(i)
                  rsd.Data = New ObservableCollection(Of Double)()
                  For j As Integer = 0 To 11
                      Dim d As Double = rnd.[Next](-50, 50)
                      rsd.Data.Add(d)
                      rsd.TotalSales += Math.Abs(d)
                  Next
                  Me.Sales.Add(rsd)
              Next
      
              Me.DataContext = Me
          End Sub
      End Class
      
      Public Class RegionSalesData
          Public Property Data() As ObservableCollection(Of Double)
              Get
                  Return m_Data
              End Get
              Set(value As ObservableCollection(Of Double))
                  m_Data = Value
              End Set
          End Property
          Private m_Data As ObservableCollection(Of Double)
          Public Property State() As String
              Get
                  Return m_State
              End Get
              Set(value As String)
                  m_State = Value
              End Set
          End Property
          Private m_State As String
          Public Property TotalSales() As Double
              Get
                  Return m_TotalSales
              End Get
              Set(value As Double)
                  m_TotalSales = Value
              End Set
          End Property
          Private m_TotalSales As Double
          Public ReadOnly Property TotalSalesFormatted() As String
              Get
                  Return [String].Format("{0:c2}", Me.TotalSales)
              End Get
          End Property
      End Class
      
      public partial class MainWindow : Window
      {
          public ObservableCollection<RegionSalesData> Sales { get; private set; }
      
          public MainWindow()
          {
              Random rnd = new Random();
              string[] states = new string[] { "Alabama", "Alaska", "Arizona", "Idaho", "Illinois", "Indiana", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Vermont", "Virginia", "Washington" };
              this.Sales = new ObservableCollection<RegionSalesData>();
              for (int i = 0; i < states.Length; i++)
              {
                  RegionSalesData rsd = new RegionSalesData();
                  rsd.State = states[i];
                  rsd.Data = new ObservableCollection<double>();
                  for (int j = 0; j < 12; j++)
                  {
                      double d = rnd.Next(-50, 50);
                      rsd.Data.Add(d);
                      rsd.TotalSales += Math.Abs(d);
                  }
                  this.Sales.Add(rsd);
              }
      
              this.DataContext = this;
          }
      }
      
      public class RegionSalesData
      {
          public ObservableCollection<double> Data { get; set; }
          public string State { get; set; }
          public double TotalSales { get; set; }
          public string TotalSalesFormatted
          {
              get
              {
                  return String.Format("{0:c2}", this.TotalSales);
              }
          }
      }
      

    Step 3: Running the Application

    1. Debug your application to see if any error exist.
    2. Press F5 to run your application and see the output.