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.
To set up the application, follow these steps:
XAML |
Copy Code
|
---|---|
<Grid.Resources> <Style TargetType="TextBlock"> <Setter Property="FontSize" Value="12" /> </Style> </Grid.Resources> |
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> |
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"/> |
C# |
Copy Code
|
---|---|
using System.Collections.ObjectModel;
|
C# |
Copy Code
|
---|---|
public ObservableCollection<RegionSalesData> Sales { get; private set; } |
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; |
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); } } } |