Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Diagram.SeriesItemTemplateSelector Property

Gets or sets the custom logic for selecting a data template that converts a model object to a series.

Namespace: DevExpress.Xpf.Charts

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

NuGet Package: DevExpress.Wpf.Charts

#Declaration

public DataTemplateSelector SeriesItemTemplateSelector { get; set; }

#Property Value

Type Description
DataTemplateSelector

The DataTemplateSelector descendant class object that provides logic and returns a DataTemplate. The default is null (Nothing in Visual Basic).

#Example

This example demonstrates how to bind series view models to a chart. Note that you can bind secondary axes and custom labels using the same approach.

To bind series view models to a chart, use the Diagram.SeriesItemsSource property. To configure how the series view model is converted to a series on a chart, use Diagram.SeriesItemTemplate or Diagram.SeriesItemTemplateSelector. In this example, the Template Selector is used to convert the selected series type from Line to Range Area.

View Example

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MvvmChart"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" x:Class="MvvmChart.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="399" Width="656">
    <Grid>
        <!--region ChartView-->
        <dxc:ChartControl x:Name="chart" 
                          SelectionMode="Extended" 
                          SeriesSelectionMode="Series" 
                          SelectedItem="{Binding Mode=TwoWay, Path=SelectedWeather}">
            <dxc:XYDiagram2D SeriesItemsSource="{Binding Weather}">
                <dxc:XYDiagram2D.SeriesItemTemplateSelector>
                    <local:WeatherTemplateSelector>
                        <local:WeatherTemplateSelector.MinMaxSeriesTemplate>
                            <DataTemplate>
                                <dxc:RangeAreaSeries2D DataSource="{Binding Data}"
                                               ArgumentDataMember="Date"
                                               ValueDataMember="MinValue"
                                               Value2DataMember="MaxValue"
                            Marker1Visible="False"
                                               Marker2Visible="False"
                                               Transparency="0.7"
                                               CrosshairLabelPattern="{}{S} Day Temperature:&#10;Min: {V1}°C&#10;Max: {V2}°C">
                                    <dxc:RangeAreaSeries2D.SeriesAnimation>
                                        <dxc:Area2DStretchFromNearAnimation Duration="0:0:1.200"/>
                                    </dxc:RangeAreaSeries2D.SeriesAnimation>
                                </dxc:RangeAreaSeries2D>
                            </DataTemplate>
                        </local:WeatherTemplateSelector.MinMaxSeriesTemplate>
                        <local:WeatherTemplateSelector.AvgSeriesTemplate>
                            <DataTemplate>
                                <dxc:LineSeries2D DataSource="{Binding Data}"
                                               ArgumentDataMember="Date"
                                               ValueDataMember="AvgValue"
                                               MarkerVisible="True"
                                               CrosshairLabelPattern="{}{S} Day Temperature: Avg: {V1}°C">
                                </dxc:LineSeries2D>
                            </DataTemplate>
                        </local:WeatherTemplateSelector.AvgSeriesTemplate>
                    </local:WeatherTemplateSelector>
                </dxc:XYDiagram2D.SeriesItemTemplateSelector>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
        <!--region ChartView-->
    </Grid>
</Window>
See Also