Skip to main content

AreaSparklineStyleSettings Class

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

Namespace: DevExpress.Xpf.Editors

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

NuGet Package: DevExpress.Wpf.Core

Declaration

public class AreaSparklineStyleSettings :
    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.

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

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

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