ChartBase.SeriesItemTemplateSelector Property

Gets or sets an object that selects a template applied to series.

Namespace: DevExpress.WinUI.Charts

Assembly: DevExpress.WinUI.Charts.v23.2.dll

NuGet Package: DevExpress.WinUI

Declaration

C#

[DP(null, Handler = "OnSeriesItemTemplateSelectorChanged")]
public DataTemplateSelector SeriesItemTemplateSelector { get; set; }

VB.NET

<DP(Nothing, Handler:="OnSeriesItemTemplateSelectorChanged")>
Public Property SeriesItemTemplateSelector As DataTemplateSelector

Property Value

Type	Description
DataTemplateSelector	An object that selects a template based on custom logic.

Remarks

You can apply templates to configure the settings of series generated from the series source.

If you have multiple templates that control series behavior and appearance, use SeriesItemTemplateSelector to choose an appropriate template. To do so, derive from the DataTemplateSelector class, implement the SelectTemplateCore method that returns a template that meets the required condition, and assign it to the SeriesItemTemplateSelector property.

To apply the same template to all series, use the ChartBase.SeriesItemTemplate property.

The SeriesItemTemplateSelector property has a higher priority over the SeriesItemTemplate property. If both properties are specified, the chart uses the template returned by the template selector to render the series. If the template selector returns null, the SeriesItemTemplate is used.

Example

The following example creates a chart with multiple series. The chart uses a template selector to choose a series view (Bar or Line) based on the View Model’s property:

XAML

<Window
    x:Class="SeriesTemplateSelection.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SeriesTemplateSelection"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Charts="using:DevExpress.WinUI.Charts"
    mc:Ignorable="d">
    <Grid>
        <Grid.Resources>
            <DataTemplate x:Key="LineSeriesTemplate" x:DataType="local:SeriesViewModel">
                <Charts:Series DisplayName="{x:Bind Name}">
                    <Charts:Series.View>
                        <Charts:LineSeriesView ShowMarkers="True"  
                                               ToolTipPointPattern="{}{A}: ${V}K"/>
                    </Charts:Series.View>
                    <Charts:Series.Data>
                        <Charts:DataSource
                                PointSource="{x:Bind DataPoints}"
                                ArgumentDataMember="Argument"
                                ValueDataMember="Value" />
                    </Charts:Series.Data>
                </Charts:Series>
            </DataTemplate>
            <DataTemplate x:Key="BarSeriesTemplate" x:DataType="local:SeriesViewModel">
                <Charts:Series DisplayName="{x:Bind Name}">
                    <Charts:Series.View>
                        <Charts:BarSeriesView ToolTipPointPattern="{}{A}: ${V}K"/>
                    </Charts:Series.View>
                    <Charts:Series.Data>
                        <Charts:DataSource
                                PointSource="{x:Bind DataPoints}"
                                ArgumentDataMember="Argument"
                                ValueDataMember="Value" />
                    </Charts:Series.Data>
                </Charts:Series>
            </DataTemplate>
            <local:SeriesTemplateSelector
                    x:Key="selector"
                    LineSeriesTemplate="{StaticResource LineSeriesTemplate}"
                    BarSeriesTemplate="{StaticResource BarSeriesTemplate}" />
        </Grid.Resources>
        <Charts:CartesianChart x:Name="chart"
                               ToolTipEnabled="True"
                               SeriesSource="{x:Bind ViewModel.SeriesData}" 
                               SeriesItemTemplateSelector="{StaticResource selector}">
            <Charts:CartesianChart.AxisY>
                <Charts:AxisY WholeRangeAutoCorrect="False" 
                              WholeRangeEndValue="150" 
                              GridSpacingAuto="False" 
                              GridSpacing="20" />
            </Charts:CartesianChart.AxisY>
            <Charts:CartesianChart.Legend>
                <Charts:Legend />
            </Charts:CartesianChart.Legend>
        </Charts:CartesianChart>
    </Grid>
</Window>

C#

using DevExpress.Mvvm;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System.Collections.Generic;

namespace SeriesTemplateSelection {

    public sealed partial class MainWindow : Window {
        public ChartViewModel ViewModel { get; } = new ChartViewModel();
        public MainWindow() {
            this.InitializeComponent();
        }
    }
    public class SeriesTemplateSelector: DataTemplateSelector {
        public DataTemplate LineSeriesTemplate { get; set; }
        public DataTemplate BarSeriesTemplate { get; set; }

        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container) {
            SeriesViewModel seriesItem = (SeriesViewModel)item;
            return seriesItem.SeriesViewType == SeriesType.Line ? LineSeriesTemplate : BarSeriesTemplate;
        }

    }
    public class ChartViewModel : ViewModelBase {
        public List<SeriesViewModel> SeriesData { get; }

        public ChartViewModel() {
            List<SeriesViewModel> seriesData = new List<SeriesViewModel> {
                new SeriesViewModel{ Name = "Canada", SeriesViewType = SeriesType.Line,
                    DataPoints = new List<DataPoint> {
                        new DataPoint{ Argument = "March", Value = 125.45 },
                        new DataPoint{ Argument = "April", Value = 144.3 },
                        new DataPoint{ Argument = "May", Value = 133.54 }
                    }
                },
                new SeriesViewModel{ Name = "USA", SeriesViewType = SeriesType.Line,
                    DataPoints = new List<DataPoint> {
                        new DataPoint{ Argument = "March", Value = 122.36 },
                        new DataPoint{ Argument = "April", Value = 126.87 },
                        new DataPoint{ Argument = "May", Value = 128.33 }
                    }
                },
                new SeriesViewModel{ Name = "France", SeriesViewType = SeriesType.Bar,
                    DataPoints = new List<DataPoint> {
                        new DataPoint{ Argument = "March", Value = 56.32 },
                        new DataPoint{ Argument = "April", Value = 58.63 },
                        new DataPoint{ Argument = "May", Value = 59.14 }
                    }
                },
                new SeriesViewModel{ Name = "Germany", SeriesViewType = SeriesType.Bar,
                    DataPoints = new List<DataPoint> {
                        new DataPoint{ Argument = "March", Value = 62.12 },
                        new DataPoint{ Argument = "April", Value = 69.123 },
                        new DataPoint{ Argument = "May", Value = 75.11 }
                    }
                },
                new SeriesViewModel{ Name = "Austria", SeriesViewType = SeriesType.Bar,
                    DataPoints = new List<DataPoint> {
                        new DataPoint{ Argument = "March", Value = 42.852 },
                        new DataPoint{ Argument = "April", Value = 41.77 },
                        new DataPoint{ Argument = "May", Value = 39.25 }
                    }
                }
            };
            SeriesData = seriesData;
        }
    }
    public class SeriesViewModel {
        public SeriesType SeriesViewType { get; set; }
        public string Name { get; set; }
        public List<DataPoint> DataPoints { get; set; }
    }
    public class DataPoint {
        public string Argument { get; set; }
        public double Value { get; set; }

    }
    public enum SeriesType { Bar, Line }
}

VB.NET

Imports DevExpress.Mvvm
Imports Microsoft.UI.Xaml
Imports Microsoft.UI.Xaml.Controls
Imports System.Collections.Generic

Namespace SeriesTemplateSelection
    Public NotInheritable Partial Class MainWindow
        Inherits Window

        Public ReadOnly Property ViewModel As ChartViewModel = New ChartViewModel()

        Public Sub New()
            Me.InitializeComponent()
        End Sub
    End Class

    Public Class SeriesTemplateSelector
        Inherits DataTemplateSelector

        Public Property LineSeriesTemplate As DataTemplate
        Public Property BarSeriesTemplate As DataTemplate

        Protected Overrides Function SelectTemplateCore(ByVal item As Object, ByVal container As DependencyObject) As DataTemplate
            Dim seriesItem = CType(item, SeriesViewModel)
            Return If(seriesItem.SeriesViewType = SeriesType.Line, LineSeriesTemplate, BarSeriesTemplate)
        End Function
    End Class

    Public Class ChartViewModel
        Inherits ViewModelBase

        Public ReadOnly Property SeriesData As List(Of SeriesViewModel)

        Public Sub New()
            Dim seriesData As List(Of SeriesViewModel) = New List(Of SeriesViewModel) From {
                New SeriesViewModel With {
                    .Name = "Canada",
                    .SeriesViewType = SeriesType.Line,
                    .DataPoints = New List(Of DataPoint) From {
                        New DataPoint With {
                            .Argument = "March",
                            .Value = 125.45
                        },
                        New DataPoint With {
                            .Argument = "April",
                            .Value = 144.3
                        },
                        New DataPoint With {
                            .Argument = "May",
                            .Value = 133.54
                        }
                    }
                },
                New SeriesViewModel With {
                    .Name = "USA",
                    .SeriesViewType = SeriesType.Line,
                    .DataPoints = New List(Of DataPoint) From {
                        New DataPoint With {
                            .Argument = "March",
                            .Value = 122.36
                        },
                        New DataPoint With {
                            .Argument = "April",
                            .Value = 126.87
                        },
                        New DataPoint With {
                            .Argument = "May",
                            .Value = 128.33
                        }
                    }
                },
                New SeriesViewModel With {
                    .Name = "France",
                    .SeriesViewType = SeriesType.Bar,
                    .DataPoints = New List(Of DataPoint) From {
                        New DataPoint With {
                            .Argument = "March",
                            .Value = 56.32
                        },
                        New DataPoint With {
                            .Argument = "April",
                            .Value = 58.63
                        },
                        New DataPoint With {
                            .Argument = "May",
                            .Value = 59.14
                        }
                    }
                },
                New SeriesViewModel With {
                    .Name = "Germany",
                    .SeriesViewType = SeriesType.Bar,
                    .DataPoints = New List(Of DataPoint) From {
                        New DataPoint With {
                            .Argument = "March",
                            .Value = 62.12
                        },
                        New DataPoint With {
                            .Argument = "April",
                            .Value = 69.123
                        },
                        New DataPoint With {
                            .Argument = "May",
                            .Value = 75.11
                        }
                    }
                },
                New SeriesViewModel With {
                    .Name = "Austria",
                    .SeriesViewType = SeriesType.Bar,
                    .DataPoints = New List(Of DataPoint) From {
                        New DataPoint With {
                            .Argument = "March",
                            .Value = 42.852
                        },
                        New DataPoint With {
                            .Argument = "April",
                            .Value = 41.77
                        },
                        New DataPoint With {
                            .Argument = "May",
                            .Value = 39.25
                        }
                    }
                }
            }
            Me.SeriesData = seriesData
        End Sub
    End Class

    Public Class SeriesViewModel
        Public Property SeriesViewType As SeriesType
        Public Property Name As String
        Public Property DataPoints As List(Of DataPoint)
    End Class

    Public Class DataPoint
        Public Property Argument As String
        Public Property Value As Double
    End Class

    Public Enum SeriesType
        Bar
        Line
    End Enum
End Namespace