Sparkline for UWP | ComponentOne
Sparkline for UWP Tutorials / Adding C1Sparkline to a List Box
In This Topic
    Adding C1Sparkline to a List Box
    In This Topic

    This section walks you through adding sparklines in a ListBox. You begin with creating a new UWP 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 the data.

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

    1. Setting up the application
    2. Adding controls in XAML
    3. Adding and displaying data in grid
    4. Running the application

    Setting up the application

    To set up the application, follow these steps:

    1. Create a new project and select Blank App (Universal Windows) in Visual Studio.
    2. Insert the following markup between the <Grid></Grid> tags. This will create the grid's resources.
      XAML
      Copy Code
      <Grid.Resources>
          <Style TargetType="TextBlock">
              <Setter Property="FontSize" Value="12" />
          </Style>
      </Grid.Resources>
      
    Back to Top

    Adding controls in XAML

    1. Add the following markup to create a XAML grid with five columns containing TextBlock controls, and a separate ScrollViewer control which contains the RegionSalesListBox.
      XAML
      Copy Code
      <Grid Width="800" Margin="40">
        <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>
                  <Border Grid.ColumnSpan="6" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" BorderThickness="1" BorderBrush="#CCCCCC" />
                </Grid>
              </DataTemplate>
            </ItemsControl.ItemTemplate>
          </ItemsControl>
        </ScrollViewer>
      </Grid>
      
    2. Add two TextBlocks and three C1Sparline controls after the </Grid.ColumnDefinitions> tag inside the <DataTemplate></DataTemplate> tags.
      XAML
      Copy Code
      <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"/>
      <Sparkline:C1Sparkline Data="{Binding Data}" Grid.Column="2" Height="50" Margin="10" ShowMarkers="True" MarkersColor="DarkBlue"/>
      <Sparkline:C1Sparkline Data="{Binding Data}" SparklineType="Column" Grid.Column="3" Height="50" Margin="10" ShowHigh="True" ShowLow="True" LowMarkerColor="DarkRed" HighMarkerColor="DarkGreen"/>
      <Sparkline:C1Sparkline Data="{Binding Data}" SparklineType="Winloss" Grid.Column="4" Height="40" Margin="10" SeriesColor="DarkGreen" NegativeColor="DarkRed" ShowNegative="True"/>
      
    Back to Top

    Adding and displaying data in grid

    1. Switch to the code view and add the following namespace.
      C#
      Copy Code
      using System.Collections.ObjectModel;
      
    2. Add the following code to the MainPage class.
      C#
      Copy Code
      public ObservableCollection<RegionSalesData> Sales { get; private set; }
      
    3. Add the following code to the MainPage class constructor.
      C#
      Copy Code
      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;
      
    4. Add a new class, RegionSalesData, and add the following code to define the type of data to be used.
      C#
      Copy Code
       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);
           }
         }
       }
      
    Back to Top

    Running the application

    1. Debug your application.
    2. Press F5 to run your application and see the output.