How to: Customize the Appearance of Crosshair Series Labels

• Jun 07, 2019

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.

View Example

MainWindow.xaml

<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>