wpf-401759-controls-and-libraries-charts-suite-chart3d-control-series-customize-series-appearance-colorization.md
This topic explains how to color points in a 3D chart and customize surface fill styles.
You can apply different fill styles to surfaces. To do this, initialize the SurfaceSeriesView.FillStyle property with a fill style object. The following sections describe the available fill styles:
Tip
Use the SurfaceSeriesView.Material property to modify the surface material parameters (for example, light parameters).
To paint a surface with a solid color, assign a SolidFillStyle object to the SurfaceSeriesView.FillStyle property. Use the SolidFillStyle.Brush property to specify the surface color.
<dxc:Series3D DisplayName="Function">
...
<dxc:Series3D.View>
<dxc:SurfaceSeriesView ...>
<dxc:SurfaceSeriesView.FillStyle>
<dxc:SolidFillStyle Brush="Coral"/>
</dxc:SurfaceSeriesView.FillStyle>
</dxc:SurfaceSeriesView>
</dxc:Series3D.View>
</dxc:Series3D>
To fill a surface with a gradient brush, assign a GradientFillStyle object to the SurfaceSeriesView.FillStyle property. To specify color transition levels, populate the GradientFillStyle.ColorStops collection with ColorStop objects.
When the gradient fill style is used, the legend is displayed with a gradient scale. You can use {V} placeholder to format legend items.
<dxc:Chart3DControl AspectRatio="2 2 1">
<dxc:Series3DStorage>
<dxc:Series3D>
...
<dxc:Series3D.View>
<dxc:SurfaceSeriesView>
<dxc:SurfaceSeriesView.FillStyle>
<dxc:GradientFillStyle LegendTextPattern="{}{V:F2}">
<dxc:GradientFillStyle.ColorStops>
<dxc:ColorStop Offset="0%" />
<dxc:ColorStop Offset="25%" />
<dxc:ColorStop Offset="50%" />
<dxc:ColorStop Offset="75%" />
<dxc:ColorStop Offset="100%" />
</dxc:GradientFillStyle.ColorStops>
</dxc:GradientFillStyle>
</dxc:SurfaceSeriesView.FillStyle>
</dxc:SurfaceSeriesView>
</dxc:Series3D.View>
</dxc:Series3D>
</dxc:Series3DStorage>
<dxc:Chart3DControl.Palette>
<dxc:CustomPalette>
<dxc:CustomPalette.Colors>
<Color>#FF4472C4</Color>
<Color>#FF5B9BD5</Color>
<Color>#FF70AD47</Color>
<Color>#FFFFC000</Color>
<Color>#FFED7D31</Color>
</dxc:CustomPalette.Colors>
</dxc:CustomPalette>
</dxc:Chart3DControl.Palette>
</dxc:Chart3DControl>
To paint a surface with stripes, assign a StripeFillStyle object to the SurfaceSeriesView.FillStyle property. To specify color transition levels, populate the GradientFillStyle.ColorStops collection with ColorStop objects.
The legend displays a value range for each stripe when this fill style is used. You can use {V1} and {V2} placeholders to format legend items.
<dxc:Chart3DControl>
<dxc:Series3DStorage>
<dxc:Series3D ...>
...
<dxc:Series3D.View>
<dxc:SurfaceSeriesView>
<dxc:SurfaceSeriesView.FillStyle>
<dxc:StripeFillStyle LegendTextPattern="{}{V1:f4} .. {V2:f4}">
<dxc:StripeFillStyle.ColorStops>
<dxc:ColorStop Offset="0%" />
<dxc:ColorStop Offset="25%" />
<dxc:ColorStop Offset="50%" />
<dxc:ColorStop Offset="75%" />
</dxc:StripeFillStyle.ColorStops>
</dxc:StripeFillStyle>
</dxc:SurfaceSeriesView.FillStyle>
</dxc:SurfaceSeriesView>
</dxc:Series3D.View>
</dxc:Series3D>
</dxc:Series3DStorage>
<dxc:Chart3DControl.Palette>
<dxc:CustomPalette>
<dxc:CustomPalette.Colors>
<Color>#FF5B9BD5</Color>
<Color>#FF70AD47</Color>
<Color>#FFFFC000</Color>
<Color>#FFED7D31</Color>
</dxc:CustomPalette.Colors>
</dxc:CustomPalette>
</dxc:Chart3DControl.Palette>
</dxc:Chart3DControl>
To draw an image on a surface, assign an ImageFillStyle object to the SurfaceSeriesView.FillStyle property. Use the ImageFillStyle.ImageSource property to set the path to an image.
<dxc:Series3D DisplayName="Function">
...
<dxc:Series3D.View>
<dxc:SurfaceSeriesView>
<dxc:SurfaceSeriesView.FillStyle>
<dxc:ImageFillStyle ImageSource="dx-logo.png"/>
</dxc:SurfaceSeriesView.FillStyle>
</dxc:SurfaceSeriesView>
</dxc:Series3D.View>
</dxc:Series3D>
You can apply various colorization algorithms to bars, points, bubbles and surface point markers. To do this, initialize the Series3DViewBase.Colorizer property with a colorizer object.
Assign a SolidColorizer3D object to the Series3DViewBase.Colorizer property to paint all points (markers) with a solid brush. Specify a color via the Brush property.
<dxc:Series3D DisplayName="Function">
...
<dxc:Series3D.View>
<dxc:Point3DSeriesView ...>
<dxc:Point3DSeriesView.Colorizer>
<dxc:SolidColorizer3D Brush="MediumSeaGreen"/>
</dxc:Point3DSeriesView.Colorizer>
</dxc:Point3DSeriesView>
</dxc:Series3D.View>
</dxc:Series3D>
Assign a ColorEachColorizer3D object to the Series3DViewBase.Colorizer property to apply a different color to points (markers). This colorizer sequentially assigns colors from the palette to individual points (markers). Colors are repeated if the number of data points exceeds the palette size. You can specify the palette via the Palette property (if not specified, the chart palette is used).
When SolidColorizer3D is applied to points (markers), the legend displays all points. You can use {X}, {Y}, and {Z} placeholders to format legend items.
<dxc:Series3D>
...
<dxc:Series3D.View>
<dxc:Point3DSeriesView ...>
<dxc:Point3DSeriesView.Colorizer>
<dxc:ColorEachColorizer3D ShowInLegend="True"
LegendTextPattern="{}{X:f2}, {Y:f2}, {Z:f2}">
<dxc:ColorEachColorizer3D.Palette>
<dxc:CustomPalette>
<dxc:CustomPalette.Colors>
<Color>#FF5B9BD5</Color>
<Color>#FF70AD47</Color>
<Color>#FFFFC000</Color>
<Color>#FFED7D31</Color>
</dxc:CustomPalette.Colors>
</dxc:CustomPalette>
</dxc:ColorEachColorizer3D.Palette>
</dxc:ColorEachColorizer3D>
</dxc:Point3DSeriesView.Colorizer>
</dxc:Point3DSeriesView>
</dxc:Series3D.View>
</dxc:Series3D>
When a RangeColorizer3D is assigned to the Series3DViewBase.Colorizer property, a point color depends the range to which the point value belongs. You can use the RangeColorizer3D.RangeStops property to specify value range boundaries.
To customize legend items, use {V1} and {V2} placeholders.
<dxc:Series3D ...>
<dxc:Series3D.View>
<dxc:Bar3DSeriesView >
<dxc:Bar3DSeriesView.Colorizer>
<dxc:RangeColorizer3D RangeStops="30 60 90 120 150"
LegendTextPattern="{}{V1:f1} .. {V2:f1}"
ShowInLegend="True">
<dxc:RangeColorizer3D.Palette>
<dxc:CustomPalette>
<dxc:CustomPalette.Colors>
<Color>#6EC95C</Color>
<Color>#ACE45C</Color>
<Color>#E5E335</Color>
<Color>#FEAD2D</Color>
<Color>#FF5A19</Color>
</dxc:CustomPalette.Colors>
</dxc:CustomPalette>
</dxc:RangeColorizer3D.Palette>
</dxc:RangeColorizer3D>
</dxc:Bar3DSeriesView.Colorizer>
</dxc:Bar3DSeriesView>
</dxc:Series3D.View>
</dxc:Series3D>
Data-bound series can fetch point colors from a data source field. To do this, assign a ColorObjectColorizer3D object to the Series3DViewBase.Colorizer property. Use the SeriesPoint3DDataSourceAdapter.ColorDataMember or Series3DDataSourceAdapter.ColorDataMember (depending on the data binding approach) to pass the name of a field that stores colors.
The following color formats are supported:
Integer and unsigned integers that represent colors in the ARGB format. For example, 0xff808080 (0xAARRGGBB).
String. You can pass color names, for example, “Magenta”. The Colors class implements a set of available color names.
<dxc:Chart3DControl.DataContext>
<local:ChartViewModel/>
</dxc:Chart3DControl.DataContext>
...
<dxc:Series3D DisplayName="Series">
<dxc:SeriesPoint3DDataSourceAdapter DataSource="{Binding DataPoints}"
XArgumentDataMember="X"
YArgumentDataMember="Y"
ValueDataMember="Z"
ColorDataMember="Color"/>
<dxc:Series3D.View>
<dxc:Point3DSeriesView MarkerSize="50">
<dxc:Point3DSeriesView.Colorizer>
<dxc:ColorObjectColorizer3D LegendTextPattern="{}{X:f1}, {Y:f1}, {Z:f1}"/>
</dxc:Point3DSeriesView.Colorizer>
</dxc:Point3DSeriesView>
</dxc:Series3D.View>
</dxc:Series3D>
Show View Model Implementation
using System.Collections.Generic;
using System.Windows;
using System.Windows.Media;
//...
public class ChartViewModel {
List<DataPoint> dataPoints;
public List<DataPoint> DataPoints {
get {
if (dataPoints == null) {
dataPoints = new List<DataPoint> {
new DataPoint (0, 10, 1, "Magenta"),
new DataPoint (6, 11.46, 2, 0xfff58600),
new DataPoint (5, 11.90, 5, new Color(){ A=100, R=20, G=80, B=180 }),
new DataPoint (9, 12.1, 5, new SolidColorBrush(Colors.DarkGreen)),
};
}
return dataPoints;
}
}
}
public class DataPoint {
public double X { get; set; }
public double Y { get; set; }
public double Z { get; set; }
public object Color { get; set; }
public DataPoint(double x, double y, double z, object color) {
this.X = x;
this.Y = y;
this.Z = z;
this.Color = color;
}
}
Public Class ChartViewModel
Private f_DataPoints As List(Of DataPoint)
Public ReadOnly Property DataPoints As List(Of DataPoint)
Get
If f_DataPoints Is Nothing Then
f_DataPoints = New List(Of DataPoint) From {
New DataPoint(0, 10, 1, "Magenta"),
New DataPoint(6, 11.46, 2, &Hfff58600),
New DataPoint(5, 11.90, 5, New Color() With {
.A = 100,
.R = 20,
.G = 80,
.B = 180
}),
New DataPoint(9, 12.1, 5, New SolidColorBrush(Colors.DarkGreen))
}
End If
Return f_DataPoints
End Get
End Property
End Class
Public Class DataPoint
Public Property X As Double
Public Property Y As Double
Public Property Z As Double
Public Property Color As Object
Public Sub New(ByVal x As Double, ByVal y As Double, ByVal z As Double, ByVal color As Object)
Me.X = x
Me.Y = y
Me.Z = z
Me.Color = color
End Sub
End Class
If you want point colors to vary depending on associated keys, assign a KeyColorColorizer3D object to the Series3DViewBase.Colorizer property. Points with the same key have the same color. Colors are repeated if the number of keys exceeds the number of palette colors.
Use the Palette property to specify the palette. If the palette is not specified, the chart palette is used.
<dxc:Chart3DControl.DataContext>
<local:ChartViewModel/>
</dxc:Chart3DControl.DataContext>
...
<dxc:Series3D DisplayName="Series">
<dxc:SeriesPoint3DDataSourceAdapter DataSource="{Binding DataPoints}"
XArgumentDataMember="X"
YArgumentDataMember="Y"
ValueDataMember="Z"
ColorDataMember="Key"/>
<dxc:Series3D.View>
<dxc:Point3DSeriesView MarkerSize="50">
<dxc:Point3DSeriesView.Colorizer>
<dxc:KeyColorColorizer3D LegendTextPattern="Key: {V}">
<dxc:KeyColorColorizer3D.Palette>
<dxc:CustomPalette>
<dxc:CustomPalette.Colors>
<Color>#6EC95C</Color>
<Color>#FF5A19</Color>
</dxc:CustomPalette.Colors>
</dxc:CustomPalette>
</dxc:KeyColorColorizer3D.Palette>
</dxc:KeyColorColorizer3D>
</dxc:Point3DSeriesView.Colorizer>
</dxc:Point3DSeriesView>
</dxc:Series3D.View>
</dxc:Series3D>
Show View Model Implementation
using System.Collections.Generic;
using System.Windows;
using System.Windows.Media;
//...
public class ChartViewModel {
List<DataPoint> dataPoints;
public List<DataPoint> DataPoints {
get {
if (dataPoints == null) {
dataPoints = new List<DataPoint> {
new DataPoint (0, 10, 1, "I"),
new DataPoint (6, 11.46, 2, "II"),
new DataPoint (5, 11.90, 5, "II"),
new DataPoint (9, 12.1, 5, "II")
};
}
return dataPoints;
}
}
}
public class DataPoint {
public double X { get; set; }
public double Y { get; set; }
public double Z { get; set; }
public string Key { get; set; }
public DataPoint(double x, double y, double z, string key) {
this.X = x;
this.Y = y;
this.Z = z;
this.Key = key;
}
}
Imports System.Collections.Generic
Imports System.Windows.Media
Imports System.Windows
'...
Public Class ChartViewModel
Private f_DataPoints As List(Of DataPoint)
Public ReadOnly Property DataPoints As List(Of DataPoint)
Get
If f_DataPoints Is Nothing Then
f_DataPoints = New List(Of DataPoint) From {
New DataPoint(0, 10, 1, "I"),
New DataPoint(6, 11.46, 2, "II"),
New DataPoint(5, 11.90, 5, "II"),
New DataPoint(9, 12.1, 5, "II")
}
End If
Return f_DataPoints
End Get
End Property
End Class
Public Class DataPoint
Public Property X As Double
Public Property Y As Double
Public Property Z As Double
Public Property Key As String
Public Sub New(ByVal x As Double, ByVal y As Double, ByVal z As Double, ByVal key As String)
Me.X = x
Me.Y = y
Me.Z = z
Me.Key = key
End Sub
End Class