How to: Customize the Appearance of Crosshair Axis Labels

This example shows how to customize the visual representation of axis crosshair labels via their template.

To accomplish this, it is necessary to create a DataTemplate object that specifies the appearance of axis crosshair labels, and assign it to the Axis2D.CrosshairLabelTemplate property.

View Example

<Window x:Class="CrosshairLabelTemplateForAxisLabels.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" >
    <Grid>
        <dxc:ChartControl>
            <!--#region CrosshairOptions-->
            <dxc:ChartControl.CrosshairOptions>
                <dxc:CrosshairOptions ShowArgumentLabels="True" ShowArgumentLine="True" 
                                      ShowValueLabels="True" ShowValueLine="True" ShowCrosshairLabels="False"/>
            </dxc:ChartControl.CrosshairOptions>
            <!--#endregion CrosshairOptions-->
            <dxc:XYDiagram2D>
                <dxc:XYDiagram2D.AxisX>
                    <dxc:AxisX2D>
                        <dxc:AxisX2D.CrosshairLabelTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Border BorderThickness="0.9">
                                        <Border.Background>
                                            <SolidColorBrush Color="Lavender" />
                                        </Border.Background>
                                        <Label BorderThickness="0.1"  FontStyle="Oblique" 
                                           Content="{Binding Path=Text}" Padding="12,1,5,1.5" 
                                           Foreground="Green" FontSize="14"/>
                                    </Border>
                                </Grid>
                            </DataTemplate>
                        </dxc:AxisX2D.CrosshairLabelTemplate>
                    </dxc:AxisX2D>
                </dxc:XYDiagram2D.AxisX>
                <dxc:BarSideBySideSeries2D ColorEach="True">
                    <dxc:BarSideBySideSeries2D.Points>
                        <dxc:SeriesPoint Argument="A" Value="2" />
                        <dxc:SeriesPoint Argument="B" Value="3" />
                        <dxc:SeriesPoint Argument="C" Value="5" />
                        <dxc:SeriesPoint Argument="D" Value="7" />
                    </dxc:BarSideBySideSeries2D.Points>
                </dxc:BarSideBySideSeries2D>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</Window>