SparklineEdit
- 6 minutes to read
Overview
The SparklineEdit is a visualization control that supports various operation modes.
The SparklineEdit control offers the following features.
Multiple operation modes
The SparklineEdit control supports the following operation modes.
- Area
- Line
- Bar
- Win-Loss
Points highlighting
You can highlight special points such as start point or max point. To learn more about Sparkline‘s special points, see SparklineEdit visual elements.
Customizable colors
Almost every element of the SparklineEdit control supports color customization. To learn more about available options, see SparklineEdit visual elements.
Optimized for in-place editing
SparklineEdit can be used standalone or as an in-place editor nested in a container control. The SparklineEditSettings class implements the in-place editing functionality. See In-place Editors to learn more.
Standalone SparklineEdit
This example demonstrates how to provide data for a standalone SparklineEdit control and adjust its main properties.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-sparkline-control-e4982.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns:System="clr-namespace:System;assembly=mscorlib"
x:Class="SparklineEdit.MainWindow"
Title="MainWindow" Height="228" Width="525" WindowStartupLocation="CenterScreen">
<Window.Resources>
<System:String x:Key="Limit1">01/02/2000</System:String>
<System:String x:Key="Limit2">01/07/2000</System:String>
</Window.Resources>
<Grid x:Name="grid">
<dxe:SparklineEdit EditValue="{Binding SourceCollection}"
PointValueMember="ValueColumn" PointArgumentMember="ArgumentColumn" >
<dxe:SparklineEdit.PointArgumentRange>
<dxe:Range Auto="False"
Limit1="{Binding Source={StaticResource ResourceKey=Limit1}}"
Limit2="{Binding Source={StaticResource ResourceKey=Limit2}}" />
</dxe:SparklineEdit.PointArgumentRange>
<dxe:SparklineEdit.StyleSettings>
<dxe:AreaSparklineStyleSettings
LineWidth="3"
AreaOpacity="0.5"
ShowMarkers="True"
MarkerSize="3"
MaxPointMarkerSize="10"
MinPointMarkerSize="9"
StartPointMarkerSize="8"
EndPointMarkerSize="7"
NegativePointMarkerSize="6"
HighlightMaxPoint="True"
HighlightMinPoint="True"
HighlightStartPoint="True"
HighlightEndPoint="True"
HighlightNegativePoints="True"
Brush="DarkBlue"
MaxPointBrush="#FFF5DA2A"
MinPointBrush="#FF2B0DEA"
StartPointBrush="#FF127A0D"
EndPointBrush="#FFF71616"
NegativePointBrush="#FF9C0404"
MarkerBrush="Black" />
</dxe:SparklineEdit.StyleSettings>
</dxe:SparklineEdit>
</Grid>
</Window>
In-place SparklineEdit
This example demonstrates how to show sparklines in a grid column. Note that in this sample an Area sparkline is displayed. To change Area to another sparkline view, replace AreaSparklineStyleSettings with either BarSparklineStyleSettings, LineSparklineStyleSettings or WinLossSparklineStyleSettings.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-show-sparklines-in-a-grid-e4986.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
x:Class="SparklineInGrid.MainWindow"
Title="MainWindow" Height="562" Width="665" >
<Grid>
<dxg:GridControl x:Name="grid" ItemsSource="{Binding SalesData}" >
<dxg:GridControl.Columns>
<dxg:GridColumn FieldName="Title" Header="Order" ReadOnly="True" Width="200"/>
<dxg:GridColumn FieldName="SparklineData" Header="Sales" Width="200">
<dxg:GridColumn.EditSettings>
<dxe:SparklineEditSettings PointArgumentMember="ArgumentColumn" PointValueMember="ValueColumn">
<dxe:SparklineEditSettings.PointArgumentRange>
<dxe:Range Auto="False" Limit1="07/17/2013" Limit2="08/15/2013" />
</dxe:SparklineEditSettings.PointArgumentRange>
<dxe:SparklineEditSettings.StyleSettings>
<dxe:AreaSparklineStyleSettings Brush="BlueViolet"
HighlightMaxPoint="True" HighlightMinPoint="True"
MaxPointBrush="Red" MinPointBrush="Blue" />
</dxe:SparklineEditSettings.StyleSettings>
</dxe:SparklineEditSettings>
</dxg:GridColumn.EditSettings>
</dxg:GridColumn>
</dxg:GridControl.Columns>
</dxg:GridControl>
</Grid>
</Window>