Styling Axis 3D Gridlines and Labels
Like SciChart 2D, many aspects of the Axis in SciChart3D can be styled, including major and minor gridlines, tick lines and labels.
- To style a MajorGridline or MinorGridLine create a Style with TargetType=Line and set properties such as Stroke, StrokeThickness, StrokeDashArray etc…
- To style a Major or Minor Tick, create a style with TargetType=Line and set Stroke, StrokeThickness etc... You can also set X2 to define the size of the tick.
- To blanket style all labels, set the TickTextBrush and FontSize properties
Styling Axis in 3D Charts |
Copy Code
|
---|---|
<Grid> <Grid.Resources> <Style x:Key="MajorGridLineStyle" TargetType="Line"> <Setter Property="Stroke" Value="Red"/> </Style> <Style x:Key="MinorGridLineStyle" TargetType="Line"> <Setter Property="Stroke" Value="#55FFFFFF"/> </Style> <Style x:Key="MajorTickLineStyle" TargetType="Line"> <Setter Property="Stroke" Value="Red"/> <Setter Property="X2" Value="10"/> </Style> <Style x:Key="MinorTickLineStyle" TargetType="Line"> <Setter Property="Stroke" Value="#55FFFFFF"/> <Setter Property="X2" Value="3"/> </Style> </Grid.Resources> <!-- Create the chart surface --> <!-- where xmlns:s3D="http://schemas.abtsoftware.co.uk/scichart3D" --> <s3D:SciChart3DSurface> <!-- Create XAxis --> <s3D:SciChart3DSurface.XAxis> <s3D:NumericAxis3D TickTextBrush="Red" AxisTitle="XAxis" DrawMajorBands="True" DrawMajorGridLines="True" DrawMinorGridLines="True" DrawMajorTicks="True" DrawMinorTicks="True" AxisBandsFill="#554682B4" FontSize="16" TickLabelAlignment="Camera" MajorGridLineStyle="{StaticResource MajorGridLineStyle}" MinorGridLineStyle="{StaticResource MinorGridLineStyle}" MajorTickLineStyle="{StaticResource MajorTickLineStyle}" MinorTickLineStyle="{StaticResource MinorTickLineStyle}"/> </s3D:SciChart3DSurface.XAxis> <!-- Create YAxis --> <s3D:SciChart3DSurface.YAxis> <s3D:NumericAxis3D AxisTitle="YAxis" AxisBandsFill="#554682B4" TickTextBrush="Green" FontSize="16" TickLabelAlignment="Camera" MajorGridLineStyle="{StaticResource MajorGridLineStyle}" MinorGridLineStyle="{StaticResource MinorGridLineStyle}" MajorTickLineStyle="{StaticResource MajorTickLineStyle}" MinorTickLineStyle="{StaticResource MinorTickLineStyle}"/> </s3D:SciChart3DSurface.YAxis> <!-- Create ZAxis --> <s3D:SciChart3DSurface.ZAxis> <s3D:NumericAxis3D AxisTitle="ZAxis" AxisBandsFill="#554682B4" TickTextBrush="SteelBlue" FontSize="16" TickLabelAlignment="Camera" MajorGridLineStyle="{StaticResource MajorGridLineStyle}" MinorGridLineStyle="{StaticResource MinorGridLineStyle}" MajorTickLineStyle="{StaticResource MajorTickLineStyle}" MinorTickLineStyle="{StaticResource MinorTickLineStyle}"/> </s3D:SciChart3DSurface.ZAxis> </s3D:SciChart3DSurface> </Grid> |
Which results in the following:
NOTE: Unlike SciChart2D, which uses WPF UIElements for axis labels and axis titles, SciChart3D uses DirectX for all drawing. As a result, it is not possible to template axis labels or titles. We have however exposed many properties which you can set via Styles in XAML to give your application an intuitive, WPF feel.