wpf-4285-controls-and-libraries-charts-suite-chart-control-series-series-and-marker-models.md
The DevExpress WPF Chart Control ships with multiple predefined models that you can assign to your series and series point markers. You can also create custom models for series or markers.
View Example: Chart for WPF - How to Create Custom Series Point Markers
You can apply a model to the Bar, Pie (Donut), and Financial series.
BorderlessGradientWaterfall2DModel
BorderlessSimpleWaterfall2DModel
SemiRoundedRectanglePie3DModel
Use the Model property to assign a model to a series:
<dxc:BarSideBySideSeries2D>
<dxc:BarSideBySideSeries2D.Model>
<dxc:OutsetBar2DModel/>
</dxc:BarSideBySideSeries2D.Model>
</dxc:BarSideBySideSeries2D>
See also: How to: Assign Different Models for Series and Point Markers
You can create a custom model for the following series:
| Series Type | Custom Model Class |
|---|---|
| 2D Bar Series | CustomBar2DModel |
| 3D Bar Series | CustomBar3DModel |
| 2D Pie Series | CustomPie2DModel |
| 3D Pie Series | CustomPie3DModel |
| Stock Series | CustomStock2DModel |
| Candle Stick Series | CustomCandleStick2DModel |
The following example shows how to create a custom model:
The code below defines a custom model for BarSideBySideSeries2D:
<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>
<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>
To view the complete example, refer to the following help topic: How to: Create Custom Series Point Model.
You can apply 2D marker models to Area, Point, Line, and Bubble, Polar and Radar series.
Use the MarkerModel property to assign a marker model to a series:
<dxc:LineSeries2D>
<dxc:LineSeries2D.MarkerModel>
<dxc:CrossMarker2DModel/>
</dxc:LineSeries2D.MarkerModel>
</dxc:LineSeries2D>
You can apply the following models to the Bubble and Point series.
Use the Model property to assign a marker model to a series:
<dxc:XYDiagram3D>
<dxc:XYDiagram3D.Series>
<dxc:PointSeries3D>
<dxc:PointSeries3D.Model>
<dxc:SphereMarker3DModel />
</dxc:PointSeries3D.Model>
</dxc:PointSeries3D>
</dxc:XYDiagram3D.Series>
</dxc:XYDiagram3D>
You can implement a custom marker model for 2D series that support marker models.
Follow the steps below to create a custom marker model:
Assign a CustomMarker2DModel object to the MarkerModel property.
Create a ControlTemplate with visual elements.
Assign this template to the CustomMarker2DModel.PointTemplate property.
<Window.Resources>
<ResourceDictionary>
<dxc:BrushOverlayConverter x:Key="brushOverlayConverter" />
</ResourceDictionary>
</Window.Resources>
...
<dxc:LineSeries2D Name="xLineSeries2D" DataSource="{Binding Data}"
ArgumentDataMember="Argument"
ValueDataMember="Value"
MarkerSize="22"
MarkerVisible="True">
<dxc:LineSeries2D.MarkerModel>
<dxc:CustomMarker2DModel>
<dxc:CustomMarker2DModel.PointTemplate>
<ControlTemplate>
<Grid Background="Transparent" >
<Ellipse Fill="CornflowerBlue" Opacity="0.5" />
<Ellipse Stroke="{Binding Path=PointColor, ConverterParameter=Gray, Converter={StaticResource brushOverlayConverter}}" StrokeThickness="2" />
<Ellipse Stroke="{Binding Path=PointColor, ConverterParameter=Gray, Converter={StaticResource brushOverlayConverter}}" StrokeThickness="2" Margin="4" />
<Ellipse Fill="Red" Margin="8" />
</Grid>
</ControlTemplate>
</dxc:CustomMarker2DModel.PointTemplate>
</dxc:CustomMarker2DModel>
</dxc:LineSeries2D.MarkerModel>
</dxc:LineSeries2D>
You can use different custom marker models based on a point argument:
View Example: How to: Select a series point marker based on a point argument
See Also