SparklineEdit

  • 6 min to read

Overview

The SparklineEdit is a visualization control that supports various operation modes.

WPF_SparkLineEdit

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.

<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.

<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>
See Also