How to: Create Custom Series Point Model

• Jun 07, 2019
• 2 minutes to read

This example illustrates how to create custom bar models.

To do this, create an object that represents a custom model of a particular series (CustomBar2DModel) and assign it to the Model property of a corresponding series type (BarSeries2D.Model).

Then, create the ControlTemplate object which contains all necessary visual elements to create your own custom model. Assign this template to the PointTemplate property of a series custom model (CustomBar2DModel.PointTemplate).

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace CustomBarModels
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

MainWindow.xaml

<Window x:Class="CustomBarModels.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        Title="MainWindow" Height="350" Width="525" >
    <Window.Resources>
        <ResourceDictionary>
            <dxc:BrushOverlayConverter x:Key="brushOverlayConverter" />
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <dxc:ChartControl>
            <dxc:ChartControl.Diagram>
                <dxc:XYDiagram2D>
                    <dxc:XYDiagram2D.Series>
                        <dxc:BarSideBySideSeries2D ColorEach="True">
                            <dxc:BarSideBySideSeries2D.Model>
                                <dxc:CustomBar2DModel>
                                    <dxc:CustomBar2DModel.PointTemplate>
                                        <ControlTemplate>
                                            <Grid>
                                                <Border x:Name="border" Background="{Binding Path=PointColor, ConverterParameter=Gray, Converter={StaticResource brushOverlayConverter}}" 
                                                        Opacity="0.25" CornerRadius="5,5,0,0" Margin="0,-4,0,0" RenderTransformOrigin="0.5,0.5">
                                                    <Border.RenderTransform>
                                                        <ScaleTransform />
                                                    </Border.RenderTransform>
                                                </Border>
                                                <Border Background="{Binding Path=PointColor, ConverterParameter=Gray, Converter={StaticResource brushOverlayConverter}}" 
                                                        CornerRadius="3,3,0,0" Margin="4,0,4,0">
                                                    <Border CornerRadius="2,2,0,0" Margin="1,1,1,0">
                                                        <Border.Background>
                                                            <Binding Path="PointColor" Converter="{StaticResource brushOverlayConverter}">
                                                                <Binding.ConverterParameter>
                                                                    <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5">
                                                                        <GradientStop Color="#FFB2B2B2" Offset="0" />
                                                                        <GradientStop Color="#FFC2C2C2" Offset="1" />
                                                                    </LinearGradientBrush>
                                                                </Binding.ConverterParameter>
                                                            </Binding>
                                                        </Border.Background>
                                                    </Border>
                                                </Border>
                                            </Grid>
                                        </ControlTemplate>
                                    </dxc:CustomBar2DModel.PointTemplate>
                                </dxc:CustomBar2DModel>
                            </dxc:BarSideBySideSeries2D.Model>
                            <dxc:BarSideBySideSeries2D.Points>
                                <dxc:SeriesPoint Argument="A" Value="2.3" />
                                <dxc:SeriesPoint Argument="B" Value="3.2" />
                                <dxc:SeriesPoint Argument="C" Value="2.8" />
                                <dxc:SeriesPoint Argument="D" Value="2.6" />
                                <dxc:SeriesPoint Argument="E" Value="3.3" />
                                <dxc:SeriesPoint Argument="F" Value="4.2" />
                                <dxc:SeriesPoint Argument="G" Value="3.9" />
                                <dxc:SeriesPoint Argument="H" Value="4.6" />
                            </dxc:BarSideBySideSeries2D.Points>
                        </dxc:BarSideBySideSeries2D>
                    </dxc:XYDiagram2D.Series>
                </dxc:XYDiagram2D>
            </dxc:ChartControl.Diagram>
        </dxc:ChartControl>
    </Grid>
</Window>

MainWindow.xaml.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports System.Windows.Navigation
Imports System.Windows.Shapes

Namespace CustomBarModels
    ''' <summary>
    ''' Interaction logic for MainWindow.xaml
    ''' </summary>
    Partial Public Class MainWindow
        Inherits Window
        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
End Namespace