AreaSparklineStyleSettings Class

Changes the SparklineEdit‘s presentation to Area and implements options that define sparkline appearance.

Assembly: DevExpress.Xpf.Core.v24.2.dll

Declaration

C#
VB.NET

public class AreaSparklineStyleSettings :
    LineSparklineStyleSettings

Public Class AreaSparklineStyleSettings
    Inherits LineSparklineStyleSettings

Remarks

A AreaSparklineStyleSettings object defines the Area sparkline editor operation mode.

Sparkline Area

The following code sample demonstrates how to switch the sparkline editor operation mode to Area.

XAML

<dxe:SparklineEdit>
    <dxe:SparklineEdit.StyleSettings>
        <dxe:AreaSparklineStyleSettings/>
    </dxe:SparklineEdit.StyleSettings>
</dxe:SparklineEdit>

Tip

For the complete list of the SparklineEdit control operation modes, see SparklineEdit operation modes.

Example: Display a Standalone Sparkline

This example demonstrates how to provide data for a standalone SparklineEdit control and adjust its main properties.

View Example

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

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections
Imports System.Collections.ObjectModel
Imports System.Windows

Namespace SparklineEdit

    Partial Public Class MainWindow
        Inherits Window

        Private privateSourceCollection As IList
        Public Property SourceCollection() As IList
            Get
                Return privateSourceCollection
            End Get
            Set(ByVal value As IList)
                privateSourceCollection = value
            End Set
        End Property

        Public Sub New()
            InitializeComponent()

            grid.DataContext = Me

            GenerateData(7)
        End Sub

        Private Sub GenerateData(ByVal n As Integer)
            SourceCollection = New ObservableCollection(Of CustomElement)()

            Dim rnd As New Random()
            For i As Integer = 1 To n
                SourceCollection.Add(New CustomElement() With {.ArgumentColumn = New DateTime(2000, 1, i), .ValueColumn = rnd.Next(20), .FilteringColumn = 1})
            Next i


        End Sub
    End Class

    Public Class CustomElement
        Private privateArgumentColumn As Object
        Public Property ArgumentColumn() As Object
            Get
                Return privateArgumentColumn
            End Get
            Set(ByVal value As Object)
                privateArgumentColumn = value
            End Set
        End Property
        Private privateValueColumn As Integer
        Public Property ValueColumn() As Integer
            Get
                Return privateValueColumn
            End Get
            Set(ByVal value As Integer)
                privateValueColumn = value
            End Set
        End Property
        Private privateFilteringColumn As Integer
        Public Property FilteringColumn() As Integer
            Get
                Return privateFilteringColumn
            End Get
            Set(ByVal value As Integer)
                privateFilteringColumn = value
            End Set
        End Property
    End Class


End Namespace

using System;
using System.Collections;
using System.Collections.ObjectModel;
using System.Windows;

namespace SparklineEdit {

    public partial class MainWindow : Window {

        public IList SourceCollection { get; set; }

        public MainWindow() {
            InitializeComponent();

            grid.DataContext = this;

            GenerateData(7);
        }

        private void GenerateData(int n) {
            SourceCollection = new ObservableCollection<CustomElement>();

            Random rnd = new Random();
            for (int i = 1; i <= n; i++) {
                SourceCollection.Add(new CustomElement() {
                    ArgumentColumn = new DateTime(2000, 1, i),
                    ValueColumn = rnd.Next(20),
                    FilteringColumn = 1
                });
            }


        }
    }

    public class CustomElement {
        public object ArgumentColumn { get; set; }
        public int ValueColumn { get; set; }
        public int FilteringColumn { get; set; }
    }


}

Example: Display Area Sparklines within Grid Cells

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.

Grid - SparklineEditSettings

View Example: Show Sparklines in Grid Cells

MainWindow.xaml

<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" >
    <dxg:GridControl x:Name="grid" ItemsSource="{Binding SalesData}" >
        <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>
</Window>