Using Sparkline in Data Management Controls

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.

Step 1: Setting up the Application
Step 2: Adding code to display data and Sparkline in XAML grid
Step 3: Running the Application

sparkline in grids

Step 1: Setting up the Application

Create a WPF application in Visual Studio.
Drag and Drop the C1Sparkline control onto the MainWindow.

Edit the XAML view to include ComponentOne namespace.

XAML	Copy Code
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"

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>

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

Switch to the code view, that is MainWindow.xaml.cs file.

Add the following import statement.

Visual Basic
C#

Visual Basic

Imports System.Collections.ObjectModel

using System.Collections.ObjectModel;

Edit the interaction logic for XAML as given below to display data and sparkline in the grid.

Visual Basic
C#

Visual Basic

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

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