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

How to: Bind Series to View Models Using the Item Template Selector

  • 8 minutes to read

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>