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
[DP(null, Handler = "OnSeriesItemTemplateSelectorChanged")]
public DataTemplateSelector SeriesItemTemplateSelector { get; set; }
#Property Value
Type | Description |
---|---|
Data |
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:
<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>
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 }
}