How to: Customize the Appearance of Crosshair Series Labels

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

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

<Window x:Class="CrosshairLabelTemplateForXYSeries2D.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 ShowArgumentLine="True" 
                                      ShowValueLabels="True" ShowValueLine="True" 
                                      ShowCrosshairLabels="True" ShowArgumentLabels="True" />
            </dxc:ChartControl.CrosshairOptions>
            <!--#endregion CrosshairOptions-->
            <dxc:XYDiagram2D >
                <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.CrosshairLabelTemplate>
                        <DataTemplate >
                            <Grid>
                                <Border BorderThickness="2" CornerRadius="9" >
                                    <Border.Background>
                                        <SolidColorBrush Color="AliceBlue" />
                                    </Border.Background>
                                    <Label BorderThickness="2" BorderBrush="Brown" FontStyle="Italic" 
                                           Content="{Binding Path=Text}" Padding="5,1,5,1.5" 
                                           Foreground="Red" FontSize="14"/>
                                </Border>
                            </Grid>
                        </DataTemplate>
                    </dxc:BarSideBySideSeries2D.CrosshairLabelTemplate>                 
                </dxc:BarSideBySideSeries2D>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</Window>